Question

我正在尝试安装ServiceWorker，以便每次更改当前使用的缓存版本时都会清除缓存。

我在index.html缓存中缓存了v0.0.1，如果缓存版本更改为v0.0.2或其他，它应该重新下载index.html。

我在ServiceWorker上加载：

if('serviceWorker' in navigator){
    navigator.serviceWorker
        .register('serviceWorker.js')
        .then(() => { 
            console.log('Service Worker Registered');
        });
}

这是

serviceWorker.js

const currentVersion = 'v0.0.1';

self.addEventListener('install', e => {
    e.waitUntil(
        caches.open(currentVersion).then(cache => cache.addAll([
            '',
            'index.html',
            'js/load.min.js',
            'lib/db.js/js/db.min.js'
        ]))
    );
});

self.addEventListener('fetch', e => {
    e.respondWith(
        caches.match(e.request).then(resp => {
            return resp || fetch(e.request).then(response => {
                return caches.open(currentVersion).then(cache => {
                    cache.put(e.request, response.clone());
                    return response;
                });  
            });
        })
    );
});

self.addEventListener('activate', e => {
    e.waitUntil(
        caches.keys().then(keyList => 
            Promise.all(keyList.map(key => key != currentVersion ? caches.delete(key) : Promise.resolve()))
        )
    );
});

但是我尝试编辑index.html并更新serviceWorker版本，但是index.html文件没有改变。它始终显示第一个版本。

我在做什么错了？

Answer 1

这里有两个问题。

首先，在我的fetch的{{1}}事件中，我检查了整个缓存是否包含我要提取的文件，而不是当前的缓存版本。

所以我为此编辑了ServiceWorker事件监听器：

fetch

最后一个问题是，只需重新加载页面（F5）并不会更改self.addEventListener('fetch', e => { e.respondWith( caches.open(currentVersion).then(cache => { return cache.match(e.request).then(resp => { // Request found in current cache, or fetch the file return resp || fetch(e.request).then(response => { // Cache the newly fetched file for next time cache.put(e.request, response.clone()); return response; // Fetch failed, user is offline }).catch(() => { // Look in the whole cache to load a fallback version of the file return caches.match(e.request).then(fallback => { return fallback; }); }); }); }) ); });。
为了激活新的ServiceWorker，您需要关闭该标签并打开一个新标签。

ServiceWorker不会更新缓存

1 个答案: