无法完全删除PWA缓存

Question

我正在开发 PWA，我想在每次更新 Service Worker 时完全清除缓存。我尝试了多种策略，但每次删除缓存时，我都可以看到新缓存中的项目的时间戳早于其创建时间。

例如，如果我在

14:00:00

创建一个新的缓存，我可以看到带有以下内容的项目：

14:00:02

时间戳，但也可以查看带有以下内容的项目：

08:15:26

时间戳，这比我创建缓存的时间早得多。

我在SO上多次发现同样的问题，但没有答案，所以我再次发布。也许它会引起某人的注意。

策略#1：按名称删除整个缓存，然后重新缓存

self.addEventListener("install", (e) => {
    e.waitUntil(caches.delete("appCache").then(() => {
        caches.open("appCache").then((cache) => {
            cache.addAll(stuffToCache);
        });
    }));
});

策略#2：通过键删除缓存的项目，然后重新缓存

self.addEventListener("install", (e) => {
    e.waitUntil(caches.open("appCache").then((cache) => {
        cache.keys().then((keys) => {
            keys.forEach((request) => {
                cache.delete(request);
            });
        }).finally(() => {
            cache.addAll(stuffToCache);
        });
    }));
});

策略#3：使用版本化缓存

const date = new Date().toISOString();

self.addEventListener("install", (e) => {   
    e.waitUntil(caches.open(`appCache-${date}`).then((cache) => {
        cache.addAll(stuffToCache);
    }));
});

self.addEventListener("activate", (e) => {
    e.waitUntil(caches.keys().then((keys) => {
        keys.forEach((key) => {
            if (key !== `appCache-${date}`) {
                caches.delete(key);
            }
        });
    }));
});

对于所有 3 种策略，我使用网络优先动态缓存。 （

<CACHE NAME>

是

appCache

或

appCache-${version.date}

，具体取决于策略。）

self.addEventListener("fetch", (e) => {
    e.respondWith(caches.open(<CACHE NAME>).then((cache) => {
        return fetch(e.request).then((response) => {
            cache.put(e.request, response.clone());
            return response;
        });
    }));
});

我到底做错了什么？

Answer 1

您可以检查一下这个方法是否适合您吗？它对我有用。它使用版本。过滤掉旧的缓存键，然后删除它们。

// cleanup old caches except precache
    self.addEventListener('activate', event => {
       event.waitUntil(
       caches.keys().then(cacheKeys => {
        const oldKeys = cacheKeys.filter(key =>
                         key.indexOf(<CACHE_NAME>) === -1 && key.indexOf(version) === -1,
                        );
        const deletePromises = oldKeys.map(oldKey => caches.delete(oldKey));
        return Promise.all(deletePromises);
       }),
     );
    });