Service Worker 如何实现离线访问？

SW 拦截 fetch 请求，命中缓存直接返回，未命中则网络请求并缓存响应。三种策略：Cache First（优先缓存，适合静态资源）、Network First（优先网络，适合 API）、Stale-While-Revalidate（返回缓存同时后台更新）。注册 SW 后监听 install 事件预缓存核心文件，fetch 事件中根据策略匹配缓存。

追问

首次访问能离线吗？

不能。SW 注册后首次 install 才缓存资源，首次访问本身还没 SW。解决方案：用 App Shell 模式预缓存核心 HTML/CSS/JS，首次加载完成后后续访问即可离线。

哪些资源适合 Cache First？

带 hash 的静态资源（/static/app.3a2b.js）、字体、图片——内容不变可以长期缓存。API 响应用 Network First，避免数据过期。

离线时表单提交怎么办？

存入 IndexedDB 队列，监听 online 事件或用 Background Sync API 在网络恢复后自动重放。Workbox 的 workbox-background-sync 封装了这个逻辑。

缓存版本怎么管理？

cacheName 带版本号：my-app-v1→v2。activate 事件中遍历 caches.keys()，删除旧版本缓存。

PWA 离线和原生 App 离线体验差距大吗？

核心差距在后台任务：原生 App 可后台同步/推送，PWA 的 Background Sync 和 Push API 支持度有限（iOS Safari 部分支持）。但基本离线浏览、表单暂存体验已经很接近。