Network First策略的核心逻辑是先尝试网络请求，失败后才回退使用缓存。它适用于新闻、通知等需高新鲜度但又需离线兜底的动态内容，要求显式发起fetch并捕获异常，仅对GET请求启用，且必须用response.clone()写入缓存，避免白屏或缓存失效。
Network First策略的核心逻辑是什么
Network First不是“只走网络”，而是“先试网络，失败才用缓存”。它适用于内容更新频繁但又不能完全放弃离线能力的场景，比如新闻正文、用户通知列表、API响应。关键在于：网络请求必须被显式发起并捕获失败，不能依赖浏览器默认缓存行为；缓存只是兜底，不是主路径。
fetch事件中怎么写Network First代码
必须用 event.respondWith() 主动接管响应，并在 fetch(request) 的 catch 中查缓存。常见错误是漏掉 response.clone() 导致缓存写入失败，或没处理非 GET 请求导致 POST 响应被意外缓存。
- 只对
request.method === 'GET'的请求启用 Network First，跳过 POST/PUT/DELETE - 用
caches.open(CACHE_NAME)打开缓存，不要在then外直接调用cache.match() -
fetch(request)成功后，必须用response.clone()存入缓存，否则原始response流已被消费，cache.put()会失败 - 在
catch中查缓存时，要处理cache.match()返回undefined的情况，避免返回Promise.resolve(undefined)
基础实现示例：
self.addEventListener('fetch', event => {
const request = event.request;
// 只对 GET 请求应用 Network First
if (request.method !== 'GET') return;
// 匹配特定路径，如 /api/news/
if (!request.url.includes('/api/')) return;
event.respondWith(
fetch(request)
.then(response => {
// 网络成功：克隆响应并缓存
const cache = caches.open('api-cache-v1');
cache.then(c => c.put(request, response.clone()));
return response;
})
.catch(() => {
// 网络失败：查缓存
return caches.open('api-cache-v1')
.then(cache => cache.match(request))
.then(response => {
if (response) return response;
// 缓存也无命中，返回离线提示
return new Response('Offline', { status: 503 });
});
})
);
});
为什么不能直接用 cache.match() + fetch() 并行写法
并行触发 cache.match() 和 fetch() 是 Cache + Network 并行策略的做法，不是 Network First。Network First 要求网络响应优先呈现给用户——这意味着你不能提前返回缓存响应，也不能在 fetch 还没结束时就 resolve 一个缓存结果。否则用户看到的是旧数据，违背“网络优先”本意。
立即学习“前端免费学习笔记（深入）”；
另一个易错点：如果在 catch 里只写 return caches.match(request)，实际返回的是 Promise，而 caches.match() 本身返回 Promise，嵌套后容易变成 Promise<promise>></promise>，导致白屏或报错 TypeError: Failed to execute 'respondWith' on 'FetchEvent': The response is not a Response object。
实际项目中怎么按需分流策略
单一策略无法覆盖所有资源类型。你得根据 request.destination 或 URL 特征做条件判断，否则 CSS 文件走 Network First 就会失去加载速度优势。
-
request.destination === 'script'或.js$正则 → 用 Cache First -
request.url.startsWith('/api/')→ Network First -
request.destination === 'document'（即 HTML 页面）→ Stale-While-Revalidate 更合适 - 带
Authorizationheader 的请求 → 跳过缓存，走 Network Only
注意：Service Worker 的 fetch 事件监听范围默认是注册路径下的所有请求（如注册在 /sw.js，则监听根路径下全部请求），但不会拦截跨域请求，除非服务端明确允许（CORS 配置正确）。
真正难的不是写对一段 Network First 代码，而是识别哪些请求该走它、哪些不该——URL 规则写太宽会拖慢静态资源，写太窄又漏掉关键 API。建议先用 console.log(request) 在本地调试，观察真实请求的 url、destination 和 headers，再下判断。
