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

Question

所以，我有一个带有 service worker 的 HTML 页面， service worker 缓存 index.html 和我的 JS 文件。

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

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

然后，我尝试清除我的浏览数据（只是缓存）并且它起作用了。

我想这不应该是这样的吧？如果不清除 chrome 浏览器缓存，我的用户不会知道页面是否已更新。

Answer 1

最优雅的解决方案，使用 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);
        }
      })
    })()
  )
})

Answer 2

通常，您会在 Service Workers JS 文件中更新 CACHE_NAME，以便您的工作人员再次安装：

self.addEventListener('install', evt => {
  evt.waitUntil(
    caches.open(CACHE_NAME).then(cache => cache.addAll(inputs))
  )
})

或者，要清除 PWA 的缓存，请找到缓存名称：

self.caches.keys().then(keys => { keys.forEach(key => console.log(key)) })

然后运行以下命令将其删除：

self.caches.delete('my-site-cache')

然后刷新页面。

如果刷新后在控制台看到任何worker相关的错误，可能还需要注销已注册的worker：

navigator.serviceWorker.getRegistrations()
  .then(registrations => {
    registrations.forEach(registration => {
      registration.unregister()
    }) 
  })

Answer 3

这是唯一对我有用的代码。 这是我对Mozilla documentation的改编：

//Delete all caches and keep only one
const cachNameToKeep = 'myCache';

//Deletion should only occur at the activate event
self.addEventListener('activate', event => {
    var cacheKeeplist = [cacheName];
    event.waitUntil(
        caches.keys().then( keyList => {
            return Promise.all(keyList.map( key => {
                if (cacheKeeplist.indexOf(key) === -1) {
                    return caches.delete(key);
                }
            }));
        })
.then(self.clients.claim())); //this line is important in some contexts
});

Answer 4

如果您知道缓存名称，您可以简单地从 worker 中任何您喜欢的位置调用 caches.delete()：

caches.delete(/*name*/);

如果你想擦除所有缓存（而不是等待它们，假设这是一个后台任务）你只需要add this:

caches.keys().then(function(names) {
    for (let name of names)
        caches.delete(name);
});

Answer 5

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

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);
        })
      );
    })
  );
});