pwa-patterns

用途：提供渐进式 Web 应用（PWA）的实践模式，围绕 Workbox 7.x 管理 Service Worker、离线优先策略与类原生应用体验，适用于构建 PWA 和 Service Worker 的场景。

主要能力：

1. Service Worker 生命周期：安装（预缓存）→ 等待（旧 SW 消失后激活）→ 激活 → 处理 fetch 事件（运行时缓存）。
2. 使用 workbox-build 的 generateSW 生成 Service Worker，可配置 globDirectory、globPatterns、swDest、clientsClaim、skipWaiting、navigateFallback、navigateFallbackDenylist 与 runtimeCaching。
3. 缓存策略：CacheFirst（少变的静态资源）、NetworkFirst（API 调用，优先新数据）、StaleWhileRevalidate（头像等非关键图片）、NetworkOnly（认证端点）。
4. VitePWA 集成：在 vite.config.ts 中配置 registerType、workbox.globPatterns、runtimeCaching 与 manifest。
5. Web App Manifest：配置 name、short_name、start_url、display、background_color、theme_color 与图标（192px、512px maskable）。
6. React Hooks：useInstallPrompt（安装提示）与 useOnlineStatus（在线状态）。
7. 后台同步：使用 BackgroundSyncPlugin 处理 POST 表单请求，可设 maxRetentionTime。

使用方式：通过 workbox-build 或 vite-plugin-pwa 生成/注入 Service Worker，按资源类型注册对应缓存策略，并配置 manifest 实现可安装性。

限制与反模式：禁止无过期时间地缓存一切（存储膨胀）、跳过 clientsClaim、缓存认证令牌、预缓存动态内容、忽略导航离线回退、缓存 POST 响应。

检查清单：Service Worker 已注册；manifest 含 192px 与 512px maskable 图标；启用 HTTPS；离线页面可用；响应式设计；首次内容绘制小于 1.8 秒。

关键决策：简单场景用 generateSW，自定义用 injectManifest；关键数据用 NetworkFirst；静态资源用 CacheFirst 配合版本化文件名；重大变更提示用户更新。