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

相关推荐