Cache：add() 方法

Baseline 已广泛支持

此功能已成熟，可跨多种设备和浏览器版本工作。它自 ⁨2018 年 4 月⁩ 起已在所有浏览器中可用。

安全上下文： 此功能仅在安全上下文（HTTPS）中可用，且支持此功能的浏览器数量有限。

注意：此功能在 Web Workers 中可用。

Cache 接口的 add() 方法接收一个 URL，检索该 URL，并将生成的响应对象添加到指定的缓存中。

add() 方法在功能上等同于以下代码：

fetch(url).then((response) => {
  if (!response.ok) {
    throw new TypeError("bad response status");
  }
  return cache.put(url, response);
});

对于更复杂的操作，您需要直接使用 Cache.put()。

注意： add() 将覆盖缓存中先前存储的与请求匹配的任何键/值对。

语法

add(request)

要添加到缓存的资源的请求。这可以是一个 Request 对象或一个 URL。

此参数用作 Request() 构造函数的参数，因此 URL 遵循与该构造函数相同的规则。特别是，URL 可以相对于基本 URL，在窗口上下文中是文档的 baseURI，在 worker 上下文中是 WorkerGlobalScope.location。

一个 Promise，解析为 undefined。

URL 协议不是 http 或 https。

Response 状态不在 200 范围内（即，不是成功的响应）。这会在请求不成功时发生，也会在请求是跨域无 CORS 请求时发生（在这种情况下，报告的状态始终为 0）。

此代码块等待 InstallEvent 触发，然后调用 waitUntil() 来处理应用程序的安装过程。这包括调用 CacheStorage.open 来创建一个新缓存，然后使用 Cache.add 将一个资源添加到其中。

this.addEventListener("install", (event) => {
  event.waitUntil(caches.open("v1").then((cache) => cache.add("/index.html")));
});

规范
Service Workers # cache-add

此页面最后修改时间为 ⁨2025年6月24日⁩，作者为 MDN 贡献者。