当我更新服务工作线程时,关闭和重新打开页面后,控制台会记录新的服务工作线程已被安装和激活,并且旧缓存已被删除。然而,需要添加到缓存中的文件并没有从服务器重新获取,它们是几个小时前的过期版本。除了在Chrome开发者工具中清除存储之外,没有办法使其更新文件。
如何在安装新版本时使我的服务线程填充其缓存中的最新文件?
例如,"stylesheet.css" 在服务工作者更新时仍然是旧版本:
let cacheName = "abc_web_v1_15";
self.addEventListener('install', (event) => {
console.log('[Service Worker] Install');
event.waitUntil(
caches.open(cacheName).then(function (cache) {
return cache.addAll([
"/".
"/stylesheet.css",
...
]);
})
);
});
self.addEventListener('fetch', (e) => {
e.respondWith(
caches.match(e.request).then(function (r) {
console.log('[Service Worker] Fetching resource: ' + cacheName + ' ' + e.request.url);
if (r) {
console.log(cacheName + ' returning cached ' + e.request);
return r;
} else {
console.log(cacheName + ' returning fetched ' + e.request);
return fetch(e.request);
}
})
)
});
self.addEventListener('activate', (e) => {
console.log('[Service Worker] Activate');
e.waitUntil(
caches.keys().then((keyList) => {
return Promise.all(keyList.map((key) => {
if (cacheName.indexOf(key) === -1) {
console.log(`[Service Worker] Removing Cached Files from Cach-${key}`);
return caches.delete(key);
}
}));
})
);
});