如何清除服务工作者的缓存？

Question

所以，我有一个带有服务工作者的 HTML 页面，服务工作者缓存 index.html 和我的 JS 文件。

问题是当我更改 JS 时，更改不会直接显示在客户端浏览器上。当然，在 chrome dev-tools 中，我可以禁用缓存。但是在 chrome mobile 中，我该怎么做呢？

我试图访问站点设置并点击 CLEAR % RESET 按钮。但它仍然从缓存加载旧页面/加载。我尝试使用其他浏览器或 chrome incognito 并加载新页面。

然后，我尝试清除我的浏览数据（只是缓存）并且它有效。

我想这不是它应该如何工作的方式吗？如果不清除 chrome 浏览器缓存，我的用户不会知道页面是否已更新。

原文由 taek 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使用它来删除过时的缓存：

 self.addEventListener('activate', function(event) {
  event.waitUntil(
    caches.keys().then(function(cacheNames) {
      return Promise.all(
        cacheNames.filter(function(cacheName) {
          // Return true if you want to remove this cache,
          // but remember that caches are shared across
          // the whole origin
        }).map(function(cacheName) {
          return caches.delete(cacheName);
        })
      );
    })
  );
});

原文由 elf 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

最优雅的解决方案，使用 async/await：

 const cacheName = 'v2';

self.addEventListener('activate', event => {
// Remove old caches
  event.waitUntil(
    (async () => {
      const keys = await caches.keys();
      return keys.map(async (cache) => {
        if(cache !== cacheName) {
          console.log('Service Worker: Removing old cache: '+cache);
          return await caches.delete(cache);
        }
      })
    })()
  )
})

原文由 Esteban Ortega 发布，翻译遵循 CC BY-SA 4.0 许可协议