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发送请求的耗时