PWA 开发常用哪些工具和框架？怎么选才不踩坑？

PWA 开发不是装一个插件就结束，它同时涉及 Manifest、Service Worker、缓存策略、离线体验、安装提示、性能审计和部署缓存头。常用工具很多，但真正核心的只有几类：生成和维护 Service Worker 的 Workbox，做质量审计的 Lighthouse，承载应用结构的 React、Vue、Angular 或 Vite，以及用于端到端验证的浏览器测试工具。选工具时要先确定应用类型，是内容站、后台系统、离线表单，还是接近原生体验的移动 Web。

追问

Workbox 适合所有 PWA 吗？

Workbox 适合大多数需要预缓存静态资源、运行时缓存图片或 API 的 PWA，因为它把 Service Worker 里容易写错的细节封装好了。取舍是你要理解缓存策略，而不是只复制配置；CacheFirst、NetworkFirst 和 StaleWhileRevalidate 对用户体验的影响完全不同。边界是对非常特殊的离线协作、复杂同步队列或加密缓存，手写 Service Worker 可能更可控。常见坑是把 HTML 也长期 CacheFirst，结果用户一直看旧版本，发布后像“没上线”。

js
import { registerRoute } from "workbox-routing";
import { NetworkFirst, CacheFirst } from "workbox-strategies";

registerRoute(({ request }) => request.mode === "navigate", new NetworkFirst());
registerRoute(({ request }) => request.destination === "image", new CacheFirst());

React、Vue、Angular 做 PWA 有什么区别？

三者都能做 PWA，差别主要在工程体系和团队熟悉度。React 和 Vue 通常会配合 Vite、vite-plugin-pwa 或框架自带方案，配置灵活，上手成本低；Angular 的 @angular/pwa 集成度高，适合 Angular 体系内的企业项目。取舍是插件越自动，越容易让人忽略 Service Worker 的真实行为，出了缓存问题反而不知道从哪里查。踩坑点是本地 dev 环境通常不完整模拟生产缓存，必须用 production build 验证安装和离线行为。

bash
npm create vite@latest my-pwa
npm i vite-plugin-pwa -D
npm run build && npm run preview

Lighthouse 分数能代表 PWA 质量吗？

Lighthouse 很适合做第一轮体检，它能检查 Manifest、Service Worker、HTTPS、性能和可访问性等基础问题。取舍是分数高不等于真实体验好，尤其是弱网、离线提交、登录过期和缓存更新这些场景，自动审计覆盖有限。边界是 Lighthouse 更像门槛检查，不是产品验收标准。常见坑是只盯着 PWA badge 或性能分，忽略了用户离线后看到的错误提示是否可理解。

bash
npm i -g lighthouse
lighthouse https://example.com --view

PWA 测试应该测哪些关键路径？

至少要测首次访问、刷新、离线打开、重新联网、版本更新和安装入口这几条路径。内容站更关注静态资源和页面缓存，业务系统更关注接口失败、草稿保存和权限过期。取舍是全量自动化成本较高，可以先把 Service Worker 注册、缓存命中和离线页放进 Playwright 或 Cypress 的冒烟测试。踩坑是只在 Chrome 桌面测通过就上线，移动端浏览器、iOS 安装限制和存储清理策略都可能让体验变样。

js
// Playwright 思路：构建后访问，再模拟离线
await page.goto("https://example.com");
await context.setOffline(true);
await page.reload();

部署 PWA 最容易忽略什么？

最容易忽略的是缓存头和 Service Worker 作用域。sw.js 通常不应该被 CDN 长期强缓存，否则新版本发布后用户拿不到新的 Service Worker；静态 hash 资源则可以长缓存，提高重复访问速度。取舍是缓存越激进，性能越好，但回滚和热修复越麻烦，所以 HTML、Service Worker、API 响应和静态资源要分开设置策略。常见坑是把应用部署在子路径，却没有处理 scope，导致 Service Worker 控制不到你以为能控制的页面。

nginx
location = /sw.js {
  add_header Cache-Control "no-cache";
}
location /assets/ {
  add_header Cache-Control "public, max-age=31536000, immutable";
}

小结

PWA 工具选择可以很朴素：Workbox 负责缓存和 Service Worker，Lighthouse 负责基础审计，框架插件负责构建集成，浏览器自动化负责关键路径验证。真正决定质量的不是用了多少工具，而是有没有把离线、更新、缓存和部署边界测清楚。