Progressive Web Applications

Progressive Web Applications take advantage of new technologies to bring the best of mobile sites and native applications to users. They're reliable, fast, and engaging.

基础知识

用户首次访问service worker控制的网站或页面时，service worker会立刻被下载。
ServiceWorker(web worker 的一种)接口
Cache:表示对request/response对象的存储，一个域可以有多个 Cache 对象. 你将在你的代码中处理和更新缓存 . 在 Cache 除非显示地更新缓存, 否则缓存将不会被更新; 缓存数据不会过期, 除非删除它
Cache.match(request, options)返回一个Promise，查找cache中匹配的request
Cache.match(request, options)匹配一个数组对象中的request
Cache.add(request)发送请求并将请求放入cache中，
Cache.put(request, response)将request和response都添加到cache中
Cache.delete(request, options) 才cache中查找乡音的值，并删除返回一个promise,resoleve为true，如果找不到返回false
Cache,keys(request, options)返回一个promise，resolve为所有的cache键值

CacheStorage: 对Cache对象的存储，提供命名缓存的主目录，sw可以通过访问并维护名字字符串到Cache对象的映射
caches.open(cacheName).then(names){};//打开一个cache对象

Client: 表示sw client的作用域。

sw.js中的self：这个关键字表示的是一个service worker 的执行上下文的一个全局属性（ServiceWorkerGlobalScope），类似于window对象，不过这个self是作用于service worker的全局作用域中。

sw生命周期

image.png

覆盖率

image.png

注意点

基于https
可以使用http-server+ngrok配合,当然更简单的使用github。
2.Service worker是一个注册在指定源和路径下的事件驱动worker。实际上 SW 在你网页加载完成同样也能捕获已经发出的请求，所以，为了减少性能损耗，我们一般直接在 onload 事件里面注册 SW 即可。
作用域问题
SW 的作用域不同，监听的 fetch 请求也是不一样的。例如，我们将注册路由换成: /example/sw.js，那么，SW 后面只会监听 /example 路由下的所有 fetch 请求，而不会去监听其他

register

if(navigator.serviceWorker){
    navigator.serviceWorder.register('sw.js')
        .then(registration  =>  {
              console.log(`registered event at scope:${registration.scope}`);
        })
        .cache(err => {
               throw err;
         })
}

install

self.addEventListener('install', function(event) {
  // Perform install steps
});

缓存文件

const cacheVersion = 'v1';
const cacheList = [
    '/',
    'index.html',
    'logo.png',
    'manifest.json',
    '/dist/build.js'
];
self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open(cacheVersion).then(function(cache) {
      return cache.addAll([cacheList]);
    })
  );
});

event.waitUntil()参数必须为promise，它可以延长一个事件的作用时间，因为我们在打开缓存或者更新的时候很有可能会有延迟，而event.waitUntil()可以防止事件终端。另外它会监听所有的异步promise，一旦有一个reject那么该次event便是失败的，也就是说sw启动失败。当然如果有些文件比较大不好缓存的话别让它返回就好了:

cache.addAll([cachelist1]);
return cache.addAll([cachelist2]);

fetchEvent

缓存捕获，当发起请求的时候将request和response缓存下来（缓存一开始定义的缓存列表）。

self.addEventListener('fetch', (event) => {
    event.respondWith(
        caches.match(event.request)
            .then(response => {
                if(response){
                    return reponse;
                 }
                  return fetch(event.request);
             })
    )
})

这是个比较简单的格式，event.respondWith(r)，包含请求响应代码，可以设置一个参数r，r是一个promise，resolve之后是一个response对象。整段代码意思就是当请求一个文件时，如果缓存中已经有了，那么就直接返回缓存结果，否则发起请求。

问题：如果没有缓存我们怎么处理？

等下次sw根据路由去缓存；
手动缓存

手动缓存

self.addEventListener('fetch', event => {
    event.respondWith(
        caches.match(event.request)
            .then(response => {
                if(response){
                    return response;
                }
                //fetch请求的request、response都定义为stream对象，所以只能读一次这里需要clone一个新的
                let requestObj = event.request.clone();

                return fetch(requestObj)
                            .then(response => {
                                //检测是否成功
                                if(!response || response.status !== 200 || response.type !== 'basic') {
                                    return response;
                                }
                                //如果请求成功，第一要去渲染，第二要缓存
                                //cache.put()也使用stream，所以这里也需要复制一份
                                let responseObj = response.clone();

                                caches.open(cacheVersion)
                                    .then(cache => {
                                        cache.put(event.request, responseObj);
                                    });
                                return response;

                            })
            })
    )
})

为什么stream只能读一次？

当可读流读取一次之后可能已经读到stream结尾或者stream已经close了，这里request和response都实现了clone接口来复制一份，所以在需要二次使用stream的时候就需要用副本来实现了。

删除旧的缓存

self.addEventListener('activate', evnet => {
    event.waitUntil(
        caches.keys().then(cacheNames => {
            return Promise.all(
                cacheNames.filter(cachename => {
                    if(cachename == cacheVersion){
                        return caches.delete(cachename);
                    }
                })
            ).then(() => {
                return self.clients.claim()
            })
        })
    )
})

我们检查之前保存的sw缓存，还要注意一点就是Promise.all()中不能有undefined，所以我们对于相同的版本要过滤，因而不使用map，避免返回undefined。
通过调用 self.clients.claim() 取得页面的控制权, 这样之后打开页面都会使用版本更新的缓存。

更新

当你更新了你的sw文件，并修改了cacheVersion之后，刷新浏览器，期待的变化并没有发生，因为虽然你改变了缓存版本，但是此时旧的sw还在控制整个应用，新的sw并没有生效。这时就需要更新一下sw，有以下方法

registration.update() ，也就是在注册的时候选择合适方式更新

navigator.serviceWorker.register('/sw.js').then(reg => {
  // sometime later…
    reg.update();
});

使用self.skipWaiting();
在install阶段使用这个可以使得新的sw立即生效。

self.addEventListener('install', event => {
  self.skipWaiting();

  event.waitUntil(
    // caching
  );
});

调试手动更新

image.png

直接点击update即可。
注意，我们更新了某些文件的时候也要同时更新sw中的缓存版本（cacheVersion）

manifest文件

这个文件主要是配置添加到桌面的一些基本信息，比如图标启动页等。详细可以看这个https://developer.mozilla.org/zh-CN/docs/Web/Manifest
下面是我写的一个示例https://github.com/Stevenzwzhai/vue2.0-elementUI-axios-vueRouter/blob/master/pwa/sw.js
或者拉取这个项目https://github.com/Stevenzwzhai/PWA-demo