乐闻世界logo
搜索文章和话题

如何清除 Service Worker 的缓存?

3 个月前提问
21 天前修改
浏览次数229

6个答案

1
2
3
4
5
6

清除Service Worker的缓存通常涉及以下几个步骤:

  1. 注销Service Worker

    • 打开浏览器的开发者工具。
    • 转到“Application”面板。
    • 在左侧边栏中找到“Service Workers”。
    • 点击“Unregister”以注销当前域名下的Service Worker。
  2. 清除缓存

    • 在相同的“Application”面板中,找到“Cache Storage”。
    • 展开“Cache Storage”部分,列出所有的缓存。
    • 右键点击需要删除的缓存,选择“Delete”来清除缓存。
  3. 使用代码清除缓存: 可以在Service Worker的脚本中编写代码来清除缓存。例如:

    javascript
    self.addEventListener('activate', event => { event.waitUntil( caches.keys().then(cacheNames => { return Promise.all( cacheNames.map(cacheName => { // 假设'v1'是你想要保留的缓存的版本 if (cacheName !== 'v1') { console.log('Service Worker: 清除旧缓存', cacheName); return caches.delete(cacheName); } }) ); }) ); });

    上述代码会在Service Worker激活时运行,它会遍历所有的缓存,并删除那些版本不是'v1'的缓存。

除了这些步骤,重要的是确保在更新Service Worker脚本后,让用户的浏览器获取到最新的Service Worker文件。通常,这可以通过更改Service Worker文件的内容来实现,因为浏览器会检查文件内容是否有变化来决定是否需要安装新的Service Worker。

例如,如果我刚完成一个项目,需要更新Service Worker以及对应的缓存,我会更新Service Worker脚本,可能是修改内部的缓存策略或者版本标签,然后将修改后的脚本部署到服务器。这样用户下次访问时,浏览器会检测到Service Worker脚本的内容更新,触发安装新的Service Worker,并在activate事件中清除旧的缓存。

总的来说,清除Service Worker的缓存需要综合运用开发者工具和编写Service Worker代码的方式来实现。这对于保持应用的性能和确保用户获得最新内容非常重要。

2024年6月29日 12:07 回复

If you know the cache name you can simply call caches.delete() from anywhere you like in the worker:

shell
caches.delete(/*name*/);

And if you wanted to wipe all caches (and not wait for them, say this is a background task) you only need to add this:

shell
caches.keys().then(function(names) { for (let name of names) caches.delete(name); });
2024年6月29日 12:07 回复

Use this to delete outdated caches:

shell
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); }) ); }) ); });
2024年6月29日 12:07 回复

Typically you update the CACHE_NAME in your service workers JS file so your worker installs again:

shell
self.addEventListener('install', evt => { evt.waitUntil( caches.open(CACHE_NAME).then(cache => cache.addAll(inputs)) ) })

Alternatively, to clear the cache for a PWA find the cache name:

shell
self.caches.keys().then(keys => { keys.forEach(key => console.log(key)) })

then run the following to delete it:

shell
self.caches.delete('my-site-cache')

Then refresh the page.

If you see any worker-related errors in the console after refreshing, you may also need to unregister the registered workers:

shell
navigator.serviceWorker.getRegistrations() .then(registrations => { registrations.forEach(registration => { registration.unregister() }) })
2024年6月29日 12:07 回复

The most elegant solution, with async/await:

shell
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); } }) })() ) })
2024年6月29日 12:07 回复

This is the only code that worked for me. It is my adaptation of Mozilla documentation :

shell
//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 });
2024年6月29日 12:07 回复

你的答案