1、serviceWorker介绍
service worker是一段运行在浏览器后台的JavaScript脚本，在页面中注册并安装成功后，它可以拦截和处理网络请求，实现缓存资源并可在离线时响应用户的请求。针对弱网及无网络场景，可使用离线资源。
特点：
网站必须使用 HTTPS。本地可使用 localhost
单独的运行环境和执行线程：在一个新线程中，不会影响js主线程的运行，所以不会造成阻塞。
不能访问dom：但service worker可以通过postMessage与页面之间通信
生命周期：
installing - 安装事件被触发，但还没完成。缓存静态资源
installed" - 安装完成
activating - 激活事件被触发，但还没完成
activated - 激活成功 更新资源
redundant - 废弃，可能是因为安装失败，或者是被一个新版本覆盖
事件：
install: 安装阶段触发，缓存静态资源
activate：sw激活时触发，做缓存更新，删除旧资源
fetch：拦截与处理网络请求，缓存匹配及缓存策略制定
使用实例：
//缓存资源的两种方式：
//（1）在install事件中，进行静态资源的缓存，自定义要缓存的资源
//（2）在fetch事件中，通过service worker的fetch截获网络请求，请求成功后将资源缓存起来。即在网络请求完成后，缓存也完成，不需额外请求。 // 要注意一点，/sw.js 文件可能会因为浏览器缓存问题，当文件有了变化时，浏览器里还是旧的文件。这会导致更新得不到响应。如遇到该问题，可尝试这么做：在 Web Server 上添加对该文件的过滤规则，不缓存或设置较短的有效期。 //定义缓存的key及缓存列表
var cacheStorageKey = 'pwa-sw20180409-2';
var cacheWhitelist = ['pwa-sw20180409-2']; //清理缓存，保留whitelist中的缓存，其他的删除
var cacheList = [
'./main.html',
'./js/main.js',
'./css/main.css',
]; self.addEventListener("install", function(e) {
console.log("sw install 事件触发", e);
e.waitUntil( //安装成功后 ServiceWorker 状态会从 installing 变为 installed 当 Promise reject 的时候，代表着安装失败，浏览器将这个 SW 废弃掉，不会控制任何 clients。
caches.open(cacheStorageKey)
.then(cache => cache.addAll(cacheList)) //cacheList中的文件全部安装完成 加载这些资源并将响应添加至缓存。cache.addAll() 是原子操作，如果某个文件缓存失败了，那么整个缓存就会失败！
.then(() => self.skipWaiting()) //self.skipWaiting() 页面更新的过程当中, 新的 Service Worker 脚本能立即激活和生效 跳过等待状态
)
}); // 如果希望在有了新版本时，所有的页面都得到及时更新，则在安装阶段跳过等待，直接进入 active
/*self.addEventListener('install', function(event) {
event.waitUntil(self.skipWaiting());
});*/ self.addEventListener('activate', event => event.waitUntil(
Promise.all([
// 更新客户端
self.clients.claim(), //让 clients 受service worker控制
// 清理旧版本
caches.keys().then(cacheList => Promise.all(
cacheList.map(cacheName => {
console.log("缓存键名", cacheName, cacheWhitelist);
/*if (cacheWhitelist.indexOf(cacheName) == -1) {
console.log("删除老的缓存", cacheName);
caches.delete(cacheName);
}*/
})
)).then(function(){ console.log("activate事件回调");
console.log('self.clients',self.clients);
// return self.clients.matchAll()
return self.clients.matchAll()
.then(function(clients) {
console.log("客户端clients",clients);
if (clients && clients.length) {
clients.forEach(function (client) {
console.log("客户端client",client);
// 这样发出去，sw-register.js 就能收的到啦
client.postMessage('sw.update');
})
}
})
}).catch(function(err) {
console.log("err", err);
})
])
));
//更新缓存，清理旧缓存
/*self.addEventListener("activate",function(e){
console.log("清理旧缓存");
e.waitUntil(
caches.keys().then(function(keyList){
return Promise.all(keyList.map(function(key){
console.log("缓存列表中的key",key);
if(cacheWhitelist.indexOf(key)==-1){
console.log("删除key",key);
return caches.delete(key);
}
}));
})
)
});*/ //监听资源请求 判断是否从缓存中获取
self.addEventListener("fetch", function(e) { console.log("fetch拦截事件", e.request);
var startTime = + new Date();
e.respondWith(
caches.match(e.request)
.then(function(response) {
console.log("caches", caches);
e.request.cache = false;
e.request.headers = {"Cache-Control":"no-cache"};
// console.log("缓存结果", response);
// console.log('更新后e.request',e.request);
if (response != null) { // // 如果 Service Worker 有自己的返回，就直接返回，减少一次 http 请求
console.log("匹配成功 使用缓存", e.request);
var endTime = + new Date();
console.log("使用缓存耗时",endTime-startTime);
return response;
}
console.log("response为null 走网络请求", e.request); // 如果 service worker 没有返回，那就得直接请求真实远程服务
//var request = e.request.clone(); // 把原始请求拷过来
return fetch(e.request).then(function(httpRes) { // fetch(fetchRequest, { credentials: 'include' } ); //fetch请求默认不带cookie，可通过此参数将cookie带过去
var endTime = + new Date();
console.log("走网络请求耗时",endTime-startTime);
// 请求失败了，直接返回失败的结果就好了。。
if (!httpRes || httpRes.status !== 200) {
return httpRes;
} // 请求成功的话，将请求缓存起来。 如果是index.html页面的话 需要考虑更新问题
// var responseClone = httpRes.clone();
// caches.open(cacheStorageKey).then(function (cache) {
// cache.put(e.request, responseClone);
// }); return httpRes; }).catch(function(e) {
console.log("网络请求失败", e);
// return fetch(e.request);
})
}).catch(function(e) {
console.log("匹配失败", e.request);
return fetch(e.request);
})
)
}); //监听离线状态
/*self.addEventListener('offline', function() {
Notification.requestPermission().then(grant => {
if (grant !== 'granted') {
return;
} const notification = new Notification("Hi，网络不给力哟", {
body: '您的网络貌似离线了，不过在志文工作室里访问过的页面还可以继续打开~',
icon: '//lzw.me/images/avatar/lzwme-80x80.png'
}); notification.onclick = function() {
notification.close();
};
});
});
*/ //错误监控
self.onerror = function(errorMessage, scriptURI, lineNumber, columnNumber, error) {
if (error) {
console.log(error);
// reportError(error);
} else {
console.log(errorMessage, scriptURI, lineNumber, columnNumber, error)
// reportError({
// message: errorMessage,
// script: scriptURI,
// line: lineNumber,
// column: columnNumber
// });
}
} //当 Promise 类型的回调发生reject 却没有 catch 处理，会触发 unhandledrejection 事件。 self.addEventListener('unhandledrejection', function(event) {
console.log("unhandledrejection", event);
// reportError({
// message: event.reason
// })
});
2、workbox
workbox 是 GoogleChrome 团队推出的一套 Web App 静态资源本地存储的解决方案，该解决方案包含一些 Js 库和构建工具，在 Chrome Submit 2017 上首次隆重面世。而在 workbox 背后则是 Service Worker 和 Cache API 等技术和标准在驱动。
配置化：几乎不用考虑太多的具体实现，只用做一些配置。
简单却不失灵活，可以完全自定义相关需求（支持 Service Worker 相关的特性如 Web Push, Background sync 等）。
支持多种缓存策略：针对各种应用场景的多种缓存策略以及自定义缓存策略
（1）基于workbox-build工具生成缓存列表
需要先安装workbox-build，npm install workbox-build --save-dev
根据配置参数提取预缓存的资源文件，注入到预缓存内容列表中，生成一份service worker 文件。
workboxBuild.injectManifest(params)
swSrc : 生成 service-worker.js 所需的模板文件所在位置
swDest：生成的 service-worker.js 的存放位置。
globDirectory：指定需要预缓存的静态文件的目录。
globPatterns：相对于 globDirectory 指定的目录，指出哪些文件需要被预缓存。
globIgnores：相对于 globDirectory 指定的目录，指出哪些文件不需要被预缓存。service-worker.js 本身会被自动排除
const workboxBuild = require('workbox-build');
const path = require("path");
const fs = require("fs");
workboxBuild.injectManifest({
swSrc: path.join(__dirname, './', 'sw.dev.js'),
swDest: path.join(__dirname, './', 'sw.js'),
globDirectory: '.\\',
globPatterns: ['**\/*.{html,js,css,png,jpeg}'
],
globIgnores: ['clear.html',"sw.js", "sw-register.js", "sw.dev.js", "sw-register.dev.js", "build/*.js", "workbox-cli-config.js", "webpack.config.js", "build-sw.js", "Gruntfile.js", "package.json", "batlog.log", 'node_modules/**', "js/lib/**"],
templatedUrls: {
// '/shell': ['dev/templates/app-shell.html', 'dev/**\/*.css'],
},
// 要替换的预留代码区正则
// injectionPointRegexp: /(\.precacheAndRoute\()\s*\[\s*\]\s*(\))/,
// workbox.precaching.precacheAndRoute([],{ ignoreUrlParametersMatching:[/v/,/\d+/]});
injectionPointRegexp: /(\.precacheAndRoute\()\s*\[\s*\]\s*(,\{ignoreUrlParametersMatching\:\s*\[\S*\]\s*\}\))/,
}).then(function() {
console.log("注入预缓存文件列表，sw.js生成");
})
.catch(err => {
console.error(`Unable to inject the precache manifest into sw.js`);
console.error(err);
throw err;
});
(2)缓存更新
增量更新：当Service worker文件发生变化时，会重新触发注册，新的sw安装后，会缓存新的sw中的缓存资源列表中发生变化的文件。而每个资源的更新主要依靠每个文件的revision值，根据revision值来判断文件的变化，决定是否更新。
3、需要注意的问题
（1）sw缓存问题：
sw文件本身不能被缓存，同时，注册Service worker的载体文件也不能被缓存。
SW注册思路:
借助一个js文件（sw-register.js）来注册sw，并且保证这个文件是每次都请求最新的，同时在注册sw时增加版本号管理，每次发布时更新版本号
function insertSWregister(){
console.log("插入sw-register.js");
var script = document.createElement('script');
var firstScript = document.getElementsByTagName('script')[0];
script.type = 'text/javascript';
script.async = true;
script.src = './sw-register.js?v=' + Date.now();
firstScript.parentNode.insertBefore(script, firstScript);
}
sw-register.js
// var VERSION = '2.04';//window._pasSwVersion;
if ('serviceWorker' in navigator) {
console.log("支持service worker!!!!!");
// 为了保证首屏渲染性能，可以在页面 load 完之后注册 Service Worker
navigator.serviceWorker.getRegistrations().then(function(regs) {
console.log("注册的sw list", regs);
// delSW(regs,function(){ //删除成功后回调
// window.location.reload();
// });
regSW();
}).catch(function(e) {
console.log("getRegistrations出错", e);
});
} else {
console.log("不支持service worker!");
}
//监听sw更新
window.addEventListener('swupdate', e => {
// service-worker.js 如果更新成功会 postMessage 给页面，内容为 'sw.update'
console.log("sw.update更新完成");
if(confirm("内容发生更新，是否要立即更新？")){
window.location.reload();
}
}); function regSW() {
navigator.serviceWorker.register('./sw.js?v=1523357182344').then(function(reg) {
console.log("注册成功，当前作用域为:", reg.scope); reg.onupdatefound = function() { console.log("状态变化",reg);
var installingWorker = reg.installing; //安装中的 SW
console.log("状态变化installingWorker.state",installingWorker.state);
installingWorker.onstatechange = function() {
switch (installingWorker.state) {
//state;
// "installing" - 安装事件被触发，但还没完成
// "installed" - 安装完成
// "activating" - 激活事件被触发，但还没完成
// "activated" - 激活成功
// "redundant" - 废弃，可能是因为安装失败，或者是被一个新版本覆盖
case 'installed':
console.log("安装完成installed");
console.log('navigator.serviceWorker.controller:',navigator.serviceWorker.controller);
if (navigator.serviceWorker.controller) { //判断当前client是否被serviceworker控制
var event = document.createEvent('Event');
event.initEvent('swupdate', true, true);
window.dispatchEvent(event);
}
break;
}
};
};
if (reg.installing) {
console.log('Service worker installing。。。');
}
if (reg.waiting) {
console.log('Service worker installed。。。');
}
if (reg.active) {
console.log('Service worker active。。。');
}
}).catch(function(e) {
console.log("注册service worker失败", e);
})
} //删除缓存
function delSW(regs,callback) {
for (var reg of regs) {
console.log("遍历注册的sw", reg);
var url= window.location.href;
var scope = url.substr(0,url.indexOf("/index.html")+1);
if (reg.scope == scope) {
reg.unregister().then(function(boolean) { //卸载sw 后，再次请求会直接走网络请求，但是缓存文件并未删除
// if boolean = true, unregister is successful
console.log("注销成功 unregister", reg);
//清除所有缓存文件
caches.delete("workbox-precache-"+scope).then(function(data) {
console.log("删除缓存workbox-precache-"+scope, data);
if(typeof callback=="function"){
callback();
}
});
});
}
} }
(2)缓存匹配为题
我们的文件都带了时间戳，并且入口文件在native中会被自动加上版本号v，而缓存匹配是精确匹配
https://XX/index.html？20180410
https://XX/index.html?v=6.1
方案：workbox中支持忽略参数配置项，可以忽略url中的部分参数
ignoreUrlParametersMatching:[/v/,/\d+/] 忽略v参数和随机数参数
workbox.precaching.precacheAndRoute([],{ignoreUrlParametersMatching:[/v/,/\d+/]});
（2）浏览器缓存问题：
sw在更新时，如果文件的revision发生变化，则sw会做一次请求，重新请求该文件，但是如果浏览器缓存未失效，则返回的文件内容还是旧的，无法更新。
请求的响应顺序： Service Worker > http cache > 网络请求
针对在更新文件时被浏览器缓存拦截导致的无法更新，workbox中采用设置Request对象上的cache配置项，跳过浏览器缓存。对于不支持cache配置项的使用追加参数的方式避开浏览器缓存。
_cacheBustRequest(request) {
// let url = request.url+"?"+(+new Date());
let url = request.url;
const requestOptions = {};
if ('cache' in Request.prototype) {
// Make use of the Request cache mode where we can.
// Reload skips the HTTP cache for outgoing requests and updates
// the cache with the returned response.
requestOptions.cache = 'reload';
requestOptions.headers = myHeaders;
} else {
const parsedURL = new URL(url, location);
// This is done so the minifier can mangle 'global.encodeURIComponent'
const _encodeURIComponent = encodeURIComponent;
parsedURL.search += (parsedURL.search ? '&' : '') + _encodeURIComponent(`_workbox-cache-bust`) + '=' + _encodeURIComponent(this._revision);
url = parsedURL.toString();
}
return new Request(url, requestOptions);
}
}
最终方案：（1）直接在url后面追加时间戳，保证在sw更新文件时，绕过浏览器缓存，从服务器获取最新文件
（2）强制请求服务器，跳过http缓存
var myHeaders = new Headers();
myHeaders.append('Cache-Control', 'max-age=0');
requestOptions.headers = myHeaders;
new Request(url, requestOptions);
4、pwa前后对比
（1）离线可用性：提供离线访问能力
（2）性能：文件加载速度，service worker缓存和浏览器缓存读取差异
使用serviceWorker后，多一个向sw发送请求的耗时