service worker 的 fetch 事件仅拦截同源且由当前页面主动发起的请求，包括 fetch()、xmlhttprequest、img/script/link/video 等资源加载及导航请求；不拦截 iframe 跨域资源、sendbeacon、无 cors 响应头图片及 sw.js 自身加载。
fetch 事件到底能拦哪些请求
Service Worker 的 fetch 事件只拦截**同源、由当前页面主动发起**的请求，不是所有网络流量都归它管。比如：<iframe src="https://thirdparty.com"></iframe> 里的资源、navigator.sendBeacon()、跨域但没带 CORS 响应头的图片、甚至 SW 自己安装时加载 sw.js 的请求，全都不进 fetch 回调。
真正能拦到的包括：
-
fetch()发起的同源请求（含credentials: 'include'） -
XMLHttpRequest（注意：部分旧版 Safari 对 XHR 拦截不完整） -
<img>、<script></script>、<link rel="stylesheet">、<video></video>等资源加载 - 用户点击链接或表单提交触发的导航请求（
destination === 'document'）
别指望它拦广告 iframe 或埋点 beacon——那得靠其他机制。
为什么写了 fetch 监听却没生效
最常见原因是没调用 event.respondWith()，或者调了两次。浏览器一旦发现没被显式响应，就走默认网络流程，控制台还可能一声不吭。
必须确保每个进入 fetch 事件的请求，最终都有且仅有一次 event.respondWith() 调用：
- 不要在条件分支外写
return fetch(event.request)—— 这等于放弃拦截 - 避免在
then()外层漏掉event.respondWith()包裹 - 异步逻辑里别用
await直接等caches.match()后再决定是否调用，容易遗漏兜底
调试时打开 DevTools → Application → Service Workers，勾选 “Update on reload”，再看 “Skip waiting” 和 “Clients” 是否正常激活和受控。
缓存匹配不到？大概率是 URL 对不上
caches.match(request) 默认严格比对整个 URL，包括查询参数。缓存了 /app.js，但页面请求的是 /app.js?v=3.2.1，就完全不命中。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
解决方法取决于场景：
- 预缓存阶段（
install）：确保cache.addAll([...])里的路径和实际请求路径一字不差，连尾部/和大小写都不能错 - 运行时缓存（
fetch中）：用caches.match(request, { ignoreSearch: true })忽略 query string；或构造新 Request：new Request(url.origin + url.pathname, { ... }) - 对 API 请求做版本控制：别用字符串
.includes('v=')，改用url.searchParams.has('v')安全读取
顺手在 Cache Storage 面板里点开缓存，确认 key 是什么格式——眼见为实。
Response 流只能读一次，克隆是刚需
拿到 fetch() 返回的 Response，想既返回给页面、又存进 cache，必须先 clone()。否则 response.json() 之后再 cache.put() 就会报 body stream already read。
典型写法：
fetch(request).then(response => {
const cloned = response.clone();
caches.open('api-v1').then(cache => cache.put(request, cloned));
return response;
});
注意：response.clone() 不是深拷贝，只是让 body 可被多次读取；如果要解析 JSON 后再修改内容，得用 response.json().then(data => new Response(JSON.stringify(modified), {...})) 构造新响应。
真正难搞的是流式响应（如 text/event-stream），.json() 会直接崩，这类必须绕开解析，原样透传或用 response.body 流式处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
