ServiceWorker不更新缓存

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事件中，我检查整个缓存是否包含我正在获取的文件，而不是当前的缓存版本。

因此，我编辑了我的fetch事件侦听器如下：

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

最后一个问题是简单地重新加载页面(F5)并没有改变ServiceWorker。

为了激活新的ServiceWorker，需要关闭选项卡并打开一个新的选项卡。