基础知识
用户首次访问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生命周期
覆盖率
注意点
- 基于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
);
});
- 调试手动更新
直接点击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
最近写了个知乎日报的pwa,有兴趣可以看下一篇文章
项目地址https://github.com/Stevenzwzhai/zhihu-daily
演示地址https://stevenzwzhai.github.io/zhihu-daily/