在 Service Worker 中缓存接口响应

目标

重复访问仍会重新请求同样的数据，尽管数据很少变化，体验依旧缓慢。本配方在 Service Worker 中对 GET 请求采用 stale-while-revalidate：有缓存先返回缓存，同时后台发起请求并更新缓存，从而让重复访问即时渲染、下次拿到新数据；提醒需给缓存加版本并避免缓存带凭据的请求。

步骤要点

1. 对 GET 请求采用 stale-while-revalidate。
2. 先返回缓存并后台刷新缓存。
3. 为缓存加版本并设置过期。
4. 避免缓存带凭据的请求。

self.addEventListener('fetch', (event) => {
  const { request } = event;
  if (request.method !== 'GET') return;
  event.respondWith((async () => {
    const cache = await caches.open('api-v1');
    const cached = await cache.match(request);
    const fetched = fetch(request).then((res) => { cache.put(request, res.clone()); return res; });
    return cached || fetched;
  })());
});

排错提示

• 短时间内会展示陈旧数据。
• 缓存带凭据会破坏鉴权。
• 缓存可被驱逐，需版本管理。

适用边界

• 会短暂展示陈旧数据。
• 缓存存储有限可被驱逐。