id="如何在-service-worker-中实现缓存的版本控制和更新策略以确保用户始终获取到最新的资源">如何在
Service
中实现缓存的版本控制和更新策略，以确保用户始终获取到最新的资源？
sw.js，给一套可落地的“版本控制
有明确的缓存版本号，发版时可控地失效旧缓存；等壳尽量拿最新；
id="1-版本号控制用-cache_version-驱动缓存失效">1.
版本号控制：用
class="language-javascript">const
CACHE_VERSION
`${CACHE_PREFIX}${CACHE_VERSION}`;
每次前端发版，手动提升让你已经写了按前缀清理旧缓存的逻辑，这部分是正确的：
class="language-javascript">self.addEventListener('activate',
(event)
densenapp-static-v0.0.6；
densenapp-static-*。
index.html）
network-first：优先从网络拉，失败再用缓存。
这样壳页面几乎总是最新。
JS/CSS/图片等静态资源
stale-while-revalidate：
CACHE_VERSION，它也会逐步更新。
class="language-javascript">self.addEventListener('fetch',
(event)
{event.respondWith(networkFirst(request,
静态资源：stale-while-revalidate，兼顾速度和更新if
(request.destination
{event.respondWith(staleWhileRevalidate(request,
API：network-first
(url.pathname.startsWith('/api/getProduct')||
url.pathname.startsWith('/api/help')||
url.pathname.startsWith('/api/pro')||
url.pathname.startsWith('/pro/customer')||
url.pathname.startsWith('/files')||
url.pathname.startsWith('/view'))
{event.respondWith(networkFirst(request,
API
(url.pathname.startsWith('/api/')||
url.pathname.startsWith('/pro/')||
url.pathname.startsWith('/swagger')||
url.pathname.includes('/signalr'))
{return;}
staleWhileRevalidate，并保留你原来的
networkFirst（可以复用）：
class="language-javascript">function
cacheName)
response.clone();caches.open(cacheName).***n((cache)
=>
caches.match(request).***n((cached)
=>
(request.headers.get('accept')?.includes('text/html'))
{return
caches.match('./index.html');}return
new
caches.match(request).***n((cached)
=>
response.clone();caches.open(cacheName).***n((cache)
=>
(request.headers.get('accept')?.includes('text/html'))
{return
caches.match('./index.html');}return
new
CACHE_VERSION，静态资源也会被后台拉新。
class="language-javascript">client.postMessage({type:
CACHE_VERSION
{navigator.serviceWorker.addEventListener('message',
(event)
直接刷新页面，让用户切到新资源window.location.reload();}});
安装新缓存（PRECACHE_URLS）；激活时清旧缓存，postMessage给页面；
SW_ACTIVATED，reload
一次；
修改前端代码后：
如果你对静态文件做版本号（index.js?v=0.0.6）或通知页面（SW_ACTIVATED）；staleWhileRevalidate”的完整版本，你只要整体替换就可以。
