手帐 Blog

主题

18 · PWA 与 Service Worker ​

目标：理解离线缓存策略与更新提示；知道何时 PWA 值得做、何时过杀。

1. 背景与目标 ​

PWA ≈ 可安装 +（可选）离线/弱网可用 + 现代 Web API。小程序生态里优先级常不高；H5 触达、桌面快捷方式时更有价值。

2. 核心概念 ​

概念作用
Web App Manifest名称、图标、启动 URL、显示模式
Service Worker拦截请求、缓存、后台能力（视浏览器）
缓存策略Cache First / Network First / Stale-While-Revalidate
text
首次访问 → 安装 SW → 缓存外壳
再次访问 → SW 决定走缓存还是网络
发版 → 新 SW waiting → 提示用户刷新激活

3. 最小实践（思路） ​

  1. 加 manifest.webmanifest + 图标
  2. 用 Workbox 或手写 SW 缓存 index.html + 静态资源（注意 HTML 策略）
  3. 监听 waiting，UI 提示「有新版本，点击刷新」
  4. HTTPS（本地 localhost 例外）

HTML 建议 Network First 或短缓存，避免用户长期卡在旧壳。

4. 踩坑与取舍 ​

  1. 强缓存旧 HTML：修了 bug 用户仍旧版——更新策略没做。
  2. 缓存了用户隐私接口：API 默认别乱 Cache First。
  3. 小程序当 PWA 学：模型不同；本篇主攻标准浏览器 H5。
  4. 无离线需求硬上 SW：复杂度换来的收益接近 0。

默认：先做好加载性能与错误页；有明确离线/安装诉求再上 PWA。

5. 验收清单 ​

  • [ ] 能口述一种缓存策略及适用资源
  • [ ] 知道发版后如何让用户用上新 SW
  • [ ] 写明「我的项目要不要 PWA」及理由
  • [ ] （可选）本机 Lighthouse PWA 项看过一眼

6. 下一步 ​

→ 19 · 测试策略：单元 / 组件 / E2E

参考链接 ​