Cache API 怎么配合网络请求实现 Network First 更新机制-H5教程-PHP中文网

network first机制先发网络请求，成功则返回并可选缓存，失败时回退缓存；适用于新闻列表等需最新数据场景，需过滤非get请求、校验响应状态、合理配置cache.match选项并清理旧缓存。

cache api 怎么配合网络请求实现 network first 更新机制

Cache API 配合网络请求实现 Network First（网络优先）更新机制，核心是：先发网络请求，成功则用它响应页面并可选存入缓存；失败时再 fallback 到缓存内容。这种方式适合需要最新数据的场景，比如新闻列表、用户资料页或动态仪表盘。

fetch 事件中实现 Network First 流程

所有页面请求都会经过 Service Worker 的 fetch 事件监听器。在这里编写逻辑，决定是走网络还是读缓存：

调用 fetch(request) 发起真实网络请求
用 .then() 捕获成功响应，直接返回给页面，并可选调用 cache.put(request, response.clone()) 更新缓存（注意 clone，因 Response body 只能读一次）
用 .catch() 或 .finally() 捕获网络失败（如离线、超时、500 错误），此时再调用 cache.match(request) 尝试读取旧缓存
若缓存也未命中，可返回一个兜底响应（如自定义 offline 页面）

关键细节：避免常见陷阱

Network First 看似简单，但几个细节不处理好会导致体验异常或缓存污染：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

区分请求类型：不要对 POST、PUT、DELETE 或带敏感 query（如 ?token=xxx）的请求使用此策略，它们通常不应被缓存。可用 request.method === 'GET' 和 new URL(request.url).searchParams.has('...') 过滤
缓存更新要谨慎：不是每次网络成功都必须写缓存。例如，只对 200 响应且 Content-Type 匹配（如 text/html、application/json）才存；跳过重定向（301/302）或错误状态
匹配缓存时放宽条件：默认 cache.match() 严格比对 URL、method、headers。若需忽略查询参数（如分页变化不影响骨架），传入选项 { ignoreSearch: true }
避免阻塞主线程渲染：整个 fetch 处理必须返回 Promise，且不能同步等待。所有异步操作（fetch + cache）都要正确链式处理或用 async/await

一个可运行的代码片段

放在 Service Worker 的 fetch 监听器中：

self.addEventListener('fetch', event => {
  const { request } = event;
  
  // 只对 GET 请求启用 Network First
  if (request.method !== 'GET') return;

  event.respondWith(
    fetch(request)
      .then(response => {
        // 只缓存 200 响应，且非重定向
        if (response.status === 200) {
          const cache = await caches.open('dynamic-v1');
          cache.put(request, response.clone());
        }
        return response;
      })
      .catch(() => caches.match(request, { ignoreSearch: true }))
      .then(cachedResponse => cachedResponse || new Response('离线中，请稍候', { status: 503 }))
  );
});