如何利用 Cache Storage API 配合 Service Worker 替代本地存储处理大文件与网络响应缓存-js教程-PHP中文网

Cache Storage API 专为缓存网络请求响应（HTML/CSS/JS/图片/API等）设计，适合大文件与结构化资源；它不替代 localStorage/sessionStorage，而是与之分工协作：前者管资源离线加载，后者管用户数据持久保存。

如何利用 cache storage api 配合 service worker 替代本地存储处理大文件与网络响应缓存

Cache Storage API 配合 Service Worker 不是用来替代 localStorage 或 sessionStorage 的，它专为缓存网络请求响应（如 HTML、CSS、JS、图片、字体、API 响应等）而设计，尤其适合处理大文件和结构化网络资源。它和本地存储解决的是不同层级的问题：前者管“资源如何离线加载”，后者管“用户数据怎么持久保存”。所以不是“替代”，而是“分工协作”。

为什么 Cache Storage 更适合大文件与网络响应

Cache Storage 存储的是完整的 Request → Response 对，天然支持流式读写、分块传输和二进制内容（如 5MB 图片、10MB 视频片段、PDF 文档），且不受字符串限制；而 localStorage 只能存字符串，大文件需 Base64 编码，体积膨胀约 33%，还易触发内存溢出或同步阻塞主线程。

Cache Storage 是异步、非阻塞的，基于 Promise，适合处理大资源加载
浏览器为其分配独立配额（通常几十 MB 到数百 MB），远高于 localStorage 的 5–10 MB 限制
支持按 URL 精确匹配、版本隔离、批量清理，便于管理动态更新的大资源（如用户上传的报告 PDF、课程视频封面图集）
可配合 fetch 事件实现“缓存优先 + 后台更新”策略，用户看到的是旧版大文件，后台静默拉取新版并预存，体验无感知

如何缓存大文件（如 PDF、高清图、视频片段）

关键在于控制请求方式与响应校验，避免因超时、中断或 CORS 导致缓存失败：

确保服务端对大文件响应头包含 Content-Length 和 Accept-Ranges: bytes，支持断点续传
前端发起请求时使用 cache: 'no-store' 避免被 HTTP 缓存干扰，让 SW 完全接管
在 install 阶段不直接 addAll 大文件（易失败），改用 fetch + put 方式逐个可控缓存：

示例（在 sw.js 中）：

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('assets-v1').then(cache =>
      fetch('/reports/annual-2025.pdf')
        .then(res => {
          if (!res.ok) throw new Error('PDF load failed');
          return cache.put(new Request('/reports/annual-2025.pdf'), res);
        })
    )
  );
});

对超大资源（如 >50MB 视频），建议拆分为分片请求（如 /video/chunk-001.bin），再统一缓存，便于增量更新和错误重试

如何缓存 API 响应（含 JSON、分页列表、用户数据）

API 不同于静态资源，需区分只读接口与带副作用操作。只读类（GET 请求）可安全缓存，但要注意时效性与请求参数处理：

过滤掉带敏感参数（如 ?token=xxx）或用户上下文（?user_id=123）的请求，避免缓存污染
对确定不变的数据（如地区字典、配置项），用 caches.match(request, { ignoreSearch: true }) 忽略 query 参数，提升命中率
采用 Stale-While-Revalidate 策略：先返回缓存，再 fetch 新数据并更新缓存（适合新闻列表、商品目录）

fetch 事件中示例：

self.addEventListener('fetch', event => {
  const url = new URL(event.request.url);
  if (event.request.method === 'GET' && url.origin === location.origin && url.pathname.startsWith('/api/')) {
    event.respondWith(
      caches.match(event.request).then(cached => {
        const networkFetch = fetch(event.request).then(res => {
          if (res.ok) caches.open('api-v1').then(cache => cache.put(event.request, res.clone()));
          return res;
        });
        return cached || networkFetch;
      })
    );
  }
});