PWA之serviceWorker应用
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发送请求的耗时
