Service Worker 缓存策略（Cache Storage、Workbox、离线优先与更新）

Service Worker 缓存策略（Cache Storage、Workbox、离线优先与更新）概述Service Worker 使前端具备离线能力与请求拦截。合理策略可提升性能与稳定性，同时确保更新安全。关键实践与参数缓存模式：`Cache First`、`Network First`、`Stale-While-Revalidate` 按资源类型选择。版本与清理：为缓存命名加版本号；激活阶段删除旧缓存。Workbox：使用 `workbox-routing` 与 `workbox-strategies` 快速实现策略与预缓存。示例（伪代码）self.addEventListener('install', evt => { evt.waitUntil(caches.open('v1').then(cache => cache.addAll(['/','/app.css','/app.js']))) }) self.addEventListener('fetch', evt => { evt.respondWith(caches.match(evt.request).then(r => r || fetch(evt.request))) }) 验证方法DevTools Application 检查 SW 注册、缓存内容与更新流程。断网测试离线命中与功能可用性；观察版本切换行为。统计缓存命中率与回源比例；评估性能提升。注意事项避免缓存敏感数据；对认证接口使用网络优先并附加校验。更新需提示与原子切换；避免破坏会话与交互。与 HTTP 缓存协同；避免重复策略导致资源失效不一致。