Blazor 怎么创建 PWA 应用

3次阅读

Blazor 创建 PWA 必须使用 Blazor WebAssembly 项目,勾选“Progressive Web application”选项自动生成 manifest.json 和 service-worker.js;需完善 manifest 字段、确保图标路径正确、https 部署,并通过 Lighthouse 审计验证。

Blazor 怎么创建 PWA 应用

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 的 中确认有 <link rel="manifest" href="manifest.json">

启用并测试 Service Worker

Blazor WASM 模板默认生成了 service-worker.published.js(发布时生成)和 service-worker.js(开发时占位)。关键点:

Blazor 怎么创建 PWA 应用

企业软件介绍主页html模板

一款多用途的企业软件前端HTML模板。IT软件服务公司网站响应式单页模板。基于CSS、JS、HTML模块化原则创建的。如果您的站点不需要所有元素,那么可以轻松地删除不必要的组件。模板的代码干净,友好,注释良好。这使得编辑和自定义模板变得很容易。

Blazor 怎么创建 PWA 应用 350

查看详情 Blazor 怎么创建 PWA 应用

  • 开发时: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 环境。

text=ZqhQzanResources