id="如何在-service-worker-中实现缓存失效策略以确保用户始终获取到最新的资源">如何在

Service

中实现缓存失效策略，以确保用户始终获取到最新的资源？

sw.js（CACHE_VERSION

'v0.0.5'

那个），给一套简单好维护的缓存失效策略，让用户尽量总是拿到最新资源，同时仍然享受离线能力。

class="language-javascript">const

CACHE_VERSION

`${CACHE_PREFIX}${CACHE_VERSION}`;

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

(event)

CACHE_VERSION，旧缓存就会被干净删除；

新版

这是第一道缓存失效线。

{event.respondWith(cacheFirst(request));return;

CACHE_VERSION；

URL

可以对大部分静态资源采用更“新鲜”的策略，例如：

network-first（总是尽量拿最新壳）；

其他

stale-while-revalidate（先用缓存，后台刷新）。

id="21-示例indexhtml-用-network-first">2.1

network-first

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

(event)

{event.respondWith(networkFirst(request,

(request.destination

{event.respondWith(staleWhileRevalidate(request,

API：network-first（你已经有一部分了），或者放行if

(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,

(url.pathname.startsWith('/api/')||

url.pathname.startsWith('/pro/')||

url.pathname.startsWith('/swagger')||

url.pathname.includes('/signalr'))

{return;}

class="language-javascript">function

cacheName)

response.clone();caches.open(cacheName).then((cache)

=>

caches.match(request).then((cached)

=>

(request.headers.get('accept')?.includes('text/html'))

{return

caches.match('./index.html');}return

new

caches.match(request).then((cached)

=>

response.clone();caches.open(cacheName).then((cache)

=>

(request.headers.get('accept')?.includes('text/html'))

{return

caches.match('./index.html');}return

new

CACHE_VERSION，资源也会被后台刷新一轮。

id="3-前端配合sw-更新后自动刷新确保真正用上最新资源">3.

前端配合：SW

class="language-javascript">client.postMessage({type:

CACHE_VERSION

{navigator.serviceWorker.addEventListener('message',

(event)

都切到最新window.location.reload();}});

index.html）：networkFirst，保证壳最新；

window.location.reload()，保证真正启用新资源。

如果你愿意，我可以按你最终想要的策略，直接给出一份完整替换版

进行许可。

欢迎转载、使用、重新发布，但务必保留文章署名AlexChow（包含链接：

），不得用于商业目的，基于本文修改后的作品务必以相同的许可发布。

如有任何疑问，请与我联系

AlexChow，转载请注明原文链接：https://www.cnblogs.com/densen2014/p/19623469

src="https://img2023.cnblogs.com/blog/1980213/202302/1980213-20230201233143321-1727894703.png"

alt="image"

class="post-meta-container">