javascript - ServiceWorker 不更新缓存

Question

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

我在 v0.0.1 缓存中缓存了 index.html，如果缓存版本更改为 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

这里有两个问题。

首先，在我的 ServiceWorker 的 fetch 事件中，我检查了 whole 缓存是否包含我正在获取的文件，而不是当前的文件缓存版本。

所以我将我的 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，您需要关闭选项卡并打开一个新选项卡。