Blazor 创建 PWA 必须使用 Blazor WebAssembly 项目，勾选“Progressive Web Application”选项自动生成 manifest.json 和 service-worker.js；需完善 manifest 字段、确保图标路径正确、HTTPS 部署，并通过 Lighthouse 审计验证。
Blazor 创建 PWA（渐进式 Web 应用）不难，关键是让应用支持离线访问、添加到主屏幕、以及拥有可靠的启动体验。目前 Blazor Server 不适合做 PWA（依赖持续连接），所以必须用 Blazor WebAssembly（WASM） 项目。
确认项目类型是 Blazor WebAssembly
新建项目时选 “Blazor WebAssembly App”，勾选 “Progressive Web Application” 选项（VS 或 CLI 都支持）。这会自动添加：
manifest.json（定义图标、名称、主题色等） service-worker.js（用于缓存静态资源和离线逻辑） 相关注册代码（在 wwwroot/index.html 和 Program.cs 中）
检查并完善 manifest.json
文件位于 wwwroot/manifest.json，确保包含必要字段：
name / short_name：显示在桌面/启动器上的名称 icons：至少提供 192×192 和 512×512 PNG 图标（路径以 / 开头，如 “/icon-192.png”） start_url：设为 “/” 或 “/index.html” display：推荐 “standalone” 或 “fullscreen” theme_color / background_color：匹配你的 UI 主题
图标记得放到 wwwroot 下对应路径，并在 index.html 的 中确认有 。
启用并测试 Service Worker
Blazor WASM 模板默认生成了 service-worker.published.js（发布时生成）和 service-worker.js（开发时占位）。关键点：
开发时：F5 启动后打开浏览器 Application → Service Workers，看是否已注册并处于 “Activated” 状态 发布后：确保 service-worker.published.js 被正确部署，且服务器未返回 404 离线测试：在 DevTools 中切换到 Offline 模式，刷新页面——如果首页能正常加载，说明缓存生效
如需自定义缓存策略（比如缓存 API 响应），可修改 wwwroot/service-worker.js，但注意 Blazor WASM 的 _framework/ 目录必须被缓存，否则应用无法启动。
构建与部署注意事项
PWA 行为高度依赖部署环境：
必须通过 HTTPS 访问（本地 localhost 除外） 确保 Web 服务器正确设置 MIME 类型（如 .webp、.woff2、.js） 发布时用 dotnet publish -c Release，输出的 wwwroot 内容直接部署到静态托管服务（如 Azure Static Web Apps、Vercel、Nginx） 避免反向代理误删 Service-Worker-Allowed 头（一般不需要手动加）
部署后用 Chrome 的 Lighthouse 工具跑一次 PWA 审计，能直观看到哪些项未达标（比如缺少图标、start_url 不可访问等）。
基本上就这些。核心是选对 Blazor WASM、配好 manifest、确保 service worker 正常注册和缓存关键资源。不复杂但容易忽略细节，尤其图标路径和 HTTPS 环境。
以上就是Blazor 怎么创建 PWA 应用的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1443028.html
微信扫一扫 
支付宝扫一扫 
