我有一个带有Service Worker 的HTML页面，它会缓存我的index.html和JS文件。
问题是当我更改JS文件时，更改不会直接在客户端浏览器中显示。当然，在Chrome开发工具中，我可以禁用缓存。但在Chrome移动版中，我该怎么做呢？
我尝试访问站点设置并点击CLEAR＆RESET按钮。但它仍会加载旧页面/从缓存中加载。我尝试使用其他浏览器或Chrome的隐身模式，它会加载新页面。
然后，我尝试清除浏览数据（仅缓存），这时它就有效了。
我想这应该不是正确的操作方式吧？如果不清除Chrome浏览器缓存，用户将无法得知页面是否已更新。
如果您知道缓存名称，可以在工作者中的任何位置简单调用caches.delete()：
caches.delete(/*name*/);
如果你想要清除所有缓存（而且不想等待它们，比如说这是一个后台任务），你只需要添加此内容：
caches.keys().then(function(names) {
for (let name of names)
caches.delete(name);
});
caches.keys().then(cs=>cs.forEach(c=>caches.delete(c)))，对于异步函数可以使用(await caches.keys()).forEach(c=>caches.delete(c))。 - Pat Mächlercaches 是否存在。如果你想在 Service Worker 之外清除缓存，请添加类似于 if (!window.caches) return; 的代码。另外要注意，在 HTTP 环境下（如 Chrome）可能不存在 caches 对象。 - Nux使用此功能删除过期缓存：
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);
})
);
})
);
});
通常您需要在服务工作者的JS文件中更新CACHE_NAME，以便您的工作者被重新安装：
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()
})
})
使用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);
}
})
})()
)
})
这是唯一对我有效的代码。这是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
});
cacheNameToKeep ?? [cacheName] ?? 这两个是同一个东西吗？self.clients.claim() 是什么作用？ - zipzitself.clients.claim()。 - Emeka Augustine我曾经感到非常绝望，直到我决定直接在开发工具中更改代码。
这可能不会清除缓存并替换文件，但至少它可以让你调试代码，直到找到完美的方法为止。
另一个需要注意的是，完全关闭浏览器并重新打开页面可能有所帮助，但这仍然是一种不好的调试实践！