清理緩存后如何恢復 Blazor WASM“離線緩存”？

Question

賞金將在 3 小時后到期。 此問題的答案有資格獲得+100聲望賞金。 尤金正在尋找一個規范的答案。

基本上我有一個升級流程，在 localStorage 和 IndexedDB 清理之間我還執行緩存清理：

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

然后我執行Navigation.NavigateTo(Navigation.Uri, forceLoad: true); 強制重新加載網站。

重新加載后，我遇到了這種情況，通常的blazor-resources-/如果自動填充所有資源，同時offline-cache-<random>仍然為空。

有沒有辦法再次調用那些再次緩存這些資源的步驟？

Answer 1

要恢復離線 WASM 緩存，請使用不同的策略。 我會推薦一個不同的策略並強制緩存重新加載，使用 CACHE_VERSION &。

第一步：新建一個js文件

第二步：在navigator.serviceWorker object中注冊。

例如yourCustomCacheTriggerReloader.js文件應該有一個變量

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

第 3 步：當您刪除時，在您的腳本/或手動中，請更新CACHE_VERSION值。 這將告訴/強制瀏覽器/客戶端reload最新文件。

---

這里的例子：

// 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};