"PWA 离线与性能：Service Worker 缓存策略"

概述Service Worker 缓存可在复杂网络环境下提升性能并提供离线体验，与 HTTP 缓存协作能实现更稳定的更新与到期控制。策略选型需结合资源类型、时效与用户体验。常见策略Cache First：优先返回缓存，网络回源更新。适合版本化静态资源与图标等。Network First：优先网络，失败再用缓存。适合接口数据与需新鲜度的页面片段。Stale-While-Revalidate：先返回缓存、后台异步刷新。兼顾速度与更新性，适合内容型页面局部［参考1,3,4,5］。协作与到期Service Worker 的“重新验证”通常需要额外的缓存破坏与版本管理，以确保下一次请求获得网络新鲜响应［参考1,2］。设计到期逻辑时，为 SW 缓存与 HTTP 缓存制定一致或分层的策略，避免不一致导致的更新滞后［参考2］。工程建议使用 Workbox 实现策略与路由；为不同资源设置合适的策略与到期规则。对关键资源监控 P95/P99 延迟与失败率，评估是否从 Cache First 迁移到 S-W-R 或 Network First。参考与验证［参考1］web.dev：Service Worker 缓存与 HTTP 缓存（含 S-W-R）：https://web.dev/i18n/zh/service-worker-caching-and-http-caching/［参考2］web.dev 源文档：SW 缓存层与到期设计示例：https://github.com/GoogleChrome/web.dev/blob/main/src/site/content/en/reliable/service-worker-caching-and-http-caching/index.md［参考3］Chrome 文档：Workbox 策略概览（S-W-R、Cache/Network First）：https://developer.chrome.com/docs/workbox/caching-strategies-overview［参考4］Medium：SW 缓存策略与条件请求（ETag/304）配合 S-W-R 示例：https://medium.com/@ddylanlinn/optimizing-frontend-caching-with-service-worker-and-cache-strategy-4131ae1d9aa8［参考5］文章：SW 缓存策略综述与实践：https://codesamplez.com/front-end/service-worker-caching-strategies关键词校验关键词覆盖 SW 缓存策略与离线，与正文一致。