17370845950

Blazor项目启用PWA需配对核心文件、注册service worker并配置缓存策略：新建时勾选PWA选项，或手动添加manifest.json/service-worker.js；确保service-worker.js位于根路径且作用域正确；通过Workbox定制缓存资源与API请求策略；最后在Chrome DevTools中验证注册、缓存及离线加载效果。

Blazor 项目启用 PWA 功能不难，关键是把几个核心文件配对、注册到位，再处理好缓存策略和离线体验细节。

确认项目模板支持 PWA

新建 Blazor WebAssembly 项目时，勾选 "Progressive Web Application" 选项，VS 或 CLI 会自动生成 manifest.json、service-worker.js 及相关注册逻辑。若已有项目，可手动添加：运行 dotnet new pwa（需 .NET SDK 6+），或复制标准 PWA 文件并更新 index.html 中的注册代码。

检查 service worker 注册与作用域

打开 wwwroot/index.html，确认包含以下脚本（通常已存在）：

确保 service-worker.js 位于站点根路径（即与 index.html 同级），且 HTTP 响应头中 Service-Worker-Allowed: / 已设置（IIS/Azure 需额外配置，Kestrel 默认允许）。

定制缓存资源清单

默认的 service-worker.published.js（发布后生成）会自动缓存 _content/、_framework/ 和静态资产。如需额外缓存图片、API 响应或自定义路径：

• 修改 wwwroot/service-worker.js 中的 self.__WB_MANIFEST 数组，或直接在 precacheAndRoute() 调用中追加 URL
• 对动态 API 请求，改用 registerRoute() + NetworkFirst() 或 StaleWhileRevalidate() 策略（需引入 Workbox）
• 避免缓存带查询参数的请求（如 /api/data?id=1），可统一用 ignoreURLParametersMatching: [/^fbclid$/] 过滤

验证与调试 PWA 行为

在 Chrome 中打开 DevTools → Application 标签页：

• 查看 Service Workers 是否激活并正常运行，点击 “Update on reload” 测试更新逻辑
• 切换到 Cache Storage，展开对应缓存名，确认关键资源（如 index.html、app.css、DLL 文件）已写入
• 勾选 Offline 模拟断网，刷新页面——若主界面仍能加载，说明缓存生效；若白屏，检查 service-worker.js 是否捕获了 fetch 事件并正确 fallback

基本上就这些。PWA 不复杂但容易忽略作用域和缓存匹配规则，多测几次离线场景，问题基本就浮出来了。