Cache.add()

实验性: 这是一项实验性技术
在将其用于生产之前,请仔细检查浏览器兼容性表格

Cache接口的 add() 方法接受一个 URL 作为参数,请求参数指定的 URL,并将返回的 response 对象添加到给定的 cache 中。 add() 方法在功能上等同于以下代码:

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

对于更复杂的操作,你可以直接使用Cache.put()这个 API。

备注: add() 将会覆盖之前存储在 cache 中与 request 匹配的任何 key/value 对。

备注:之前的 Cache (Blink 和 Gecko 内核版本) 在实现Cache.add, Cache.addAll, 和 Cache.put 的策略是在 response 结果完全写入缓存后才会 resolve 当前的 promise。更新后的规范版本中一旦条目被记录到数据库就会 resolve 当前的 promise,即使当前 response 结果还在传输中。

语法

js
cache.add(request).then(function () {
  //request has been added to the cache
});

参数

request

要添加到 cache 的 request。它可以是一个 Request 对象,也可以是 URL。

返回值

void 返回值的 Promise

Exceptions

Exception Happens when
TypeError URL 的协议不是 httphttps。请求返回的 http 状态码不是 2xx (不是一个成功的响应) 。这种情况常常发生在请求不成功,或者是一个没有配置 CORS 的跨域请求(这种情况下返回的状态码永远是 0)。

示例

下面的代码块等待 InstallEvent 事件触发,然后运行 waitUntil 来处理该应用程序的安装过程。包括调用 CacheStorage.open 来创建一个新的缓存,然后使用 Cache.add 来添加一个请求资源到该缓存。

js
this.addEventListener("install", function (event) {
  event.waitUntil(
    caches.open("v1").then(function (cache) {
      return cache.add("/sw-test/index.html");
    }),
  );
});

规范

Specification
Service Workers
# cache-add

浏览器兼容性

BCD tables only load in the browser

参见