PWA缓存控制和版本升级实践

PWA是会注册一个service-worker的，每次任何被 service worker 控制的资源被请求到时，都会触发 fetch 事件，这些资源包括了指定的 scope 内的文档，和这些文档内引用的其他任何资源（比如 index.html 发起了一个跨域的请求来嵌入一个图片，这个也会通过 service worker 。）

缓存

技术依据

我们可以给 service worker 添加一个 fetch 的事件监听器，接着调用 event 上的 respondWith() 方法来劫持我们的 HTTP 响应，然后你用可以用自己的方法来更新他们。

在任何情况下我们只是简单的响应这些缓存中的 url 和网络请求匹配的资源，比如下面的例子：

this.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
  );
}); 

caches.match(event.request) 允许我们对网络请求的资源和 cache 里可获取的资源进行匹配，查看是否缓存中有相应的资源。这个匹配通过 url 和 vary header进行，就像正常的 http 请求一样，如果没有在缓存中找到匹配的资源，你可以告诉浏览器对着资源直接去 fetch 默认的网络请求。

fetch(event.requ