Service Worker是什么，详细的不说自己搜。

简单说Service Worker是可以控制Web服务器和浏览器之间的一个中间件，跟HTTP缓存，cookie缓存类似，不过它可以给开发者更大的自由，进行控制使得网页可以离线访问。

当然，想要离线，本篇教程并不能做到，除非你访问了所有页面然后离线或许可以。

启用的前提是必须网站全站都是走HTTPS，然后注册sw.js，我直接在Hexo主题下\layout\_partial\head.ejs文件加入如下代码，也可以到此复制https://gitee.com/ct2/web/blob/master/sw-registered.js

1
2
3
4
5
6
7
8
9
10
11
<script>
  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);
          });
      });
  }
</script>

在网站根目录添加sw.js文件，但还没有生成静态页面，因此我把sw.js文件放在主题的source文件夹下，代码内容如下，复制不便请借一步说话https://gitee.com/ct2/web/blob/master/sw.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
importScripts("/js/sw-toolbox.js");
var cacheVersion = "-17104";
var staticImageCacheName = "image" + cacheVersion;
var staticAssetsCacheName = "assets" + cacheVersion;
var contentCacheName = "content" + cacheVersion;
var vendorCacheName = "vendor" + cacheVersion; 
var maxEntries = 70; /* 最大缓存数量 */
var maxAgeSeconds = 60*60*1; /* 最大缓存时间，单位(s) */
/* 自行修改相应域名 */
self.toolbox.router.get("/(.*)", self.toolbox.networkFirst, {
    origin: /img\.tangruiping\.com/,
    cache: {
        name: staticImageCacheName,
        maxEntries: maxEntries
      }
  });
self.toolbox.router.get("/(.*)", self.toolbox.networkFirst, {
    origin: /www\.tangruiping\.com/,
    cache: {
       name: contentCacheName,
       maxEntries: maxEntries
}
  });


/* 缓存cdn静态资源，自行修改对于你的静态文件资源路径 */
/* cdn.tangruiping.com/lib/中存放静态文件资源则有如下写法 */
self.toolbox.router.get("/lib/(.*)", self.toolbox.fastest, {origin: /cdn\.tangruiping\.com/,});


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

self.addEventListener("install",
function(event) {return event.waitUntil(self.skipWaiting())
});
self.addEventListener("activate",
function(event) {return event.waitUntil(self.clients.claim())
})

注意到上面代码首行的importScripts("/js/sw-toolbox.js");，这里还需要引入一个文件，这个文件我是放在\source\js\sw-toolbox.js文件内容可到此访问https://gitee.com/ct2/web/blob/master/sw-toolbox.js

因为Service Workers 原生API的功能较少，引入sw-toolbox.js来实现缓存控制，有五种策略：

toolbox.networkFirst
先尝试获取服务器中的资源并更新本地缓存，如果未获取到，再使用本地已缓存的资源。

toolbox.cacheFirst
如果请求资源已缓存，则使用缓存资源。否则请求网络资源，并更新本地缓存。

toolbox.fastest
同时请求缓存和网络资源，先请求到的资源会先使用。这个策略总是会发起网络请求，如果当网络请求成功时，缓存将会被更新。

toolbox.cacheOnly
只从缓存中获取资源，无缓存则失败(配合预缓存使用)

toolbox.networkOnly
只使用网络请求，适合于动态内容。

火狐浏览器和Chrome浏览器在这种条件下，还是有些不一样，Chrome浏览器中，只要你鼠标放到某个链接上它就会预先加载，火狐则不会，不知道今后的版本会不会，目前76的火狐版本是不会。因此，启用Service Worker效果在Chrome浏览器上加速效果比火狐上要明显些，其他浏览器内核没试过。

最后，没什么情况应该就是启用成功了，打开浏览器的控制台，查看网络一栏，F5刷新网页看看，是不是可以在传输一栏看到Service Worker字样呢？