清理缓存后如何恢复 Blazor WASM“离线缓存”？

Posted 2023-04-12

【中文标题】清理缓存后如何恢复 Blazor WASM“离线缓存”？

【英文标题】：How to reinstate the Blazor WASM "offline-cache" after a cleanup of the caches?

【发布时间】：2021-12-28 19:36:01

【问题描述】：

基本上我有一个升级流程，在 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> 仍然是空的。

有没有办法再次调用那些再次缓存这些资源的步骤？

【问题讨论】：

通常这将是 Service Worker 中安装处理程序的一部分 - 通常，您更新 Service Worker，并控制清除和重建它的缓存。在该流程之外，您需要读入/构建离线资产列表并将它们添加到缓存中，就像服务工作者一样。

@MisterMagoo 有没有关于如何实现它的具体和完整的例子？我还从我打开的github 问题中发现，不幸的是，不会进行此类重新加载：/

你有复制这个的示例项目吗？为您的解决方案提供补丁更容易

@Mason.Chase 不，但这与开始一个新项目并添加clearCache 函数以调用如下所示然后强制重新加载页面js window.clearCache = async () => const cachesNames = await caches.keys() for (let i = 0; i < cachesNames.length; i++) await caches.delete(cachesNames[i])

您是否有理由不使服务人员无效并遵循“正常”更新流程？

【参考方案1】：

要恢复离线 WASM 缓存，请采用不同的策略。我会推荐一种不同的策略，并使用 CACHE_VERSION & 强制重新加载缓存。

第 1 步：创建一个新的js 文件

第二步：在navigator.serviceWorker对象中注册。

例如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 最新文件。

---

来自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;

【讨论】：

只是一个代码错误：`$cacheNamePrefix$self.assetsManifest.version`

感谢@Eugene 会做出改变 gr8 问题，欢迎来到 Stack Overflow :) 顺便说一句，请随时编辑答案，你会因此得到赞誉......他们都加起来 非常慢慢地