Очистить кэш Workbox всего содержимого

Question

Использование Workbox в сервисном работнике в веб-приложении на JavaScript. Хотите очистить весь кэш рабочего стола / приложения от всего содержимого ... в основном возвращайтесь в состояние, максимально похожее на состояние перед первой загрузкой приложения в браузер, за которым может последовать обновление через window.location.href = '/'.

Погуглив и посмотрев на SO, я нашел разные рецепты для очистки разных вещей из кэша. Мне не удалось найти простой способ «очистить все и начать все сначала».

Я пробовал это в коде сервера в 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);
  });
});