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

Question

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

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

我尝试访问网站设置并点击CLEAR%RESET按钮.但它仍然从缓存加载旧页面/加载.我尝试使用其他浏览器或Chrome隐身,它会加载新页面.

然后,我尝试清除我的浏览数据(只是缓存),它的工作原理.

我想这不是它应该如何正常工作？我的用户在不清除Chrome浏览器缓存的情况下不知道页面是否更新.

Answer 1

如果你知道缓存名称,你可以caches.delete()在工作人员的任何地方调用:

caches.delete(/*name*/);

如果你想擦除所有缓存(而不是等待它们,说这是后台任务)你只需要添加:

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

Answer 2

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

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

Answer 3

最优雅的解决方案，带有 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 4

通常，您CACHE_NAME在服务工作者JS文件中更新，以便您的工作者再次安装：

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')

按名称删除缓存键（即my-site-cache）。然后刷新页面。

如果刷新后在控制台中看到任何与工作人员相关的错误，则可能还需要注销注册的工作人员：

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