第三方库缓存不能只靠caches.addAll()预加载，因其仅支持同源相对路径，而CDN资源协议、域名、版本号各异，URL无法匹配；跨域请求受CORS限制，fetch响应体不可读，cache.put()静默失败。
第三方库缓存为什么不能只靠 caches.addAll() 预加载
预缓存（install 阶段调用 caches.addAll()）对第三方库容易失效，不是因为代码写错，而是路径和加载时机不匹配。比如你写 ['/node_modules/react/umd/react.production.min.js']，但实际页面引入的是 https://unpkg.com/react@18.2.0/umd/react.production.min.js —— 协议、域名、版本号全不同，根本不会命中。
常见错误现象：Cache Storage 里看不到 CDN 资源；二次访问仍发起网络请求；DevTools 的 Network 面板显示 Status 是 “(from ServiceWorker)” 的只有 HTML/CSS/JS 本地文件，没有第三方脚本。
- CDN 资源必须用完整 URL 字符串匹配，且协议、主机、路径、查询参数需完全一致
-
caches.addAll()只支持相对路径（同源），无法直接预缓存跨域资源 - 即使手动构造完整 URL 放进
addAll()，fetch() 默认会拒绝跨域响应的 body 读取（CORS 限制），导致cache.put()静默失败
如何安全拦截并缓存跨域第三方库请求
必须在 fetch 事件中识别出第三方库请求，并显式允许 CORS 响应写入缓存。核心是：先判断是否为第三方 JS/CSS 请求，再用 response.clone() + response.headers.get('content-type') 做类型校验，避免把 HTML 或 JSON 错当资源缓存。
关键步骤：
立即学习“前端免费学习笔记（深入）”；
- 用
event.request.url匹配已知 CDN 域名（如unpkg.com、cdn.jsdelivr.net）和扩展名（.js、.css） - 发起
fetch(event.request, { mode: 'cors', credentials: 'omit' })，确保能读取响应体 - 检查
response.status === 200且response.headers.get('content-type')?.includes('javascript')或'css' - 只对符合条件的响应做
cache.put()，否则跳过缓存（避免污染）
示例逻辑片段：
self.addEventListener('fetch', event => {
const url = new URL(event.request.url);
const isThirdPartyLib = /unpkg\.com|jsdelivr\.net|cdnjs\.cloudflare\.com/.test(url.hostname)
&& /\.(js|css)$/.test(url.pathname);
if (isThirdPartyLib) {
event.respondWith(
fetch(event.request, { mode: 'cors', credentials: 'omit' })
.then(response => {
if (response.status === 200 &&
(response.headers.get('content-type')?.includes('javascript') ||
response.headers.get('content-type')?.includes('css'))) {
const cloned = response.clone();
event.waitUntil(
caches.open('libs-cache-v1').then(cache => cache.put(event.request, cloned))
);
}
return response;
})
);
}
});
fetch 事件里缓存第三方库的三个易踩坑点
很多人写了拦截逻辑却没生效，问题往往不在语法，而在策略细节。
-
event.request.destination必须是'script'或'style'，不能只靠 URL 判断——否则可能把fetch('/api?lib=react')这类接口也误缓存 - 未处理重定向：CDN 常返回 302，
fetch()默认跟随，但最终event.request.url和缓存 key 不一致，导致后续 match 失败；建议加redirect: 'manual'并显式处理 Location 头 - 缓存命名没区分环境：开发时用
unpkg.com，生产切到jsdelivr.net，但共用同一个缓存名（如'libs-cache'），旧缓存残留干扰新资源；建议按 CDN 域名哈希生成缓存名，例如caches.open(`libs-${hash(url.hostname)}-v1`)
离线时第三方库加载失败的真正原因
不是缓存没存进去，而是页面首次加载时，Service Worker 还没激活，所有 <script src="https://..."></script> 请求都绕过了 fetch 事件——它们发生在 SW 安装前，根本没被拦截。
所以仅靠运行时缓存无法解决“首次离线白屏”。必须配合以下任一手段：
- 构建时将关键第三方库内联或复制到项目本地（如
public/libs/），再用caches.addAll()预缓存相对路径 - 使用
navigator.serviceWorker.ready延迟动态加载第三方库（适合非首屏、非核心依赖） - 在 HTML 中用
<script type="module">+import动态导入，并在catch中 fallback 到本地副本
最稳妥的做法是：核心库（React/Vue/Axios）走本地预缓存，非核心或可降级的（如图表库、字体）走运行时缓存 + 优雅降级。不要指望单一路由规则覆盖所有第三方场景。
