全量版本镜像策略要求service worker在install阶段预缓存带哈希指纹的全部静态资源并绑定唯一版本标识（如static-v20260420-abc123），fetch仅响应清单内请求，activate阶段清理旧镜像，配合构建流程实现灰度与回滚。
要实现网页静态资源的“全量版本镜像”策略，核心是让 Service Worker 在安装阶段完整捕获当前发布版本的所有静态资产（HTML、CSS、JS、字体、图标、图片等），并赋予其强版本标识，确保离线可用、线上更新可控、多版本可共存。这不是简单缓存，而是构建一份带指纹、可回滚、作用域明确的静态快照。
预缓存所有静态资源并绑定版本号
在 install 阶段，必须将本次构建产出的全部静态文件路径（含哈希指纹）一次性写入指定缓存空间，例如 static-v20260420-abc123。推荐使用 Workbox 的 generateSW 插件自动提取构建产物清单，避免手动维护出错：
- Webpack/Vite 构建时启用 contenthash 或 fullhash，确保文件名随内容变化（如
main.a1b2c3.js） - Workbox 配置中设置
runtimeCaching: []关闭运行时缓存干扰，专注预缓存 - 缓存名必须包含时间戳或 commit hash，禁止用固定名（如
static-v1），否则无法实现版本隔离
fetch 拦截仅服务已镜像资源，拒绝“漏网请求”
在 fetch 事件中，不采用通用 fallback，而是严格校验：只有请求 URL 明确出现在本次镜像清单中，才返回缓存响应；否则直接放行到网络（或返回 404）。这能防止旧 SW 错误响应新资源、或未构建资源被意外缓存：
- 通过
caches.match(request)查询当前镜像缓存，命中则返回；未命中不尝试 fetch，避免污染 - 对 HTML 请求可额外加逻辑：若根路径
/缓存存在，优先返回它（保障首屏离线可打开） - 禁止对非静态类型（如
/api/、/auth/）做任何拦截，保持语义清晰
激活阶段清理旧镜像，保证单一版本生效
在 activate 事件中，主动遍历 caches.keys()，删除所有不含当前版本标识的缓存（如 static-v20260415-），但保留非镜像类缓存（如图片、API 数据等）：
- 调用
event.waitUntil(caches.delete(cacheName))清理过期镜像，防止磁盘膨胀 - 配合
self.skipWaiting()和clients.claim()，让新镜像在注册后立即接管页面 - 上线前可通过
navigator.serviceWorker.getRegistrations()检查各作用域下是否残留旧 SW 实例
支持灰度发布与版本回滚的配套机制
全量镜像的价值不仅在于离线，更在于可控交付。需配合构建与部署流程：
- 每次 CI 构建生成唯一镜像缓存名，并写入
/sw-config.json，供前端动态读取和注册 - 灰度时，让部分用户加载带 query 参数的 SW 脚本（如
/sw.js?v=20260420-beta），触发独立镜像安装 - 回滚只需重新部署旧构建产物 + 对应 SW 文件，浏览器会自动激活旧镜像缓存
