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

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

问题是，当我更改 JS 时，更改不会直接显示在客户端浏览器上。当然，在 chrome dev-tools 中，我可以禁用缓存。但是在 Chrome 手机里，我该怎么做呢？

我尝试访问站点设置并按 CLEAR% RESET 按钮。 但是它仍然从缓存加载旧的页面/加载。 我试图使用其他浏览器或铬隐藏和它加载新的页面。

然后，我尝试清除我的浏览数据(只是缓存) ，它的工作。

我想这不应该是这样的，对吗？如果不清除 chrome 浏览器缓存，我的用户就不会知道页面是否被更新。

116138 次浏览
小开
最佳答案

使用这个命令删除过时的缓存:

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

如果你知道高速缓存的名字，你可以简单地调用 caches.delete()从任何你喜欢的地方在 worker:

caches.delete(/*name*/);

如果你想擦除所有的缓存(而不是等待它们，假设这是一个后台任务) ，你只需要 加上这个:

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

通常您更新服务工作者 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()
})
})
小开

这是唯一对我有用的代码。 这是我改编的 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
});
小开

最优雅的解决方案是使用异步/等待:

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

提交答案