Service Worker已经面世很久了，很多网站以及小程序都在使用这项由谷歌操刀的黑科技，它能将符合规则的指定资源缓存到用户本地，与浏览器缓存不同，它使用浏览器提供的API能力，独立运行于主线程之外操纵存储。
先看看效果，如下图所示。本文将从零开始，使用Service Worker实现网站优化前端的加速。
首先我们需要使用到一款谷歌实现Service Worker的工具，sw-toolbox.js。
官网地址：https://googlechromelabs.github.io/sw-toolbox/
sw-toolbox工具GitHub开源地址：https://github.com/GoogleChromeLabs/sw-toolbox
然后在你的网站根目录建立一个名为service-worker.js的文件，里面的代码如下：
复制
'use strict';
(function () {
'use strict';
/**
* Service Worker Toolbox caching
*/
var cacheVersion = '-toolbox-v1';
var staticVendorCacheName = 'static-vendor' + cacheVersion;
var staticAssetsCacheName = 'static-assets' + cacheVersion;
var maxEntries = 5000;
//引用toolbox.js,自己放在能找到的地方(可以填写绝对链接或者相对链接)
self.importScripts('https://xxxx.xxxx.com/sw-toolbox.js');
self.toolbox.options.debug = false;
//添加图片静态资源，具体目录请自行更换
self.toolbox.router.get('/wp-content/uploads/(.*)', self.toolbox.cacheFirst, {
cache: {
name: staticAssetsCacheName,
maxEntries: maxEntries
}
});
//以下均为第三方资源缓存
self.toolbox.router.get('/(.*)(.js)', self.toolbox.cacheFirst, {
origin: /apps\.bdimg\.com/,
cache: {
name: staticVendorCacheName,
maxEntries: maxEntries
}
});
// immediately activate this serviceworker
self.addEventListener('install', function (event) {
return event.waitUntil(self.skipWaiting());
});
self.addEventListener('activate', function (event) {
return event.waitUntil(self.clients.claim());
});
})();
service-worker.js里面的规则就是自定义的缓存规则，写的时候注意正则是否正确，否则会报错。方向，仅报错，不会影响网站正常运行。
这里有一个缓存策略参数需要注意，在本例中，使用缓存优先：
- 网络优先 Network first
- 缓存优先 Cache first
- 最快 Fastest（本地和网络请求同时进行，谁快用谁）
- 只用缓存 Cache Only
- 只用网络 Network Only
到了这里，距离成功仅有一步之遥。
在你的网页底部添加如下JavaScript，用于启动service-worker.js缓存处理线程。
复制
<script>
var serviceWorkerUri = '/service-worker.js';
if ('serviceWorker'in navigator) {
navigator.serviceWorker.register(serviceWorkerUri).then(function() {
if (navigator.serviceWorker.controller) {
console.log('Assets cached by the controlling service worker.');
} else {
console.log('Please reload this page to allow the service worker to handle network operations.');
}
}).catch(function(error) {
console.log('ERROR: ' + error);
});
} else {
console.log('Service workers are not supported in the current browser.');
}
</script>里面的提示方便调试时查看状态，不要也可以。
注意：service-worker.js有一个作用域，默认在自己所在目录下，超出作用域范围将不会被缓存规则命中，如果你要缓存的内容较多，建议放在根目录，以便适配全站。另外，对service-worker.js文件的任意修改都将使其哈希值发生变化，浏览器将自动重新加载新的规则。
如果你觉得缓存功能不够强大，可以考虑使用谷歌service worker的升级版：谷歌缓存黑科技升级版workbox
评论 （0）