Blazor WASM 发布后应用出现异常（疑似缓存导致）问题咨询

异常诱因 #

• 核心原因是Blazor WASM Service Worker 缓存与新版本资源的冲突：默认开启PWA功能的Blazor WASM项目会通过service worker缓存所有静态资源（包括wasm文件、dll文件、blazor.boot.json等），发布新版本后，用户浏览器本地仍运行着旧版service worker，会优先返回旧缓存资源。
• 完整性校验失败报错：新版本资源的哈希值与旧缓存中存储的完整性校验值不匹配，直接触发「尝试验证完整性时发生未知错误」的提示。
• Service Worker fetch报错：旧版service worker请求已被后端替换/删除的旧版本资源时，无法获取对应资源，就会抛出service-worker.js中的Failed to fetch异常。
• WebAssemblyRenderer报错：是上层封装的渲染异常，本质是前面资源加载失败、完整性校验未通过导致Blazor初始化中断抛出的衍生错误。
• 不同浏览器表现差异的原因：Chrome对service worker缓存的优先级设置高于普通静态资源缓存，因此问题出现概率更高；Firefox的Ctrl+F5强制刷新会直接跳过service worker拉取最新资源，因此一次强制刷新即可恢复正常；无痕模式无持久化缓存与service worker存储，每次打开都会拉取最新资源，因此不会出现异常。

对应解决方案 #

临时修复方案（面向终端用户） #

• Chrome用户可按F12打开开发者工具，切换到「Application」标签页，点击「Storage」分类下的「Clear site data」，勾选所有缓存、service worker、本地存储项后确认清除即可。
• 可在前端新增一键清缓存按钮，触发以下代码执行后自动重载页面，无需用户手动操作开发者工具：

// 注销所有已注册的service worker后重载页面
navigator.serviceWorker.getRegistrations()
  .then(registrations => Promise.all(registrations.map(r => r.unregister())))
  .then(() => window.location.reload(true))

永久修复方案（发布前配置） #

• 每次发布自动更新service worker缓存版本：找到项目中的service-worker.published.js文件，修改顶部的缓存版本号变量，每次发布前自动更新该版本号，确保新版service worker安装后直接淘汰所有旧缓存资源。
• 调整静态资源缓存策略：在后端配置响应头，对service-worker.js、blazor.boot.json、*.wasm、*.dll等核心资源设置Cache-Control: no-cache，禁止给这类资源设置长期缓存，确保浏览器每次都会校验资源是否有更新。
• 发布后短时间内保留旧版本资源：发布新版本后至少保留24小时的旧版本资源，避免发布过程中打开页面的用户的旧service worker请求旧资源失败，等所有用户的service worker完成静默更新后再删除旧资源即可。
• 无需PWA功能可直接禁用service worker：如果项目不需要离线访问等PWA特性，直接删除index.html中对service-worker.js的引用，或者在项目配置中关闭PWA选项，彻底规避service worker缓存带来的各类问题。

内容的提问来源于stack exchange，提问作者SymXGeo