服务工作者线程中的 Cache 和 CacheStorage

JavaScript 服务工作者（Service Worker）线程中Cache和CacheStorage的主要区别：

💡提示：在 Service Worker 中，caches是一个全局属性，等价于self.caches，其类型就是CacheStorage。通过它你可以打开具体的Cache实例进行细粒度操作。

例如：

// caches 是 CacheStorage 实例 const cache = await caches.open('my-cache'); // cache 是 Cache 实例 await cache.put('/app.js', new Response('console.log("cached")'));

Cache 与 CacheStorage 全部方法对比表

📌 补充说明

• options参数（可选）可包含：

  • ignoreSearch: 忽略 URL 查询字符串（?a=1）。
  • ignoreMethod: 忽略请求方法（默认只匹配 GET）。
  • ignoreVary: 忽略Vary响应头。
  • prefixMatch: （非标准，部分浏览器可能支持）前缀匹配。

• 注意事项：

  • Cache.add()和addAll()会发起真实网络请求，因此需确保资源可访问。
  • Cache.put()要求传入的Response对象是未被使用过的（因为 Body 是不可重用的流）。
  • 所有方法均为异步，返回Promise。
  • CacheStorage是缓存的“顶层容器”，而Cache是具体缓存的“操作接口”。

💡 示例速览

// CacheStorage 操作 await caches.has('v1'); // 检查是否存在 const cache = await caches.open('v1'); // 获取 Cache 实例 await caches.delete('old-v1'); // 删除旧缓存 const names = await caches.keys(); // ['v1', 'assets'] // Cache 操作 await cache.add('/index.html'); await cache.put('/api/config', new Response(JSON.stringify({}))); const res = await cache.match('/index.html'); await cache.delete('/temp-file'); const requests = await cache.keys();

此表覆盖了截至2025 年Web 标准中Cache和CacheStorage接口的全部官方方法。

CacheStorage() 也有match方法？

Qwen3-Max

没有，CacheStorage接口本身没有match()方法。

✅ 正确理解：

• match()是Cache接口的方法，用于在某个具体缓存（Cache 实例）中查找匹配的请求。
• CacheStorage（即全局的caches）不直接提供match()方法，因为它管理的是多个命名缓存（Cache 对象）的集合，而不是缓存条目本身。

📌 常见误解澄清

你不能这样写：

// ❌ 错误！CacheStorage 没有 match 方法 const response = await caches.match('/some-url');

但你可以遍历所有缓存手动实现类似功能，或者更常见的是：先打开特定缓存再 match：

// ✅ 正确方式：先 open 一个 Cache，再 match const cache = await caches.open('my-cache'); const response = await cache.match('/some-url');

或者，在 Service Worker 的fetch事件中，通常使用：

self.addEventListener('fetch', (event) => { event.respondWith( caches.match(event.request) // ← 注意：这是全局快捷方式！ ); });

⚠️ 这里caches.match(request)看起来像是 CacheStorage 的方法，但实际上它是CacheStorage接口的一个便捷别名（convenience method）！

🔍 补充说明：caches.match()到底是什么？

根据 MDN 和 W3C 规范，CacheStorage确实定义了一个match()方法！

所以，结论更新如下：

✅CacheStorage确实有match()方法，但它不是用来查单个缓存，而是在所有已创建的缓存中按顺序查找第一个匹配项。

✅ 官方方法签名（来自规范）

caches.match(request, options?)

• 作用：遍历当前 origin 下所有缓存（按创建顺序？实际是实现定义），返回第一个匹配该请求的响应。
• 等价于：

  const keys = await caches.keys(); for (const key of keys) { const cache = await caches.open(key); const res = await cache.match(request, options); if (res) return res; } return undefined;

🆕 更新后的完整答案：

✅ 所以：CacheStorage确实有match()方法，但它的用途和Cache.match()不同。

💡 使用建议

• 如果你知道资源在哪个缓存（如'assets-v1'），用cache.match()更高效。
• 如果不确定缓存在哪个名字里（比如清理旧缓存后只剩最新版），可以用caches.match()全局查找。
• 在 Service Worker 的fetch事件中，caches.match(event.request)是常见模式，正是调用了CacheStorage.match()。

📚 参考资料

• MDN: CacheStorage.match()
• W3C Service Workers Spec - CacheStorage

✅总结：
是的，CacheStorage有match()方法，用于跨所有缓存查找第一个匹配项。此前认为“没有”是常见误解。