保留预缓存，同时删除工作箱服务工作者中的其他缓存答案

【问题标题】：Keep the precache while deleting other cache in workbox service worker保留预缓存，同时删除工作箱服务工作者中的其他缓存
【发布时间】：2020-02-03 09:05:58
【问题描述】：

我正在使用下面的代码来清除工作箱创建的缓存，但它也会删除由它自己管理的工作箱的预缓存。

如果有更好的方法，请告诉我。

// Clean up caches in activate event to ensure no pages are using the old caches.
self.addEventListener('activate', (event) => {
    const promiseChain = caches.keys()
        .then((cacheNames) => {
            // Step through each cache name and delete it 
            return Promise.all(
                cacheNames.map((cacheName) => caches.delete(cacheName))
            );
        });

    // Keep the service worker alive until all caches are deleted.
    event.waitUntil(promiseChain);
});

【问题讨论】：

通过临时删除 "map" 对单个 cacheName 调用 delete。看看结果是什么
感谢@RobertRowntree 的宝贵时间，我不擅长服务工作者编程，如果您有更多时间，请在答案中写代码。
查看这个答案：stackoverflow.com/questions/45467842/… 然后看看你是否可以使用地图来做一个你的缓存的枚举列表而不删除。一旦您有了缓存名称列表，您就可以更改代码以过滤名称，仅从列表中删除 1 个缓存。

标签： service-worker progressive-web-apps workbox

【解决方案1】：

以下代码可以很好地删除其他缓存，同时将预缓存保留在 Workbox Service Worker 中。

// Clear old caches
var clearOldCaches = function (event)
{
    event.waitUntil(
        caches.keys().then(function (cacheNames) {
            let validCacheSet = new Set(Object.values(workbox.core.cacheNames));
            return Promise.all(
                cacheNames
                .filter(function (cacheName) {
                    return !validCacheSet.has(cacheName);
                })
                .map(function (cacheName) {
                    return caches.delete(cacheName);
                })
            );
        })
    );
};

self.addEventListener("activate", function (event) {
    clearOldCaches(event);
});

【讨论】：