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

Question

因此，我有一个带有服务工作者的HTML页面，服务工作者缓存索引。html和我的JS文件。

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

我试图访问站点设置并点击CLEAR%RESET按钮。但它仍然从缓存加载旧页面/加载。我试图使用其他浏览器或铬隐姓埋名，它加载新的页面。

然后，我尝试清除我的浏览数据（只是缓存），它的工作原理。

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

Answer 1

通常，您会更新Service Worker JS文件中的CACHE_NAME，以便再次安装Worker：

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

然后刷新页面。

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

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

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

如果知道缓存名称，只需调用caches即可。从worker中您喜欢的任何位置删除（）：

caches.delete(/*name*/);

如果您想擦除所有缓存（而不是等待它们，假设这是一项后台任务），则只需添加以下内容：

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