"离线策略设计：PWA 的 Offline Fallback 与版本管理"

概述离线体验的核心是为导航与关键资源提供合理回退，并做好缓存版本管理与清理，避免陈旧内容与占用配额。Workbox 提供路由与策略组合及回退支持，便于工程落地。策略与路由为导航请求使用 NetworkFirst 或 Stale-While-Revalidate，并在失败时返回离线回退页；静态资源使用 CacheFirst 与版本化名称。使用 Workbox 路由与策略模块实现组合与回退；在激活阶段执行版本清理［参考1,4］。回退与版本准备 `offline.html` 与必要资源（样式/图标），确保离线时可用；对 API 提供本地占位或提示。在 SW 激活阶段删除旧缓存；结合构建哈希与 `Cache-Control` 策略避免重复缓存旧资源。参考与验证［参考1］Chrome Docs：Workbox 缓存策略概览与路由配置：https://developer.chrome.com/docs/workbox/caching-strategies-overview［参考2］MDN 中文：使用 Service Worker 与离线策略说明与示例：https://developer.mozilla.org/zh-CN/docs/Web/API/Service_Worker_API/Using_Service_Workers［参考3］MDN 英文：CacheStorage/Cache 接口与版本化/清理示例：https://developer.mozilla.org/en-US/docs/Web/API/CacheStorage 与 https://developer.mozilla.org/en-US/docs/Web/API/Cache［参考4］Chrome Docs：Workbox 参考与导航预加载与回退说明：https://chrome.jscn.org/docs/workbox/reference/workbox-background-sync 与 https://developer.chrome.com/docs/workbox/navigation-preload关键词校验关键词与 PWA 离线策略一致。