Chrome 如何清除Service Worker的缓存?

oiopk7p5  于 2023-04-03  发布在  Go
关注(0)|答案(6)|浏览(634)

因此,我有一个带有service worker的HTML页面,service worker缓存index.html和我的JS文件。
问题是当我修改JS的时候,修改并不会直接显示在客户端浏览器上。当然在chrome dev-tools中,我可以禁用缓存。但是在chrome移动的中,我该怎么做呢?
我试着访问网站设置,并点击清除%重置按钮。但它仍然加载旧页面/从缓存加载。我试着使用其他浏览器或chrome incognito,它加载新页面。
然后,我尝试清除我的浏览数据(只是缓存),它的工作原理。
我想这不是它应该如何工作的权利?我的用户不会知道,如果页面更新没有清除 chrome 浏览器缓存。

u5i3ibmn

u5i3ibmn1#

如果你知道该高速缓存名字,你可以简单地从worker中的任何地方调用caches.delete()

caches.delete(/*name*/);

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

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

v8wbuo2f2#

使用此命令删除过期缓存:

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

pgvzfuti3#

通常情况下,您可以更新service workers 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()
    }) 
  })
gpfsuwkq

gpfsuwkq4#

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

4si2a6ki5#

这是唯一对我有用的代码。它是我对Mozilla文档的改编:

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

bxjv4tth6#

我是如此的分散,直到我决定直接改变devtools中的代码。
这可能不会清除该高速缓存并替换文件,但至少可以让您调试代码,直到找到最佳方法。
另一个注意事项是,完全关闭浏览器并重新打开页面可能会有所帮助,但这仍然是一个不好的调试实践!

相关问题