缓存：add() 方法

安全上下文：此功能仅在安全上下文（HTTPS）中可用，在某些或所有支持的浏览器中可用。

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

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

add() 方法在功能上等效于以下内容

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

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

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

语法

js
add(request)

参数

request

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

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

返回值

一个Promise，它解析为undefined。

异常

TypeError

URL 方案不是http 或https。

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

示例

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

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

规范

规范
Service Workers
# cache-add

浏览器兼容性

BCD 表仅在启用了 JavaScript 的浏览器中加载。

另请参阅