如何清除服务人员的缓存？ [英] How to clear cache of service worker?

问题描述

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

问题是什么时候我改变了JS，这个改变并没有直接显示在客户端浏览器上。当然，在Chrome开发工具中，我可以禁用缓存。但是在Chrome手机中，我该怎么做？

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

然后，我尝试清除浏览数据（仅缓存），然后作品。

我想这不是应该如何工作的？我的用户不会知道页面是否更新，而无需清除Chrome浏览器缓存。

解决方案

使用此命令可删除过期的缓存：

  self.addEventListener（'activate'，function（event）{
 event.waitUntil（
 caches.keys（）。then（function（cacheNames）{
 return Promise .all（
 cacheNames.filter（function（cacheName））{
 //如果你想移除这个缓存，则返回true 
 //但是记住缓存在
 / /全部原点
））。map（function（cacheName）{
 return caches.delete（cacheName）; 
}）
）; 
}）
）; 
}）; 
  

So, I have an HTML page with service worker, the service worker cache the index.html and my JS files.

The problem is when I change the JS, the change doesn't show up directly on the client browser. Of course in chrome dev-tools, I can disable cache. But in chrome mobile, how do I do that?

I tried to access the site settings and hit the CLEAR % RESET button. But it still loads the old page/load from cache. I tried to use other browser or chrome incognito and it loads the new page.

Then, I try to clear my browsing data (just cache) and it works.

I guess that's not how it should work right? my user won't know if the page is updated without clearing the chrome browser cache.

解决方案

Use this to delete outdated caches:

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

这篇关于如何清除服务人员的缓存？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！