How to reinstate the Blazor WASM "offline-cache" after a cleanup of the caches?

Question

Basically I have an upgrade flow where between localStorage and IndexedDB cleanups I perform also a caches cleanup:

window.clearCache = async () => {
    const cachesNames = await caches.keys()
    for (let i = 0; i < cachesNames.length; i++)
        await caches.delete(cachesNames[i])
}

and after this I perform a Navigation.NavigateTo(Navigation.Uri, forceLoad: true); to force reload the website.

After this reload I have this situation where the usual blazor-resources-/ if filled back automatically with all the resources meanwhile the offline-cache-<random> is still empty.

Is there a way to call again those steps that do cache those resources again?

Answer 1

To reinstate the offline WASM cache, please different strategy. I would recommend a different strategy and force a cache reload, using the CACHE_VERSION & .

Step 1: Create a new js file

Step 2: register it in navigator.serviceWorker object.

For e.g. yourCustomCacheTriggerReloader.js file should have a variable like

 // use this variable to update and trigger your forced upload
 // to the client after you delete you files.
 `const CACHE_VERSION = 1.0`. 

Step 3: when you delete, in your script/or manually, please update CACHE_VERSION value. That will tell/force the browser/client to reload the latest files.

---

Example from here:

// In service-worker.published.js
const CACHE_VERSION = '2021.05.22.001'  // Increment each time before deployment.
const cacheNamePrefix = 'offline-cache-';
const cacheName = `${cacheNamePrefix}${CACHE_VERSION}`;

---

//Note: The original one does not work. Replace 
//self.assetsManifest.version withCACHE_VERSION
const cacheName = ${cacheNamePrefix}${self.assetsManifest.version};