给你的hexo博客配上swpp

TO DO

swpp作者文档：docus

    swpp-backends（以下简称 swpp）插件的功能是为网站生成一个高度可用的 ServiceWorker（以下简称 SW），为网站优化二次加载、提供离线体验、提高可靠性，并为此附带了一些其它的功能。
    swpp 的全拼为“Service Worker Plus Plus”（或“ServiceWorker++”），但是其与已有的插件并没有关系，插件中所有代码均为我个人开发，这一点请不要误解。
    我不是太了解sw的功能，所以我只管配置方式，具体功能还请移步上文给出的文档链接~。

    首先，在博客根目录右键Git Bash here，输入以下指令安装：

1
npm i hexo-swpp swpp-backends --save

    anzhiyu主题已经内置了一个sw-rules.js，所以稍微修改修改即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
/**
 * @see https://kmar.top/posts/b70ec88f/
 */

module.exports.config = {
    /**
     * 与 ServiceWorker 有关的配置项
     * 若想禁止插件自动生成 sw，此项填 false 即可
     * @type ?Object|boolean
     */
    serviceWorker: {
        cacheName: "CiraosBlogCache",
        escape: 0
    },
    register: {
        onerror: undefined
    },
    dom: {
        onsuccess: () => {
            caches.match('https://id.v3/').then(function (response) {
                if (response) {
                    // 如果找到了匹配的缓存响应
                    response.json().then(function (data) {
                        anzhiyuPopupManager && anzhiyuPopupManager.enqueuePopup('通知📢', `已刷新缓存，更新为${data.global + "." + data.local}版本最新内容`, null, 5000);
                    });
                } else {
                    console.info('未找到匹配的缓存响应');
                }
            }).catch(function (error) {
                console.error('缓存匹配出错:', error);
            });
        },
    },
    json: {
        merge: ['page', 'archives', 'categories', 'tags']
    },
    external: {
        stable: [
            /^https:\/\/npm\.elemecdn\.com\/[^/@]+\@[^/@]+\/[^/]+\/[^/]+$/,
            /^https:\/\/cdn\.cbd\.int\/[^/@]+\@[^/@]+\/[^/]+\/[^/]+$/,
            /^https:\/\/cdn\.jsdelivr\.net\/npm\/[^/@]+\@[^/@]+\/[^/]+\/[^/]+$/,
        ],
        replacer: srcUrl => {
            if (srcUrl.startsWith('https://npm.elemecdn.com')) {
                const url = new URL(srcUrl)
                return [
                    srcUrl,
                    `https://cdn.cbd.int` + url.pathname,
                    `https://cdn.jsdelivr.net/npm` + url.pathname,
                    `https://cdn1.tianli0.top/npm` + url.pathname,
                    `https://fastly.jsdelivr.net/npm` + url.pathname
                ]
            } else {
                return srcUrl
            }
        },
    }
};

/*
 *
 *
*/
module.exports.skipRequest = request => request.url.startsWith('https://i0.hdslb.com') ||
    request.url.startsWith('https://hm.baidu.com') ||
    request.url.startsWith('https://meting.qjqq.cn') ||
    request.url.startsWith('https://api.i-metro.com');

/**
 * 缓存列表
 * @param clean 清理全站时是否删除其缓存
 * @param match {function(URL)} 匹配规则
 */
module.exports.cacheRules = {
    simple: {
        clean: true,
        search: false,
        match: (url, $eject) => {
            const allowedHost = $eject.domain;
            const allowedPaths = ["/404.html", "/css/index.css"];
            return url.host === allowedHost && allowedPaths.includes(url.pathname);
        },
    },
    cdn: {
        clean: true,
        match: url =>
            [
                "cdn.cbd.int",
                "lf26-cdn-tos.bytecdntp.com",
                "lf6-cdn-tos.bytecdntp.com",
                "lf3-cdn-tos.bytecdntp.com",
                "lf9-cdn-tos.bytecdntp.com",
                "cdn.staticfile.org",
                "npm.elemecdn.com",
            ].includes(url.host) && url.pathname.match(/\.(js|css|woff2|woff|ttf|cur)$/),
    },
};

/**
 * 获取一个 URL 对应的备用 URL 列表，访问顺序按列表顺序，所有 URL 访问时参数一致
 * @param srcUrl {string} 原始 URL
 * @return {{list: string[], timeout: number}} 返回 null 或不返回表示对该 URL 不启用该功能。timeout 为超时时间（ms），list 为 URL 列表，列表不包含原始 URL 表示去除原始访问
 */
module.exports.getSpareUrls = srcUrl => {
    if (srcUrl.startsWith("https://npm.elemecdn.com")) {
        return {
            timeout: 3000,
            list: [srcUrl, `https://cdn.cbd.int/${new URL(srcUrl).pathname}`],
        };
    }
};

/**
 * 获取要插入到 sw 中的变量或常量
 * @param hexo hexo 对象
 * @param rules 合并后的 sw-rules 对象
 * @return {Object} 要插入的键值对
 */
module.exports.ejectValues = (hexo, rules) => {
    return {
        domain: {
            prefix: "const",
            value: new URL(hexo.config.url).host,
        },
    };
};

    再在根目录的config.yml内加入如下配置：

  • enable：如果你不想启用它，将``enable设为false`；
  • auto_exec：swpp有一个命令是hexo swpp。如果你想手动执行它的话，那就在hexo generate之后加上即可，如果你想自动执行的话，则不需要手动添加hexo swpp，并且将以下的auto_exec设置为true；
  • warn_level：构建时拉取版本文件的警告等级。如果你是第一次执行的话，可能会报错，但是忽略即可；还有，如果你的远程文件丢失了，可以将这里的warn_level设置为2，让它重新生成json，然后再下次push的时候再把level调回来；
  • npm_url：# 检查版本的 URL，不能以 ‘/‘ 结尾。
1
2
3
4
5
6
7
8
swpp:
  enable: true      # 是否启用插件
  auto_exec: true    # 是否在发布前自动执行脚本
  # 构建时拉取版本文件的警告等级，缺省为 1（该功能仅在 swpp-backends 版本号 >= 2.1.2 时可用）
  # 0 - 表示不允许出现 404 情况；1 - 表示允许服务器返回 404 状态码；2 - 表示允许任何 404（包括 DNS 解析失败等）
  warn_level: 0
  npm_url: 'https://registry.npmmirror.com' # 检查版本的 URL，不能以 '/' 结尾