id="如何在-service-worker-中实现离线缓存的策略">如何在

Service

sw.js，用几种常用策略说明“离线缓存”应该怎么设计，以及在你这个项目里怎么写。

cache-first

兜底，已经是一个可用的离线策略了。

可以在这个基础上按需要细化。

---

class="language-javascript">const

CACHE_VERSION

`${CACHE_PREFIX}${CACHE_VERSION}`;const

PRECACHE_URLS

['./','./index.html','./index.css','./index.js','./homeConfig.js','./pda.js','./auth.js','./bootstrap.bundle.min.js','./densen26.jpg','./manifest.json'

];self.addEventListener('install',

(event)

{event.waitUntil(caches.open(CACHE_NAME).then((cache)

=>

cache.addAll(PRECACHE_URLS);}));self.skipWaiting();

});

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

(event)

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

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

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

{return;}event.respondWith(caches.match(request).then((cached)

=>

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

=>

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

{return

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

new

pda.html，如果被访问过）也会被缓存，离线时还能打开；

API

请求（/api/...）不被拦截，离线会直接失败——业务数据目前不做离线缓存。

静态资源（壳）：

cache-first（你现在就是这样），保证离线能启动应用。

network-first：

不关键、可以过期的资源（图片、列表页

HTML

stale-while-revalidate：

先立即返回缓存（即使旧），同时后台拉最新、更新缓存；

只读、几乎不变的资源（字体、库文件等）：

cache-only

或长期

id="31-静态资源继续用-cache-first维持现在的逻辑">3.1

静态资源继续用

这部分基本不用改，你现有的处理已经是合理的“离线静态壳策略”。

如果想更明确地区分，可以按类型拆一点逻辑，比如：

class="language-javascript">self.addEventListener('fetch',
(event)
(url.pathname.startsWith('/api/')||
url.pathname.startsWith('/swagger')||
url.pathname.includes('/signalr'))
{return;}//
{event.respondWith(cacheFirst(request));return;}//
其他类型按需处理，或者直接
caches.match(request).then((cached)
=>
response.clone();caches.open(CACHE_NAME).then((cache)
=>
(request.headers.get('accept')?.includes('text/html'))
{return
caches.match('./index.html');}return
new
id="32-如果要给某些-api-做离线数据缓存可选增强">3.2
如果要给某些
离线时：如果有历史缓存，就用最近一次数据兜底。
class="language-javascript">self.addEventListener('fetch',
(event)
(url.pathname.startsWith('/api/pos/'))
{event.respondWith(networkFirst(request,
其他逻辑...（静态资源
response.clone();caches.open(cacheName).then((cache)
=>
caches.match(request).then((cached)
=>
fetch('/api/pos/...')，只是在离线时，Service
Worker
wwwroot/index.html；

调用后端；

静态壳：维持你现在的

precache

API：先不缓存，只要是

/api/

缓存（例如只给查询接口缓存，避免订单类操作被离线缓存污染）。

静态资源：cache-first，离线可用；

非关键

/api/pos/、/api/pda/），我可以直接把一段

sw.js，保证和现有逻辑风格一致、可直接复制替换。