id="如何在-service-worker-中实现版本控制和更新策略">如何在

Service

class="language-javascript">const

CACHE_NAME

class="language-javascript">const

CACHE_VERSION

`${CACHE_PREFIX}${CACHE_VERSION}`;

class="language-javascript">self.addEventListener('activate',

(event)

{event.waitUntil(caches.keys().then((keys)

=>

caches.delete(key)));}));self.clients.claim();

});

CACHE_VERSION，就会：

densenapp-static-vX.Y.Z

并预缓存列表；

适合你这种门店工具类应用：更新小、希望所有终端立刻一致。

下次打开才生效（默认行为）

浏览器会在“所有旧

用户确认后再切换

class="language-javascript">self.skipWaiting();

clients.claim()，基本就是立即接管策略。

为了更可控，可以再加一个向页面广播“有新版本”的钩子。

---

class="language-javascript">self.addEventListener('activate',

(event)

{navigator.serviceWorker.addEventListener('message',

(event)

简单粗暴：直接刷新，让新静态资源生效window.location.reload();}});

SW_ACTIVATED；

页面收到后自动刷新，所有终端立刻跑在新版本资源上。

如果你以后想做更细粒度的缓存更新，可以给每个静态资源附上“指纹”（hash）或查询参数：

class="language-javascript">const
PRECACHE_URLS
['./index.html?v=1.0.0','./index.js?v=1.0.0','./index.css?v=1.0.0',//
...
CACHE_VERSION;
改
class="language-javascript">const
CACHE_VERSION
`${CACHE_PREFIX}${CACHE_VERSION}`;

class="language-javascript">self.addEventListener('activate',

(event)

页面侧（index.js）监听

message，决定是否自动刷新：

{navigator.serviceWorker.addEventListener('message',

(event)

event.data.version);window.location.reload();}});

window.location.reload()

换成“弹一个自定义对话框：检测到新版本，是否立即刷新？

”，逻辑类似，只是延迟刷新时机。