Service Worker 如何实现跨域资源的缓存？

Service Worker 可以缓存跨域资源，但有 CORS 限制：fetch 跨域请求默认不发 credentials，响应必须包含 Access-Control-Allow-Origin 头，否则浏览器拦截无法缓存。opaque response（no-cors 模式下）可缓存但无法读取内容，且计入 7 倍缓存配额，最多存活 7 天（Chrome）。CDN 支持 CORS 时务必用 cors 模式。

追问

opaque response 有什么坑？

status 始终为 0，无法读取 body 也不能判断缓存是否有效。占用 7 倍缓存配额，7 天后自动清理。CDN 支持 CORS 务必用 cors 模式。

如何让第三方 CDN 走 CORS？

CDN 侧配置 Access-Control-Allow-Origin。SW 侧 fetch 时 mode: cors（默认值）。CDN 不支持 CORS 只能退回 no-cors。

缓存跨域字体和图片有什么区别？

字体必须 CORS 才能被 @font-face 使用（浏览器安全策略）。图片/CSS/JS 不受此限制，但 SW 缓存时 opaque response 仍有 7 天限制。

Stale-While-Revalidate 怎么用？

caches.match 返回缓存，后台 fetch 更新缓存。先快后新，下次请求就是新数据。

跨域 API 的缓存怎么处理？

API 通常带 CORS 头可正常缓存。但带 Authorization 的请求不能缓存到共享 Cache，会泄露用户数据。私有数据只缓存内存或 SessionStorage。