用途：把自定义/无头电商店面升级为可安装的 PWA，让移动购物者在弱网或断网时仍能访问商品目录，并通过主屏图标与推送通知提升复访率。适用场景包括移动网络不稳定的地区、希望以网页替代原生 App 获客、需要重复加载秒开，以及发送订单状态、补货提醒或促销推送。
主要能力：一是 Web App Manifest，使应用可在 Android 及部分 iOS 上安装，需配置名称、start_url、display、图标（含 192 与 512 的 maskable）等；二是基于 Workbox 的 Service Worker，对商品图片用 CacheFirst、商品与集合接口用 StaleWhileRevalidate、集合用 NetworkFirst 并设 networkTimeoutSeconds，配合 ExpirationPlugin 限制缓存条目与时长；三是离线回退页，通过 setCatchHandler 在导航请求失败时返回预缓存的 /offline；四是 Web Push，客户端用 pushManager.subscribe 订阅，服务端用 web-push 发送订单更新；五是用 IndexedDB（idb）本地缓存商品与集合供离线读取，并用 useOnlineStatus 钩子控制断网时的交互。
使用方式：先放置 public/manifest.json 并在 HTML 中通过 link rel=manifest、theme-color 与 apple-touch-icon 引入；再安装依赖，如 npm install workbox-webpack-plugin，Vite 项目可用 npm install vite-plugin-pwa；在 vite.config.ts 中配置 VitePWA 的 runtimeCaching；也可直接编写 public/sw.js，使用 precacheAndRoute、registerRoute、StaleWhileRevalidate、CacheFirst、NetworkFirst、ExpirationPlugin 与 BackgroundSyncPlugin；推送需生成并安全保存 VAPID 密钥。部署前可用 lighthouse https://mystore.com --preset=desktop --only-categories=pwa 审计。
限制与注意：不要缓存购物车与结账页，须用 NetworkOnly；缓存名需随版本递增以便清理；更新后若未生效应启用 autoUpdate 并调用 skipWaiting；iOS Web Push 要求 iOS 16.4+、用户先将 PWA 添加到主屏且为 standalone 模式；价格变更后需合理设置 maxAgeSeconds 或主动失效缓存；后台同步失败需捕获错误并在 DevTools 中验证。资料中未提供具体收费、价格或平台支持细节。