如何使用 url 删除 service worker 缓存
How to delete service worker caches using urls
我有这个 Service Worker 文件 (sw.js
),它是我从互联网上获得的:
const PRECACHE = 'precache-v1.1';
const RUNTIME = 'runtime';
// A list of local resources we always want to be cached.
const PRECACHE_URLS = [
/* index page */
'index.html', './',
/* stylesheets */
'./assets/css/bootstrap.min.css', './assets/css/style.css',
/* javascripts */
'./assets/js/scripts.js',
/* images */
'./assets/images/logo.png'
];
// The install handler takes care of precaching the resources we always need.
self.addEventListener('install', event => {
event.waitUntil(
caches.open(PRECACHE)
.then(cache => cache.addAll(PRECACHE_URLS))
.then(self.skipWaiting())
);
});
// The activate handler takes care of cleaning up old caches.
self.addEventListener('activate', event => {
const currentCaches = [PRECACHE, RUNTIME];
event.waitUntil(
caches.keys().then(cacheNames => {
return cacheNames.filter(cacheName => !currentCaches.includes(cacheName));
}).then(cachesToDelete => {
return Promise.all(cachesToDelete.map(cacheToDelete => {
return caches.delete(cacheToDelete);
}));
}).then(() => self.clients.claim())
);
});
// The fetch handler serves responses for same-origin resources from a cache.
// If no response is found, it populates the runtime cache with the response
// from the network before returning it to the page.
self.addEventListener('fetch', event => {
// Skip cross-origin requests, like those for Google Analytics.
if (event.request.url.startsWith(self.location.origin)) {
event.respondWith(
caches.match(event.request).then(cachedResponse => {
if (cachedResponse) {
return cachedResponse;
}
return caches.open(RUNTIME).then(cache => {
return fetch(event.request).then(response => {
// Put a copy of the response in the runtime cache.
return cache.put(event.request, response.clone()).then(() => {
return response;
});
});
});
})
);
}
});
在我网站的每个页面上,说 index.html
、about.html
、contact.html
,我有这个代码:
if('serviceWorker' in navigator) { navigator.serviceWorker.register('sw.js'); }
我在每个页面上都有这段代码的原因是因为我的网站上有很多页面,如果用户登陆我网站的任何页面,我希望浏览器缓存所有文件。
现在例如,当用户访问 about.html
时,service worker 会缓存 sw.js
中列出的所有文件,并且还会缓存当前页面,即使它未在 sw.js
中列出.这正是我想要的,因为我的网站上有数百个页面,我不想在 sw.js
文件中手动列出所有页面。问题是,当我更新 sw.js
中的版本号时,浏览器会删除 sw.js
中列出的所有旧缓存并再次重新缓存文件,about.html
除外。每当用户再次访问此页面时,将显示旧的 about.html
而所有其他文件都是新的。
我该如何解决这个问题?我想完全删除我网站缓存的所有文件,而不仅仅是 sw.js
中列出的文件,并且由于未列出 about.html
,因此该缓存页面不会更新。
问题是您的 about.html 文件保存在名为 runtime 的缓存中,该缓存未进行版本控制。所以这个缓存仍然是一样的,即使你部署了一个新的 sw.js 和一个递增的 PRECACHE-缓存。 (例如 precache-v1.2)
解决方案是将版本控制也添加到 运行时-缓存:
const PRECACHE = 'precache-v1.1';
const RUNTIME = 'runtime-v1.1';
或在激活时清理运行时缓存:
self.addEventListener('activate', event => {
// only PRECACHE (which is already the new version, setup on install event) should not be deleted.
const currentCaches = [PRECACHE];
...
我有这个 Service Worker 文件 (sw.js
),它是我从互联网上获得的:
const PRECACHE = 'precache-v1.1';
const RUNTIME = 'runtime';
// A list of local resources we always want to be cached.
const PRECACHE_URLS = [
/* index page */
'index.html', './',
/* stylesheets */
'./assets/css/bootstrap.min.css', './assets/css/style.css',
/* javascripts */
'./assets/js/scripts.js',
/* images */
'./assets/images/logo.png'
];
// The install handler takes care of precaching the resources we always need.
self.addEventListener('install', event => {
event.waitUntil(
caches.open(PRECACHE)
.then(cache => cache.addAll(PRECACHE_URLS))
.then(self.skipWaiting())
);
});
// The activate handler takes care of cleaning up old caches.
self.addEventListener('activate', event => {
const currentCaches = [PRECACHE, RUNTIME];
event.waitUntil(
caches.keys().then(cacheNames => {
return cacheNames.filter(cacheName => !currentCaches.includes(cacheName));
}).then(cachesToDelete => {
return Promise.all(cachesToDelete.map(cacheToDelete => {
return caches.delete(cacheToDelete);
}));
}).then(() => self.clients.claim())
);
});
// The fetch handler serves responses for same-origin resources from a cache.
// If no response is found, it populates the runtime cache with the response
// from the network before returning it to the page.
self.addEventListener('fetch', event => {
// Skip cross-origin requests, like those for Google Analytics.
if (event.request.url.startsWith(self.location.origin)) {
event.respondWith(
caches.match(event.request).then(cachedResponse => {
if (cachedResponse) {
return cachedResponse;
}
return caches.open(RUNTIME).then(cache => {
return fetch(event.request).then(response => {
// Put a copy of the response in the runtime cache.
return cache.put(event.request, response.clone()).then(() => {
return response;
});
});
});
})
);
}
});
在我网站的每个页面上,说 index.html
、about.html
、contact.html
,我有这个代码:
if('serviceWorker' in navigator) { navigator.serviceWorker.register('sw.js'); }
我在每个页面上都有这段代码的原因是因为我的网站上有很多页面,如果用户登陆我网站的任何页面,我希望浏览器缓存所有文件。
现在例如,当用户访问 about.html
时,service worker 会缓存 sw.js
中列出的所有文件,并且还会缓存当前页面,即使它未在 sw.js
中列出.这正是我想要的,因为我的网站上有数百个页面,我不想在 sw.js
文件中手动列出所有页面。问题是,当我更新 sw.js
中的版本号时,浏览器会删除 sw.js
中列出的所有旧缓存并再次重新缓存文件,about.html
除外。每当用户再次访问此页面时,将显示旧的 about.html
而所有其他文件都是新的。
我该如何解决这个问题?我想完全删除我网站缓存的所有文件,而不仅仅是 sw.js
中列出的文件,并且由于未列出 about.html
,因此该缓存页面不会更新。
问题是您的 about.html 文件保存在名为 runtime 的缓存中,该缓存未进行版本控制。所以这个缓存仍然是一样的,即使你部署了一个新的 sw.js 和一个递增的 PRECACHE-缓存。 (例如 precache-v1.2)
解决方案是将版本控制也添加到 运行时-缓存:
const PRECACHE = 'precache-v1.1';
const RUNTIME = 'runtime-v1.1';
或在激活时清理运行时缓存:
self.addEventListener('activate', event => {
// only PRECACHE (which is already the new version, setup on install event) should not be deleted.
const currentCaches = [PRECACHE];
...