service worker 是实现 cdn 节点动态替换与高可用保障最可控的前端手段之一，通过 fetch 事件拦截请求、校验响应（状态码/etag/哈希）、自动降级至备用 cdn 或源站，并结合内容哈希命名与元数据校验避免坏缓存滞留。
Service Worker 是实现 CDN 节点动态替换与高可用保障最可控的前端手段之一。它不依赖 DNS 切换或服务端配置，而是在浏览器请求链路最末端主动干预，对失效资源做即时降级、重试或回源，特别适合应对 CDN 单点故障、节点抖动、区域性不可用等场景。
核心能力：拦截 + 校验 + 降级
CDN 节点损坏往往表现为资源返回 404、502、超时，或响应内容异常（如空响应、截断、哈希不匹配）。Service Worker 可在 fetch 事件中完成三步闭环：
- 拦截所有静态资源请求（如 /static/、.js/.css/.png 等路径）
- 发起请求后检查 response 状态码、headers（如 X-Content-Hash 或 ETag）、响应体完整性
- 校验失败时，自动切换备用 CDN 域名、回退本地缓存、或回源至对象存储（如 OSS/S3）
多源路由策略：一对多容灾切换
单一备用 CDN 不足以覆盖全球故障，建议预置三级回源路径：
- 主 CDN：如 cdn-a.example.com（默认使用）
- 备用 CDN：如 cdn-b.example.com（同区域镜像，毫秒级切换）
- 兜底源站：如 oss-prod.aliyuncs.com（带签名直链，避免未授权访问）
SW 中可按域名白名单 + 请求类型分级控制。例如图片类资源允许两级 fallback，而核心 JS 必须强校验且仅允许一级切换，避免执行异常代码。
缓存与版本协同：避免“坏缓存”滞留
单纯替换域名不能解决已缓存损坏资源的问题。需配合以下机制：
- 所有静态资源采用内容哈希命名（如 app.8a3f2d.js），天然绑定版本与完整性
- SW 安装阶段预缓存关键资源，并记录其期望哈希值到 IndexedDB 元数据表
- fetch 时比对响应哈希；不一致则 cache.delete() + fetch(备用地址)，并更新元数据
- 对非哈希资源（如 CMS 后台上传的图片），通过 URL query 参数注入时间戳或版本号（如 ?v=20260520）辅助缓存隔离
兼容性与上线要点
Service Worker 在 Chromium 60+、Firefox 44+、Safari 11.1+ 已全面支持，但需注意：
- 必须通过 HTTPS（或 localhost）注册，HTTP 环境下不可用
- 作用域（scope）需与页面同源，推荐部署在根路径（/sw.js）以覆盖全站资源
- 更新 SW 需触发 install → waiting → activate 流程，避免旧版长期驻留；可通过 skipWaiting() + clients.claim() 实现热更新
- 首次加载无法拦截（因 SW 尚未激活），需配合 preload link 或内联关键 CSS/JS 保首屏可用
