PWA 实现与落地

要解决什么问题

很多 Web 应用在移动端只是「浏览器里打开的一个标签页」：弱网时白屏、重复访问仍依赖全量拉取，也没有稳定的安装入口。PWA 不是给所有站点贴标签，而是在面向安装、离线兜底、重复访问的场景里，把 manifest、Service Worker 和缓存策略串成一条可验收的落地路径。

技能如何引导落地

技能按 Procedure 拆成可执行的检查清单：

• 值不值得做：纯内部后台、强实时流媒体或只需普通 HTTP 缓存时，不必强行 PWA。
• 基础面：补齐 manifest、192/512 图标（Android 需 maskable、iOS 需 apple touch icon）、主题色与 HTML 引用。
• Service Worker：注册 SW 并设计用户可见的更新提示；避免静默 skipWaiting() 后直接强刷页面。
• 缓存分层：用 Workbox 或框架插件区分 precache / runtime cache；登录、支付、权限变更等敏感请求必须走网络。
• 体验与验收：提供 offline fallback、安装提示 UI，并验证首次加载、离线访问、更新激活、卸载重装。

Detailed References 指向 manifest 与 Workbox 专题文档，便于对照字段、Vite 集成与更新流程。

边界与注意点

• Service Worker 仅在 HTTPS 下工作（localhost 除外）。
• iOS PWA 能力弱于 Android，安装、推送与生命周期需单独验证。
• 缓存有配额与逐出机制，需设置 max entries / max age。
• 预期产出包括 Lighthouse PWA、DevTools Application 面板、离线模式与移动端安装流程的可重复验证。