如何在 Service Worker 中实现版本控制和更新策略？
在你当前这个 sw.js 基础上，加“版本控制 + 更新策略”主要就是两块：
- 用版本号管理缓存（你已经有雏形）。
- 决定新版本什么时候生效（立即生效 / 下次刷新 / 用户确认）。
下面用尽量少的改动，把这两件事做完整。
1. 缓存版本控制：命名 + 清理
你现在：
const CACHE_NAME = 'densenapp-static-v1';
这是第一层版本控制。建议：
- 把版本号单独提取出来，方便后续统一管理；
activate里按前缀清旧版本。
const CACHE_VERSION = 'v1.0.0';
const CACHE_PREFIX = 'densenapp-static-';
const CACHE_NAME = `${CACHE_PREFIX}${CACHE_VERSION}`;
同时改 activate 里的清理逻辑（只删同前缀的旧版本）：
self.addEventListener('activate', (event) => {event.waitUntil(caches.keys().then((keys) => {return Promise.all(keys.filter((key) => key.startsWith(CACHE_PREFIX) && key !== CACHE_NAME).map((key) => caches.delete(key)));}));self.clients.claim();
});
后续发新版，只要改 CACHE_VERSION，就会：
- 安装：创建新缓存
densenapp-static-vX.Y.Z并预缓存列表； - 激活：自动删除旧版缓存。
2. 更新策略：新 SW 什么时候接管页面
常见几种：
-
立即生效（当前打开的页面也强制切新 SW）
适合你这种门店工具类应用：更新小、希望所有终端立刻一致。 -
下次打开才生效（默认行为）
浏览器会在“所有旧 SW 控制的页面关闭”后再启用新 SW。 -
用户确认后再切换
比较适合公众站点，这里就不展开了。
你现在在 install 里已经：
self.skipWaiting();
这一步是“让新 SW 直接进入 waiting -> activate”，配合 clients.claim()，基本就是立即接管策略。为了更可控，可以再加一个向页面广播“有新版本”的钩子。
3. 广播更新信息到页面（可选但推荐）
在 activate 里激活新版本后，给所有客户端发一条消息：
self.addEventListener('activate', (event) => {event.waitUntil((async () => {const keys = await caches.keys();await Promise.all(keys.filter((key) => key.startsWith(CACHE_PREFIX) && key !== CACHE_NAME).map((key) => caches.delete(key)));// 通知所有客户端：SW 已激活新版本const clientsList = await self.clients.matchAll({ type: 'window' });for (const client of clientsList) {client.postMessage({type: 'SW_ACTIVATED',version: CACHE_VERSION});}await self.clients.claim();})());
});
然后在你页面里（例如 index.js 末尾）监听这条消息，可以选择：
- 直接
location.reload()强刷； - 或展示 toast，让用户点“立即更新”。
一个简单的“自动刷新”示例：
if ('serviceWorker' in navigator) {navigator.serviceWorker.addEventListener('message', (event) => {if (event.data?.type === 'SW_ACTIVATED') {console.log('Service Worker 已更新到版本:', event.data.version);// 简单粗暴：直接刷新，让新静态资源生效window.location.reload();}});
}
这样，你的更新策略就是：
- 发布新前端版本 → 改
CACHE_VERSION→ 部署； - 客户端下次访问：
- 下载新
sw.js； - 预缓存新版静态文件；
- 删除旧缓存；
- 给页面发
SW_ACTIVATED； - 页面收到后自动刷新，所有终端立刻跑在新版本资源上。
- 下载新
4. PRECACHE_URLS 的版本化
如果你以后想做更细粒度的缓存更新，可以给每个静态资源附上“指纹”（hash）或查询参数：
const PRECACHE_URLS = ['./index.html?v=1.0.0','./index.js?v=1.0.0','./index.css?v=1.0.0',// ...
];
只要构建时版本号或 hash 变了，浏览器就会认为是一个“新 URL”，从而强制重新拉取并缓存。
在你当前手工维护的环境里，最简单的做法是：
- 每次发版同时：
- 改
CACHE_VERSION; - 改
PRECACHE_URLS里的?v=...一致的版本号。
- 改
不做也行，靠 CACHE_VERSION 变化 + 重新 addAll 一般已经足够，主要看是否有中间层缓存（CDN）等。
5. 小结：在你现有 sw.js 上需要改的点
- 顶部增加版本常量，调整
CACHE_NAME：
const CACHE_VERSION = 'v1.0.0';
const CACHE_PREFIX = 'densenapp-static-';
const CACHE_NAME = `${CACHE_PREFIX}${CACHE_VERSION}`;
activate里按前缀清旧版本 + 可选广播：
self.addEventListener('activate', (event) => {event.waitUntil((async () => {const keys = await caches.keys();await Promise.all(keys.filter((key) => key.startsWith(CACHE_PREFIX) && key !== CACHE_NAME).map((key) => caches.delete(key)));const clientsList = await self.clients.matchAll({ type: 'window' });for (const client of clientsList) {client.postMessage({type: 'SW_ACTIVATED',version: CACHE_VERSION});}await self.clients.claim();})());
});
- 页面侧（
index.js）监听message，决定是否自动刷新：
if ('serviceWorker' in navigator) {navigator.serviceWorker.addEventListener('message', (event) => {if (event.data?.type === 'SW_ACTIVATED') {console.log('SW 已更新到版本:', event.data.version);window.location.reload();}});
}
如果你希望更新“不要打断正在操作的用户”，可以把 window.location.reload() 换成“弹一个自定义对话框：检测到新版本，是否立即刷新？”，逻辑类似，只是延迟刷新时机。
