部署时，服务工作进程文件不会在浏览器上更新

Question

我有Vanilla Js应用程序，它部署在github上，带有Heroku(后端(。该应用程序已经部署，我刚刚更新了一些 CSS。并且该应用程序在开发模式和生产模式下都在本地更新。但是在 github 链接上，没有显示更新。服务工作进程文件未更新。chacheName 是旧的 (v7(，而不是更新的 (v10(，当我签入源/google inpect 时。我已经厌倦了取消注册和更新软件，并在清除存储/应用程序/谷歌检查中清除了所有站点日期。但它仍然不起作用。我不知道是什么导致了这个问题。 谢谢！

服务工作者.js

const cacheName = 'v10';
const cacheFiles = [
'/',
'/resources/css/style.css',
'/resources/css/queries.css',
'/resources/js/app.js',
'https://fonts.googleapis.com/css?family=Quicksand:300,400',
'/resources/assets/img/background.jpeg',
'/resources/assets/img/flightnook.jpeg',
'/resources/assets/img/omnifood.jpeg',
'/resources/assets/img/weather.jpeg',
'/resources/assets/img/workflow.jpeg',
'/resources/assets/svg/icon/nav-close.svg',
'/resources/assets/svg/icon/nav-open.svg',
'/resources/assets/svg/icon/svg-symbol.svg',
'/resources/assets/svg/logo/css3.svg',
'/resources/assets/svg/logo/nodejs.svg',
'/resources/assets/svg/logo/svg-logo.svg',
'/vendors/css/normalize.css',
'/vendors/js/cache-polyfill.js',
];
if( 'function' === typeof importScripts) {
importScripts('/vendors/js/serviceworker-cache-polyfill.js');
}
self.addEventListener('install', (e) => {
console.log('[Service Worker] Installed');
e.waitUntil(
caches.open(cacheName)
.then(cache => {
console.log('[Service Worker] Caching cacheFiles');
return cache.addAll(cacheFiles);
})
.catch(err => console.error(`[Service Worker] Caching cacheFiles: ${err}`))
);
});
self.addEventListener('activate', (e) => {
console.log('[Service Worker] Activated');
e.waitUntil(
caches.keys().then(cacheNames => {
return Promise.all(
cacheNames.map(thisCacheName => {
if (thisCacheName !== cacheName) {
console.log(`[Service Worker] Removing Cached Files from Cach-${thisCacheName}`);
}
return caches.delete(thisCacheName);
})
);
})
);
});
self.addEventListener('fetch', (e) => {
console.log(`[Service Worker] Fetching ${e.request.url}`);
e.respondWith(
caches.match(e.request)
.then(response => {
if (response) {
console.log(`[Service Worker] Found in cache ${e.request.url}${response}`);
return response;
}
const requestClone = e.request.clone();
return fetch(requestClone)
.then(response => {
if (!response) {
console.log('[ServiceWorker] No response from fetch ');
return response;
}
const responseClone = response.clone();
caches.open(cacheName)
.then(cache => {
cache.put(e.request, responseClone);
console.log('[ServiceWorker] New Data Cached', e.request.url);
return response;
});
})
.catch(err => console.log('[ServiceWorker] Error Fetching & Caching New Data', err));
})
);
});

Answer 1

为了回答我的问题，我更改了两部分。 将 cacheName 值更改为数组而不是字符串，并修改了 map 方法中的条件以检查现有版本是否包含在 cacheName 数组中。如果为假，请将其删除。

const cacheName = ['jiah-static-v2'];
self.addEventListener('activate', (e) => {
console.log('[Service Worker] Activated');
e.waitUntil(
caches.keys().then(cacheNames => {
return Promise.all(
cacheNames.map(thisCacheName => {
if (!cacheName.includes(thisCacheName)) {
console.log(`[Service Worker] Removing Cached Files from Cach-${thisCacheName}`);
return caches.delete(thisCacheName);
}
})
);
})
);
});