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，确认包含以下脚本（通常已存在）：
<script><br> if ('serviceWorker' in navigator && !navigator.serviceWorker.controller) {<br> navigator.serviceWorker.register('service-worker.<a style="color:#f60; text-decoration:underline;" title= "js" href="https://www.php.cn/zt/15802.html" target="_blank">js');<br> }<br></script>
确保
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 不复杂但容易忽略作用域和缓存匹配规则，多测几次离线场景，问题基本就浮出来了。
