Service Worker 缓存不更新答案

【问题标题】：Service Workers cache doesn’t updateService Worker 缓存不更新
【发布时间】：2019-10-08 05:16:01
【问题描述】：

我正在尝试在 Service Worker 中缓存静态资产。但是当我编辑一些静态文件并关闭选项卡并再次打开它时，我看不到任何更改。

我的缓存没有更新。如果我在 chrome 网络工具中清除站点数据并重新打开选项卡，我会看到新的更改。

请看下面我的代码。

self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open('static')
      .then(function(cache) {
        cache.addAll([
            '/index.html',
            '/src/js/app.js',
            '/src/css/app.css'
        ]);
     })
  );
});

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

【问题讨论】：

标签： javascript caching service-worker progressive-web-apps

【解决方案1】：

使用谷歌浏览器尝试按Ctrl + Shift + I，点击应用程序，然后点击服务工作者。在此选项卡中，您可以取消注册您想要的任何工人。

【讨论】：

其他选项是按Ctrl + Shift + R 重新加载没有缓存的标签

【解决方案2】：

您应该使用缓存版本控制。

var STATIC_CACHE_VERSION = '1';

每次更改STATIC_CACHE_VERSION 变量时，下面的函数都会刷新缓存。

self.addEventListener('activate', function(event) {
  event.waitUntil(
    caches.keys()
      .then(function(keyList) {
        return Promise.all(keyList.map(function(key) {
          if (key !== 'static-' + STATIC_CACHE_VERSION) {
            return caches.delete(key);
          }
        }));
      })
  );
  return self.clients.claim();
});

【讨论】：