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

我有一个服务人员的HTML页面， 服务工作者缓存index.html和my JS文件

问题是，当我更改JS时，更改不会直接显示在客户端浏览器上。当然，在chrome开发工具中，我可以禁用缓存。但在chrome mobile中，我该如何做到这一点

我尝试访问站点设置并点击清除%重置按钮。 但它仍然从缓存加载旧页/加载。 我尝试使用其他浏览器或chrome隐姓埋名，它会加载新页面

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

---

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

使用此选项删除过时的缓存：

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

---

如果您知道缓存名称，只需在worker中的任意位置调用即可：

缓存。删除（/*name*/）；

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

caches.keys（）.then（函数（名称）{
for（让名字的名字）
缓存。删除（名称）；
});

通常，您会更新service workers JS文件中的

缓存\u名称

，以便您的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()
    }) 
  })

---

这是唯一对我有效的代码。 这是我对以下内容的改编：

---

最优雅的解决方案，具有异步/等待功能：

const cacheName='v2'；
self.addEventListener（'activate'，event=>{
//删除旧的缓存
event.waitill(
（异步（）=>{
const keys=wait caches.keys（）；
返回key.map（异步（缓存）=>{
如果（缓存！==缓存名称）{
log（'Service Worker:删除旧缓存：'+缓存）；
返回等待缓存。删除（缓存）；
}
})
})()
)
})

这里什么是

self

？窗口对象还是serviceworker？在堆栈溢出问题上，最好添加一个解释，说明解决方案应该工作的原因。有关更多信息，请阅读。self表示serviceWorker实例。：）self是一个“SharedWorkerGlobalScope”对象。使用“this”而不是“self”可以做同样的事情。但是这两个关键词之间有区别。谢谢你。它简单得多，清晰得多。我只是很快地写了我的答案，不用担心。如果有人想删除

activate

侦听器中的一组特定缓存，那么您的缓存将是完美的；我这样做是为了防止有人只想转储一个/所有东西。最紧凑的代码可能是

caches.keys（）。然后（cs=>cs.forEach（c=>caches.delete（c））

或异步函数

（wait caches.keys（））.forEach（c=>caches.delete（c））

在我住的地方，你会被认为是个小胡子！（恭维）注意！您应该检查

缓存是否存在。如果要清除服务人员之外的缓存，请选中添加类似
If（！window.caches）return的内容。也不是说HTTP上可能不存在
caches
对象（例如在Chrome中）。
cacheNameToKeep
<代码>[cacheName]
？？这两件事是一样的吗？
self.clients.claim（）
做什么？非常感谢。我使用这种方式用自定义检查系统更新我的应用程序。我在本页中解释了：最后一个代码：“navigator.serviceWorker…”在删除superpwa wordpress插件后帮助我删除了与serviceWorker相关的所有缓存。谢谢你的代码块2和代码块3上面的描述性文字是否已交换？谢谢，大卫。在您的帮助下修复。此文件也可以缓存，对吗？service worker已安装在您的浏览器中。您的浏览器将每次请求您的远程工作者（如果联机），并更新其本地安装的版本以供脱机使用。您可以通过将文件打印到控制台来查看缓存了哪些文件，即cache.put（）之后的'fetch'事件中的console.log（'Caching:'，event.request.url）
//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
});