时间戳

首页 > 解决方案 > ServiceWorker 不更新缓存

javascript - ServiceWorker 不更新缓存

问题描述

我正在尝试安装一个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文件没有改变。它始终显示第一个版本。

我究竟做错了什么？

标签： javascriptcachingservice-worker

解决方案

这里有两个问题。

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

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

推荐阅读