清除所有内容的 Workbox 缓存

Question

在 javascript webapp 的 service worker 中使用 Workbox。想要清除所有内容的整个 workbox/application 缓存...基本上回到与第一次将应用程序加载到浏览器之前的状态尽可能相似的状态，可能随后通过 [=30 刷新=] = '/'.

谷歌搜索和查看 SO，我找到了各种从缓存中清除各种内容的方法。我还没有想出一个简单的方法来 'clear everything and start over'.

我在 sw.js 的服务器代码中试过这个：

var logit = true;
if (logit) console.log('Service Worker Starting Up for Caching... Hello from sw.js');
importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.6.1/workbox-sw.js');

if (workbox) {
    if (logit) console.log(`Yay! Workbox is loaded `);
} else {
    if (logit) console.log(`Boo! Workbox didn't load `);
}

workbox.routing.registerRoute(
    // Cache image files
    /.*\.(?:mp3|flac|png|gif|jpg|jpeg|svg|mp4)/,
    // Use the cache if it's available
    workbox.strategies.cacheFirst({
        // Use a custom cache name
        cacheName: 'asset-cache',
        plugins: [
            new workbox.expiration.Plugin({
                // Cache only 20 images
                maxEntries: 20,
                // Cache for a maximum of x days
                maxAgeSeconds: 3 * 24 * 60 * 60,
            })
        ],
    })
);


self.addEventListener('message', function(event){
    msg = event.data;
    console.log("SW Received Message: " + msg);
        if (msg==='clearCache') {
            console.log('Clearing Workbox Cache.');
            WorkBoxCache = new workbox.expiration.Plugin;
            WorkBoxCache.expirationPlugin.deleteCacheAndMetadata();
            //WorkBoxCacheServer.clear();
    }
});

在客户端与此配对：

navigator.serviceWorker.controller.postMessage("clearCache");

这没有用，尽管消息显然已通过。此外，这似乎是一个不优雅的解决方案，我认为有一个更简单的解决方案。

如何做到这一点？

如何在浏览器客户端js中从客户端发起？这在服务器端代码中有什么要求（例如 sw.js）。

谢谢

Answer 1

CacheStorage 可在客户端代码（您注册软件的位置）中访问，因此您可以从那里删除它。

caches.keys().then(cacheNames => {
  cacheNames.forEach(cacheName => {
    caches.delete(cacheName);
  });
});

Answer 2

如果我们只删除缓存那么它会损坏 service worker，service worker 将无法正常工作，所以我们必须注销 service worker 然后必须删除缓存然后 重新注册 服务工人。

refreshCacheAndReload = () => {
        if ('serviceWorker' in navigator) {
          serviceWorkerRegistration.unregister();
          caches.keys().then(cacheNames => {
            cacheNames.forEach(cacheName => {
              caches.delete(cacheName);
            });
          }).then(() => {
            serviceWorkerRegistration.register();
          })
        }
        setTimeout(function () { window.location.replace(""); }, 300)
    }

清除所有内容的 Workbox 缓存

Clear Workbox cache of all content

javascript

workbox