Hexo 部署 Service Worker


一. 作用


Service workers 本质上充当 Web 应用程序与浏览器之间的代理服务器,为了适应越来越多的网页应用而产生。

它可以通过拦截并修改访问和资源请求,缓存特定的网页资源,并可以将网页做到离线可用;

同时 Service Workers 也能做到定期后台同步与信息推送。

部署成功后,可以节省用户流量、提升页面二次加载速度等。



二. 须知

需要 Https 支持

黑客可以通过 Service Worker 劫持连接、伪造和过滤响应,因此只能在 Https 网页上注册 Service Workers



三. 部署

1. 注册 Service Worker

① 创建文件

打开 \blog\source\

新建 sw.js

② 跳过渲染

打开 \blog\_config.yml

查找 skip_render

添加  - sw.js

③ 注册

打开 \themes\next\source\js\custom\

新建 custom.js

写入

1
2
3
4
5
6
7
8
9
10
//Service Workers
if ('serviceWorker' in navigator) {
window.addEventListener('load', function () {
navigator.serviceWorker.register('/sw.js').then(function (registration) {
console.log('ServiceWorker registration successful with scope: ', registration.scope);
}).catch(function (err) {
console.log('ServiceWorker registration failed: ', err);
});
});
}

打开 \blog\source\_data\header.swig

添加 <script src="/js/custom/custom.js"></script>

您也可以在其它模块内注册

注:

sw.js文件放在网站的根目录下,Service Worker 将会收到网站的所有 fetch 事件。

如果将 Service Worker 文件注册为/example/sw.js,那么,Service Worker 只能收到/example/路径下的 fetch 事件(例如: /example/page1/, /example/page2/

2. 设定缓存规则

请打开开发者工具-Source自行定义

①载入 sw-toolbox.js 与定义缓存版本、名称、最大缓存数量

打开 \blog\source\sw.js

写入

1
2
3
4
5
6
7
importScripts("/js/custom/sw-toolbox.js");
var cacheVersion = "-17104";
var staticImageCacheName = "image" + cacheVersion;
var staticAssetsCacheName = "assets" + cacheVersion;
var contentCacheName = "content" + cacheVersion;
var vendorCacheName = "vendor" + cacheVersion;
var maxEntries = 100;

您也可以从 css.net 的公共 CDN 库中载入 sw-toolbox.js

1
2
3
self.importScripts("https://cdnjs.cat.net/ajax/libs/sw-toolbox/3.6.1/sw-toolbox.js");
self.toolbox.options.debug = false;
self.toolbox.options.networkTimeoutSeconds = 3;

②图床缓存

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/* Static ImageCache */
self.toolbox.router.get("/(.*)", self.toolbox.cacheFirst, {
origin: /qianling-1254036047\.cos\.ap-chengdu\.myqcloud\.com/,
cache: {
name: staticImageCacheName,
maxEntries: maxEntries
}
});
self.toolbox.router.get("/(.*)", self.toolbox.cacheFirst, {
origin: /t1\.aixinxi\.net/,
cache: {
name: staticImageCacheName,
maxEntries: maxEntries
}
});
self.toolbox.router.get("/(.*)", self.toolbox.cacheFirst, {
origin: /i\.loli\.net/,
cache: {
name: staticImageCacheName,
maxEntries: maxEntries
}
});

③静态内容缓存

公共 CDN 库上调用的文件很少改动,全部使用 cacheFirst
并使百度统计调用的 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
/* Static Cache */
self.toolbox.router.get("/(.*)", self.toolbox.cacheFirst, {
origin: /cdn\.bootcss\.com/,
cache: {
name: staticAssetsCacheName,
maxEntries: maxEntries
}
});
self.toolbox.router.get("/(.*)", self.toolbox.cacheFirst, {
origin: /cdnjs\.cloudflare\.com/,
cache: {
name: staticAssetsCacheName,
maxEntries: maxEntries
}
});
self.toolbox.router.get("/(.*)", self.toolbox.cacheFirst, {
origin: /cdn1\.lncld\.net/,
cache: {
name: staticAssetsCacheName,
maxEntries: maxEntries
}
});
self.toolbox.router.get("/(.*)", self.toolbox.cacheFirst, {
origin: /api\.imjad\.cn/,
cache: {
name: staticAssetsCacheName,
maxEntries: maxEntries
}
});
self.toolbox.router.get("/(.*)", self.toolbox.cacheFirst, {origin: /(hm\.baidu\.com)/,
cache: {
name: vendorCacheName,
maxEntries: maxEntries
}
});

④网页内容缓存

1
2
3
4
5
6
7
8
/* ContentCache */
self.toolbox.router.get("/(.*)", self.toolbox.networkFirst, {
origin: /qianling\.pw/,
cache: {
name: contentCacheName,
maxEntries: maxEntries
}
});

⑤不缓存

对于 sw.js 采取 networkFirst 策略,使访客网络状态正常时更新 sw.js,离线时也能正常使用 Service Worker

1
2
/* NoCache */
self.toolbox.router.get("/sw.js",self.toolbox.networkFirst);

⑥预缓存

每次页面加载时强制更新 Service Worker

1
2
3
4
5
6
7
/* PreCache */
self.addEventListener("install",
function(event) {return event.waitUntil(self.skipWaiting())
});
self.addEventListener("activate",
function(event) {return event.waitUntil(self.clients.claim())
})


四. 缓存管理

访问 chrome://inspect/#service-workers

打开 Service workers



五. Demo


打开 开发者工具-Appliaction-Service Workers

勾选 Offline

NetWork 出现 ⚠,刷新即可体验离线版本



参考文档:
本博客对 sw-toolbox 的实践 – neoFelhz
开始使用 SERVICE WORKERS – 可乐没气的猫
service worker – kailian