recursal/MDN huggingface dataset:
ServiceWorker.state
===================

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

ServiceWorker 接口的这个只读的**state**属性返回一个代表 service worker 当前状态的字符串。值可以是以下这些：installing, installed, activating, activated，或者是 redundant.语法
--
```

someURL = ServiceWorker.state
```

### 值

一个 `ServiceWorkerState` (en-US) 的定义值 (see the spec.)

示例
--

这块代码出自 service worker registration-events sample (live demo). 代码监听了任何`ServiceWorker.state`中的改变，并返回它的值。


```js
var serviceWorker;
if (registration.installing) {
  serviceWorker = registration.installing;
  document.querySelector("#kind").textContent = "installing";
} else if (registration.waiting) {
  serviceWorker = registration.waiting;
  document.querySelector("#kind").textContent = "waiting";
} else if (registration.active) {
  serviceWorker = registration.active;
  document.querySelector("#kind").textContent = "active";
}

if (serviceWorker) {
  logState(serviceWorker.state);
  serviceWorker.addEventListener("statechange", function (e) {
    logState(e.target.state);
  });
}
```

规范
--

| Specification |
| --- |
| Service Workers # service-worker-state |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
PushMessageData.json()
======================

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

`PushMessageData` (en-US) 接口的 \*\*`json()`\*\*方法将推送消息数据提取为 一个 JSON 对象。

Syntax
------


```js
let massage_Json = PushEvent.data.json();
```

### Parameters

None.

### Returns

A JSON object.

Examples
--------


```js
self.addEventListener("push", function (event) {
  var jsonObj = event.data.json();

  // do something with your JSON
});
```

Specifications
--------------

| Specification |
| --- |
| Push API # dom-pushmessagedata-json |

Browser Compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Using the Push API (en-US)
ChannelMergerNode()
===================

**`ChannelMergerNode()`** 构造函数生成新的 `ChannelMergerNode` 对象实例。

语法
--


```js
var myNode = new ChannelMergerNode(context, options);
```

### 参数

*从字典* *`AudioNodeOptions` 继承。*

*context*

`BaseAudioContext` (en-US) 代表你想要关联的音频上下文。

*options* 可选

定义你希望 `ChannelMergerNode` 具有的属性的 `ChannelMergerOptions` 字典对象（它还继承了 `AudioNodeOptions` 字典中定义的选项）：

* `numberOfInputs`: 定义了 `ChannelMergerNode` 应该拥有的输入数量。如果没有指定，使用默认值 6。

### 返回值

一个新的 `ChannelMergerNode` 对象实例。

例子
--


```js
var ac = new AudioContext();

var options = {
  numberOfInputs: 2,
};

var myMerger = new ChannelMergerNode(ac, options);
```

规格
--

| Specification |
| --- |
| Web Audio API # dom-channelmergernode-constructor-channelmergernode |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
ReadableStreamDefaultController.close()
=======================================

`ReadableStreamDefaultController` 接口的 **`close()`** 方法用于关闭关联的流。

reader 将仍然可以从流中读取任何先前入队的数据块，但是一旦读取这些数据块，流将被关闭。如果你想完全的丢弃这个流并且丢弃任何入队的数据块，你可以使用 `ReadableStream.cancel()` 或者 `ReadableStreamDefaultReader.cancel()`。

语法
--


```js
close()
```

### 参数

无。

### 返回值

无（`undefined`）。

### 异常

`TypeError`

如果源对象不是 `ReadableStreamDefaultController` 则抛出该异常。

示例
--

在下面的简单示例中，使用构造函数创建一个自定义的 `ReadableStream`（有关完整代码，参见我们的简单随机流展示）。`start()` 函数每秒生成一个随机字符串并且将他们送入流中。`cancel()` 函数用于在 `ReadableStream.cancel()` 被调用时停止随机字符串的生成。

当按下按钮时，将停止生成，使用 `ReadableStreamDefaultController.close()` 关闭流，并运行另一个函数以读取流中的数据。


```js
const stream = new ReadableStream({
  start(controller) {
    interval = setInterval(() => {
      let string = randomChars();
      // 将随机字符串添加到流
      controller.enqueue(string);
      // 在屏幕上展示
      let listItem = document.createElement("li");
      listItem.textContent = string;
      list1.appendChild(listItem);
    }, 1000);
    button.addEventListener("click", function () {
      clearInterval(interval);
      fetchStream();
      controller.close();
    });
  },
  pull(controller) {
    // 在这个例子中不使用 pull
  },
  cancel() {
    // 如果取消了 reader，则会调用该函数，
    // 所以我们应该在这里停止生成字符串
    clearInterval(interval);
  },
});
```

规范
--

| Specification |
| --- |
| Streams Standard # ref-for-rs-default-controller-close① |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 使用可读流
* `ReadableStreamDefaultController`
ReadableStreamDefaultController.error()
=======================================

`ReadableStreamDefaultController` 接口的 **`error()`** 方法会导致未来任何与关联流的交互出错。

**备注：** `error()` 方法可以被多次调用，并且可以在流不可读时被调用。

语法
--


```js
error(e)
```

### 参数

`e`

你需要在后面使用的错误信息。

### 返回值

无 (`undefined`)。

### 异常

`TypeError`

如果源对象不是 `ReadableStreamDefaultController` 则抛出异常。

示例
--

规范中具有底层推送源和背压支持的流提供了一个很好的例子，说明如何使用 `ReadablestreamDefaultController.desiredSize` 去手动检测流何时已满并使用背压，以及流所依赖的系统在部分失效的情况下如何使用 `error()` 去手动触发一个流错误。

规范
--

| Specification |
| --- |
| Streams Standard # rs-default-controller-error |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 使用可读流
* `ReadableStreamDefaultController`
ReadableStreamDefaultController.enqueue()
=========================================

`ReadableStreamDefaultController` 接口的 **`enqueue()`** 方法将给定数据块送入到关联的流中。

语法
--


```js
enqueue(chunk)
```

### 参数

`chunk`

要送入的数据块。

### 返回值

无 (`undefined`)。

### 异常

`TypeError`

如果源对象不是 `ReadableStreamDefaultController` 则抛出该异常。

示例
--

在下面的简单示例中，使用构造函数创建一个自定义的 `ReadableStream` （有关完整代码，参见我们的简单随机流展示）。`start()` 函数每秒生成一个随机字符串并且将他们送入流中。`cancel()` 函数用于在 `ReadableStream.cancel()` 被调用时停止随机字符串的生成。

当按下按钮时，将停止生成，使用 `ReadableStreamDefaultController.close()` 关闭流，并运行另一个函数以读取流中的数据。


```js
const stream = new ReadableStream({
  start(controller) {
    interval = setInterval(() => {
      let string = randomChars();
      // 将随机字符串添加到流
      controller.enqueue(string);
      // 在屏幕上展示
      let listItem = document.createElement("li");
      listItem.textContent = string;
      list1.appendChild(listItem);
    }, 1000);
    button.addEventListener("click", function () {
      clearInterval(interval);
      fetchStream();
      controller.close();
    });
  },
  pull(controller) {
    // 在这个例子中不使用 pull
  },
  cancel() {
    // 如果取消了 reader，则会调用该函数，
    // 所以我们应该在这里停止生成字符串
    clearInterval(interval);
  },
});
```

规范
--

| Specification |
| --- |
| Streams Standard # ref-for-rs-default-controller-enqueue① |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 使用可读流
* `ReadableStreamDefaultController`
ReadableStreamDefaultController.desiredSize
===========================================

`ReadableStreamDefaultController` 接口的只读属性 **`desiredSize`** 返回填充满流的内部队列需要的大小。

值
-

一个整数。请注意，在队列已满的情况下，则可能是负数。

示例
--

规范中具有底层推送源和背压支持的流提供了一个很好的例子，说明如何使用 `desiredSize` 去手动检测流何时已满并应使用背压，以及使用 `ReadablestreamDefaultController.error()` 在流所依赖的系统一部分失效的情况去手动触发一个流错误。

规范
--

| Specification |
| --- |
| Streams Standard # ref-for-rs-default-controller-desired-size② |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 使用可读流
* `ReadableStreamDefaultController`
Cache.match()
=============

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

`Cache` 接口的 **`match()`** 方法，返回一个 `Promise` 解析为 (resolve to) 与 `Cache` 对象中的第一个匹配请求相关联的`Response` 。如果没有找到匹配，`Promise` 解析为 `undefined`。

语法
--


```js
cache.match(request, { options }).then(function (response) {
  //操作 response
});
```

### 返回值

一个 `Promise` 对象，该对象解析为第一个匹配请求的 `Response` 对象，如果没有匹配到，则解析到 `undefined` 。

**备注：** `Cache.match()` 基本上和 `Cache.matchAll()` 一样，只不过 `Cache.match()` 只解析为 `response[0]` （第一个匹配的响应 (response) 对象）而不是 `response[]` （所有响应对象组成的数组）。

### 参数

request

在`Cache`对象中查找的`Request`对象对应的 response。这个`Request`可以是 object 或者是一个 URL.

options 可选

一个为 `match` 操作设置选项的对象。有效的选项如下：

* `ignoreSearch`: 一个 `Boolean` (en-US) 值用来设置是否忽略 url 中的 query 部分。例如，如果该参数设置为 `true` ，那么 `http://foo.com/?value=bar` 中的 `?value=bar` 部分就会在匹配中被忽略。该选项默认为 `false`。
* `ignoreMethod`: 一个 `Boolean` (en-US) 值，如果设置为 `true`在匹配时就不会验证 `Request` 对象的`http` 方法 (通常只允许是 `GET` 或 `HEAD`。) 该参数默认值为 `false`。
* `ignoreVary`: 一个 `Boolean` (en-US) 值，该值如果为 `true` 则匹配时不进行 `VARY` 部分的匹配。例如，如果一个 URL 匹配，此时无论`Response`对象是否包含`VARY`头部，都会认为是成功匹配。该参数默认为 `false`。
* `cacheName`: 一个 `DOMString` ，代表一个具体的要被搜索的缓存。注意该选项被 `Cache.match()` 方法忽略。

例子
--

这个是个来自 custom offline page 的例子 (live demo)。

下面的例子在请求失败时提供特定的数据。 `catch()` 在 `fetch()` 的调用抛出异常时触发。在 `catch()` 语句中， `match()`用来返回正确的响应。

在这个例子中，我们决定只缓存通过 GET 取得的 HTML 文档。如果 `if()` 条件是 false，那么这个 fetch 处理器就不会处理这个请求。如果还有其他的 fetch 处理器被注册，它们将有机会调用 `event.respondWith()` 如果没有 fetch 处理器调用 `event.respondWith()` ，该请求就会像没有 service worker 介入一样由浏览器处理。如果 `fetch()` 返回了有效的 HTTP 响应，相应码是 4xx 或 5xx，那么`catch()` 就**不会**被调用。


```js
self.addEventListener("fetch", function (event) {
  // 我们只想在用 GET 方法请求 HTML 文档时调用 event.respondWith()。
  if (
    event.request.method === "GET" &&
    event.request.headers.get("accept").indexOf("text/html") !== -1
  ) {
    console.log("Handling fetch event for", event.request.url);
    event.respondWith(
      fetch(event.request).catch(function (e) {
        console.error("Fetch failed; returning offline page instead.", e);
        return caches.open(OFFLINE\_CACHE).then(function (cache) {
          return cache.match(OFFLINE\_URL);
        });
      }),
    );
  }
});
```

规范
--

| Specification |
| --- |
| Service Workers # cache-match |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参阅
--

* Using Service Workers (en-US)
* `Cache`
* `WorkerGlobalScope.caches` (en-US)
Cache.delete()
==============

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

`Cache` 接口的 **`delete()`** 方法查询 request 为 key 的 `Cache` 条目，如果找到，则删除该 `Cache` 条目并返回 resolve 为 true 的 `Promise` 。如果没有找到，则返回 resolve 为 false 的 `Promise` 。

语法
--


```js
cache.delete(request,{options}).then(function(true) {
  //your cache entry has been deleted
});
```

### 返回值

如果 cache 条目被删除，则返回 resolve 为 true 的 `Promise`，否则，返回 resolve 为 false 的 `Promise`。

### 参数

request

请求删除的 `Request`。

options 可选

一个对象，其属性控制删除操作中如何处理匹配缓存。可用的选项是：

* `ignoreSearch`: 一个 `Boolean` (en-US) 值，指定匹配进程中是否忽略 `url` 中的查询字符串。如果设置为 `true`，`http://foo.com/?value=bar` 中的 `?value=bar` 部分在执行匹配时会被忽略。默认为 `false`。
* `ignoreMethod`: 一个 `Boolean` (en-US) 值，当设置为 `true` 时，将阻止匹配操作验证{domxref("Request")}} HTTP 方法（通常只允许 GET 和 HEAD）。默认为 `false`。
* `ignoreVary`: 一个 `Boolean` (en-US) 值，当设置为 `true` 时，告诉匹配操作不执行 `VARY` 头匹配。In other words, if the URL matches you will get a match regardless of whether the `Response` object has a `VARY` header. 默认为 `false`。
* `cacheName`: A `DOMString` that represents a specific cache to search within. Note that this option is ignored by `Cache.delete()`.

示例
--


```js
caches.open("v1").then(function (cache) {
  cache.delete("/images/image.png").then(function (response) {
    someUIUpdateFunction();
  });
});
```

规范
--

| Specification |
| --- |
| Service Workers # cache-delete |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* Using Service Workers (en-US)
* `Cache`
* `WorkerGlobalScope.caches` (en-US)
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 的协议不是 `http` 或 `https。`请求返回的 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 with JavaScript enabled. Enable JavaScript to view data.

参见
--

* Using Service Workers (en-US)
* `Cache`
* `WorkerGlobalScope.caches` (en-US)
Cache.matchAll()
================

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

`Cache` 接口的 **`matchAll()`** 方法返回一个 `Promise` ，其 resolve 为 `Cache` 对象中所有匹配请求的数组。

语法
--


```js
cache.matchAll(request, { options }).then(function (response) {
  //do something with the response array
});
```

### 返回值

一个 `Promise`，resolve 为 `Cache` 对象中所有匹配请求的数组。

**备注：** `Cache.match()` 基本上与`Cache.matchAll()` 相同，除了它 resolve 为 `response[0]` (即第一个匹配响应) 而不是 `response` (数组中所有匹配的响应)。

### 参数

request 可选

`Cache` 中你尝试查找的 The `Request` . 如果忽略这一参数，你将获取到 cache 中所有 `response` 的副本。

options 可选

一个选项对象，允许你为 `match` 操作中要做的匹配设置特定控制选项。可用选项包括：

* `ignoreSearch`: 一个 `Boolean` (en-US) 值用来设置匹配操作是否忽略 url 中的 query 部分。如果该参数设置为 `true` ，那么 `http://foo.com/?value=bar` 中的 `?value=bar` 部分就会在匹配中被忽略。该选项默认为 `false`。
* `ignoreMethod`: 一个 `Boolean` (en-US) 值，如果设置为 `true`在匹配时就不会验证 `Request` 对象的`http` 方法 (通常只允许是 `GET` 或 `HEAD` 。) 该参数默认值为 `false`。
* `ignoreVary`: 一个 `Boolean` (en-US) 值，该值如果为 `true` 则匹配时不进行 `VARY` 部分的匹配。例如，如果一个 URL 匹配，此时无论`Response`对象是否包含`VARY`头部，都会认为是成功匹配。该参数默认为 `false`。
* `cacheName`: 一个 `DOMString` ，代表一个具体的要被搜索的缓存。注意该选项被 **`Cache.matchAll()`** 方法忽略。

示例
--


```js
caches.open("v1").then(function (cache) {
  cache.matchAll("/images/").then(function (response) {
    response.forEach(function (element, index, array) {
      cache.delete(element);
    });
  });
});
```

规范
--

| Specification |
| --- |
| Service Workers # cache-matchall |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Using Service Workers (en-US)
* `Cache`
* `WorkerGlobalScope.caches` (en-US)
Cache.keys()
============

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

`Cache` 接口的 **`keys()`** 方法返回一个 `Promise` ，这个 `Promise` 将解析为一个`Cache` 键的数组。

请求将以它们被插入的顺序返回。

**备注：** 具有相同 URL 但不同请求头的请求，如果它们的响应头中有 VARY 头部，则他们可以被返回。

语法
--


```js
cache.keys(request, { options }).then(function (keys) {
  //do something with your array of requests
});
```

### 返回值

返回一个解析为 `Cache` 键数组的 `Promise`。

### 参数

request 可选

如果一个相关键被指定，则返对应的 `Request` 。

options 可选

一个对象，它的属性决定了 keys 操作中的匹配操作是如何执行的。可选的属性有：

* `ignoreSearch`: 一个 `Boolean` (en-US) 值，指定了匹配操作是否忽略 url 中的查询部分。如果为 true，在执行匹配操作时， `http://foo.com/?value=bar` 的 `?value=bar` 部分将会被忽。默认为 `false`。
* `ignoreMethod`: 一个 `Boolean` (en-US) 值，当为 true 时，将会阻止匹配操作验证 `Request` 的 HTTP 方法（通常只有 GET 和 HEAD 方法被允许）。默认为 false。
* `ignoreVary`: 一个 `Boolean` (en-US) 值，当为 `true 时，告诉匹配操作不要验证 VARY 头部。换句话说，如果 URL 匹配，你会得到一个匹配而不管` `Response` 对象是否有 VARY 头部。默认为 false。
* `cacheName`: 一个 `DOMString` 值，描述了在一个特定的 cache 中进行匹配。注意这个选项会被 Cache.keys() 方法忽略。

示例
--


```js
caches.open("v1").then(function (cache) {
  cache.keys().then(function (keys) {
    keys.forEach(function (request, index, array) {
      cache.delete(request);
    });
  });
});
```

规范
--

| Specification |
| --- |
| Service Workers # cache-keys |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* Using Service Workers (en-US)
* `Cache`
* `WorkerGlobalScope.caches` (en-US)
Cache.put()
===========

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

`Cache` 接口的 **`put()`** 方法 允许将键/值对添加到当前的 `Cache` 对象中。

通常，你只想 `fetch()` 一个或多个请求，然后直接添加结果到 cache 中。这种情况下，最好使用 `Cache.add()`/`Cache.addAll()`，因为它们是一个或者多个这些操作的便捷方法。


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


**备注：** `put()` 将覆盖先前存储在匹配请求的 cache 中的任何键/值对。

**备注：** `Cache.add`/`Cache.addAll` 不会缓存 `Response.status` 值不在 200 范围内的响应，而 `Cache.put` 允许你存储任何请求/响应对。因此，`Cache.add`/`Cache.addAll` 不能用于不透明的响应，而 `Cache.put` 可以。

**备注：** 当响应主体完全写入磁盘时，初始 Cache 执行 (在 Blink 和 Gecko 中) resolve `Cache.add`、`Cache.addAll` 和 `Cache.put` promise. 更新的规范版本中声明：即使响应主体仍在流式传输，一旦条目被记录到数据库中，浏览器就可以 resolve promise.

语法
--
```

cache.put(request, response).then(function() {
  // request/response pair has been added to the cache
});
```

### 参数

request

The `Request` you want to add to the cache.

response

The `Response` you want to match up to the request.

### 返回值

A `Promise` that resolves with void.

**备注：** The promise will reject with a `TypeError` if the URL scheme is not `http` or `https`.

示例
--

This example is from the MDN sw-test example (see sw-test running live). Here we wait for a `FetchEvent` to fire. We construct a custom response like so:

1. Check whether a match for the request is found in the `CacheStorage` using `CacheStorage.match()`. If so, serve that.
2. If not, open the `v1` cache using `open()`, put the default network request in the cache using `Cache.put()` and return a clone of the default network request using `return response.clone()`. Clone is needed because `put()` consumes the response body.
3. If this fails (e.g., because the network is down), return a fallback response.


```js
var response;
var cachedResponse = caches
  .match(event.request)
  .catch(function () {
    return fetch(event.request);
  })
  .then(function (r) {
    response = r;
    caches.open("v1").then(function (cache) {
      cache.put(event.request, response);
    });
    return response.clone();
  })
  .catch(function () {
    return caches.match("/sw-test/gallery/myLittleVader.jpg");
  });
```

规范
--

| Specification |
| --- |
| Service Workers # cache-put |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Using Service Workers (en-US)
* `Cache`
* `WorkerGlobalScope.caches` (en-US)
Cache.addAll()
==============

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

概要
--

`Cache` 接口的 **`addAll()`** 方法接受一个 URL 数组，检索它们，并将生成的 response 对象添加到给定的缓存中。在检索期间创建的 request 对象成为存储的 response 操作的 key。

**备注：** `addAll()` will overwrite any key/value pairs previously stored in the cache that match the request, but will fail if a resulting `put()` operation would overwrite a previous cache entry created by the same `addAll()` method.

**备注：** Initial Cache implementations (in both Blink and Gecko) resolve `Cache.add`, `Cache.addAll`, and `Cache.put` promises when the response body is fully written to storage. More recent spec versions have newer language stating that the browser can resolve the promise as soon as the entry is recorded in the database even if the response body is still streaming in.

语法
--


```js
cache.addAll(requests[]).then(function() {
  //requests have been added to the cache
});
```

### 参数

requests

要获取并添加到缓存的字符串 URL 数组。

### 返回值

A `Promise` that resolves with void.

### Exceptions

| **Exception** | **Happens when** |
| --- | --- |
| `TypeError` | The URL scheme is not `http` or `https`.The Response status is not in the 200 range (i.e., not a successful response.) This occurs if the request does not return successfully, but also if the request is a *cross-origin no-cors* request (in which case the reported status is always 0.) |

示例
--

此代码块等待一个 `InstallEvent` 事件触发，然后运行 `waitUntil` 来处理该应用程序的安装进程。包括调用 `CacheStorage.open` 创建一个新的 cache，然后使用 `addAll()` 添加一系列资源。


```js
this.addEventListener("install", function (event) {
  event.waitUntil(
    caches.open("v1").then(function (cache) {
      return cache.addAll([
        "/sw-test/",
        "/sw-test/index.html",
        "/sw-test/style.css",
        "/sw-test/app.js",
        "/sw-test/image-list.js",
        "/sw-test/star-wars-logo.jpg",
        "/sw-test/gallery/",
        "/sw-test/gallery/bountyHunters.jpg",
        "/sw-test/gallery/myLittleVader.jpg",
        "/sw-test/gallery/snowTroopers.jpg",
      ]);
    }),
  );
});
```

### 规范

| Specification |
| --- |
| Service Workers # cache-addAll |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* Using Service Workers (en-US)
* `Cache`
* `WorkerGlobalScope.caches` (en-US)
Location: hash
==============

`Location` 接口的 **`hash`** 属性返回一个 `USVString`，其中会包含 URL 标识中的 `'#'` 和 后面 URL 片段标识符。

这里 fragment 不会经过百分比编码（URL 编码）。如果 URL 中没有 fragment，该属性会包含一个空字符串，`""`

Syntax
------
```

string = object.hash;
object.hash = string;
```

Examples
--------


```html
<a id="myAnchor" href="/zh-CN/docs/Location.href#Examples">Examples</a>
<script>
 var anchor = document.getElementById("myAnchor");
 console.log(anchor.hash); // 返回'#Examples'
</script>
```

Specifications
--------------

| Specification |
| --- |
| HTML Standard # dom-location-hash-dev |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Location: toString()
====================

**`toString()`**`Location`接口的 stringifier 方法返回包含整个 URL 的`USVString`。它是`Location.href`的只读版本。

句法
--
```

string = object.toString();
```

例子
--


```js
// Let's imagine an <a id="myAnchor" href="https://developer.mozilla.org/zh-CN/docs/Location/toString"> element is in the document
var anchor = document.getElementById("myAnchor");
var result = anchor.toString(); // Returns: 'https://developer.mozilla.org/zh-CN/docs/Location/toString'
```

规范
--

| Specification |
| --- |
| HTML Standard # dom-location-href-dev |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Location.replace()
==================

**`Location.replace()`** 方法以给定的 URL 来替换当前的资源。与 `assign()` 方法 不同的是，调用 `replace()` 方法后，当前页面不会保存到会话历史中（session `History`），这样，用户点击*回退*按钮时，将不会再跳转到该页面。

因违反安全规则导致的赋值失败，浏览器将会抛出类型为 `SECURITY_ERROR` 的 `DOMException` 异常。当调用该方法的脚本所属的源与拥有 `Location` 对象所属源不同时，通常情况会发生这种异常，此时通常该脚本是存在不同的域下。

如果 URL 无效，浏览器也会抛出 `SYNTAX_ERROR` 类型的 `DOMException` 异常。

语法
--
```

object.replace(url);
```

### 参数

*url*

`DOMString` 类型，指定所导航到的页面的 URL 地址。

示例
--


```js
// Navigate to the Location.reload article by replacing this page
window.location.replace(
  "https://developer.mozilla.org/zh-CN/docs/Web/API/Location/reload",
);
```

规范
--

| Specification |
| --- |
| HTML Standard # dom-location-replace-dev |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `Location` 对象。
* 类似方法：`Location.assign()` 和 `Location.reload()`。
location：protocol 属性
====================

`Location` 接口的 **`protocol`** 属性是一个表示 URL 协议方案的字符串，包含结尾的 `':'`。

值
-

一个字符串。

示例
--


```js
// 在文档中加入一个 <a id="myAnchor" href="https://developer.mozilla.org/zh-CN/Location.protocol"> 元素
const anchor = document.getElementById("myAnchor");
const result = anchor.protocol; // 返回：'https:'
```

规范
--

| Specification |
| --- |
| HTML Standard # dom-location-protocol-dev |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
location：search 属性
==================

`Location` 接口的 **`search`** 属性会返回一段*查询字符串*，其中包含 `'?'` 以及跟随其后的一串 URL 查询参数。

现代浏览器提供 `URLSearchParams` 和 `URL.searchParams` 两个接口，使得从查询字符串中解析出查询参数变得更加容易。

值
-

一个字符串。

示例
--


```js
// 假设文档中有一个 <a id="myAnchor" href="/en-US/docs/Location.search?q=123"> 元素
const anchor = document.getElementById("myAnchor");
const queryString = anchor.search; // 返回：'?q=123'

// 进一步解析：
const params = new URLSearchParams(queryString);
const q = parseInt(params.get("q")); // 是数字 123
```

规范
--

| Specification |
| --- |
| HTML Standard # dom-location-search-dev |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.