AudioScheduledSourceNode.stop() - Web API

AudioScheduledSourceNode.stop()
===============================

`stop()` は `AudioScheduledSourceNode` のメソッドは、指定された時刻に音の再生が停止するようにスケジュールします。時刻を指定しない場合は、音は直ちに再生を停止します。

同じノードで `stop()` を呼び出すたびに、以前にスケジュールされた停止時刻のうち、まだ発生していない時刻が指定された時刻に置き換わります。ノードが既に停止している場合、このメソッドは何の効果もありません。

**メモ:** ノードの予定開始時刻の前に予定停止時刻が発生した場合、ノードは再生を開始しません。

構文
--

```js
stop()
stop(when)
```

### 引数

`when` 省略可

音の再生を停止する時刻を、秒単位で指定します。この値は `AudioContext` がその `currentTime` 属性に使用しているのと同じ時間座標系で指定されます。この引数を除外したり、 0 を指定したり、負の値を渡したりすると、音の再生が即座に停止します。

### 返値

なし (`undefined`)。

### 例外

`InvalidStateNode` `DOMException`

ノードが `start()` の呼び出しによって開始されていない場合に発生します。

`RangeError`

`when` に指定した値が負である場合に発生します。

例
-

この例では、発振器ノードを起動し、すぐに演奏を始め、 1 つ目で演奏を停止するようにスケジュールしています。停止時間は、音声コンテキストの現在時刻を `AudioContext.currentTime` から取り出し、 1 秒を足すことで決定されます。

```js
context = new AudioContext();
osc = context.createOscillator();
osc.connect(context.destination);

/\* しばらく後に停止させたい場合は、引数として秒数を指定します。 \*/

osc.start();
osc.stop(context.currentTime + 1);
```

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-audioscheduledsourcenode-stop |

ブラウザーの互換性
---------

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

参考
--

* ウェブオーディオ API の使用
* `start()`
* `AudioScheduledSourceNode`
* `AudioBufferSourceNode`
* `ConstantSourceNode`
* `OscillatorNode`


DeviceMotionEventAcceleration: x プロパティ - Web API

DeviceMotionEventAcceleration: x プロパティ
======================================

**`DeviceMotionEventAcceleration.x`** は読み取り専用のプロパティで、 `DeviceMotionEventAcceleration` オブジェクトの X 軸方向に発生した加速度を示します。

値
-

`double` 値で、 X 軸方向の加速度を示します。
 詳しくは加速度センサーの値についてを参照してください。

仕様書
---

| Specification |
| --- |
| DeviceOrientation Event Specification # dom-devicemotioneventacceleration-x |

ブラウザーの互換性
---------

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

関連情報
----

* `DeviceMotionEventAcceleration.y`
* `DeviceMotionEventAcceleration.z`


DeviceMotionEventAcceleration: y プロパティ - Web API

DeviceMotionEventAcceleration: y プロパティ
======================================

**`DeviceMotionEventAcceleration.y`** は読み取り専用のプロパティで、 `DeviceMotionEventAcceleration` オブジェクトの Y 軸方向に発生した加速度を示します。

値
-

`double` 値で、 Y 軸方向の加速度を示します。
 詳しくは加速度センサーの値についてを参照してください。

仕様書
---

| Specification |
| --- |
| DeviceOrientation Event Specification # dom-devicemotioneventacceleration-y |

ブラウザーの互換性
---------

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

関連情報
----

* `DeviceMotionEventAcceleration.x`
* `DeviceMotionEventAcceleration.z`


DeviceMotionEventAcceleration: z プロパティ - Web API

DeviceMotionEventAcceleration: z プロパティ
======================================

**`DeviceMotionEventAcceleration.z`** は読み取り専用のプロパティで、 `DeviceMotionEventAcceleration` オブジェクトの Z 軸方向に発生した加速度を示します。

値
-

`double` 値で、 Z 軸方向の加速度を示します。
 詳しくは加速度センサーの値についてを参照してください。

仕様書
---

| Specification |
| --- |
| DeviceOrientation Event Specification # dom-devicemotioneventacceleration-z |

ブラウザーの互換性
---------

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

関連情報
----

* `DeviceMotionEventAcceleration.x`
* `DeviceMotionEventAcceleration.y`


MIDIPort: close() メソッド - Web API

MIDIPort: close() メソッド
======================

**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

`MIDIPort` インターフェイスの **`close()`** メソッドは、この `MIDIPort` に接続された MIDI デバイスへのアクセスを利用不可能にします。

ポートが正常に閉じられると、新しい `MIDIConnectionEvent` が `MIDIPort statechange` と `MIDIAccess statechange` イベントに渡され、`MIDIPort.connection` プロパティが `"closed"` になります。

構文
--

```js
close()
```

### 引数

なし

### 返値

ポートが閉じられると解決する `Promise` を返します。

例
-

以下の例では、出力ポートを閉じます。

```js
let output = midiAccess.outputs.get(portID);
output.close(); // ポートを閉じる
```

仕様書
---

| Specification |
| --- |
| Web MIDI API # dom-midiport-close |

ブラウザーの互換性
---------

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


MIDIPort: state プロパティ - Web API

MIDIPort: state プロパティ
=====================

**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

`MIDIPort` インターフェイスの読み取り専用プロパティ **`state`** は、ポートの状態を返します。

値
-

ポートの状態を表す文字列で、以下のいずれかです。

`"disconnected"`

この `MIDIPort` が表すデバイスは、システムから切断されています。

`"connected"`

この `MIDIPort` が表すデバイスは、現在接続されています。

例
-

以下の例では、すべての入力ポートを走査し、それぞれの状態をコンソールに出力します。

```js
for (const entry of midiAccess.inputs) {
  const input = entry[1];
  console.log(input.state);
}
```

仕様書
---

| Specification |
| --- |
| Web MIDI API # dom-midiport-state |

ブラウザーの互換性
---------

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


MIDIPort: version プロパティ - Web API

MIDIPort: version プロパティ
=======================

**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

`MIDIPort` インターフェイスの読み取り専用プロパティ **`version`** は、ポートのバージョンを返します。

値
-

ポートのバージョンを表す文字列です。

例
-

以下の例では、すべての入力ポートを走査し、それぞれのバージョンをコンソールに出力します。

```js
for (const entry of midiAccess.inputs) {
  const input = entry[1];
  console.log(input.version);
}
```

仕様書
---

| Specification |
| --- |
| Web MIDI API # dom-midiport-version |

ブラウザーの互換性
---------

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


MIDIPort: manufacturer プロパティ - Web API

MIDIPort: manufacturer プロパティ
============================

**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

`MIDIPort` インターフェイスの読み取り専用プロパティ **`manufacturer`** は、ポートの製造元を返します。

値
-

ポートの製造元を表す文字列です。

例
-

以下の例では、すべての入力ポートを走査し、それぞれの製造元をコンソールに出力します。

```js
for (const entry of midiAccess.inputs) {
  const input = entry[1];
  console.log(input.manufacturer);
}
```

仕様書
---

| Specification |
| --- |
| Web MIDI API # dom-midiport-manufacturer |

ブラウザーの互換性
---------

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


MIDIPort: connection プロパティ - Web API

MIDIPort: connection プロパティ
==========================

**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

`MIDIPort` インターフェイスの読み取り専用プロパティ **`connection`** は、このポートの接続状態を返します。

値
-

このポートの接続状態を表す文字列で、以下のいずれかです。

`"open"`

この `MIDIPort` が表すデバイスは既に開かれており、利用可能です。

`"closed"`

この `MIDIPort` が表すデバイスは開かれていないか、閉じられた後です。

`"pending"`

この `MIDIPort` が表すデバイスは開かれていますが、その後切断されました。

例
-

以下の例では、すべての入力ポートを走査し、それぞれの接続状態をコンソールに出力します。

```js
for (const entry of midiAccess.inputs) {
  const input = entry[1];
  console.log(input.connection);
}
```

仕様書
---

| Specification |
| --- |
| Web MIDI API # dom-midiport-connection |

ブラウザーの互換性
---------

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


MIDIPort: id プロパティ - Web API

MIDIPort: id プロパティ
==================

**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

`MIDIPort` インターフェイスの読み取り専用プロパティ **`id`** は、ポートの一意な ID を返します。

値
-

ポートの ID を表す文字列です。

例
-

以下の例では、すべての入力ポートを走査し、それぞれの ID をコンソールに出力します。

```js
for (const entry of midiAccess.inputs) {
  const input = entry[1];
  console.log(input.id);
}
```

仕様書
---

| Specification |
| --- |
| Web MIDI API # dom-midiport-id |

ブラウザーの互換性
---------

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


MIDIPort: open() メソッド - Web API

MIDIPort: open() メソッド
=====================

**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

`MIDIPort` インターフェイスの **`open()`** メソッドは、この `MIDIPort` に接続された MIDI デバイスを明示的に利用可能にします。

ポートを開くのに成功したら、新しい `MIDIConnectionEvent` が `MIDIPort statechange` と `MIDIAccess statechange` イベントに渡され、`MIDIPort.connection` プロパティが `"open"` になります。

このメソッドが呼ばれたときにポートが既に開かれている場合は、Promise は正常に解決します。

構文
--

```js
open()
```

### 引数

なし

### 返値

ポートへのアクセスを正常に得たら解決する `Promise` を返します。

### 例外

`InvalidAccessError` `DOMException`

ポートが利用不可能で開けない場合、Promise はこのエラーで拒否されます。

例
-

以下の例では、出力ポートを開きます。

```js
const output = midiAccess.outputs.get(portID);
output.open(); // ポートを開く
```

仕様書
---

| Specification |
| --- |
| Web MIDI API # dom-midiport-open |

ブラウザーの互換性
---------

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


MIDIPort: name プロパティ - Web API

MIDIPort: name プロパティ
====================

**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

`MIDIPort` インターフェイスの読み取り専用プロパティ **`name`** は、ポートのシステム名を返します。

値
-

ポートのシステム名を表す文字列です。

例
-

以下の例では、すべての入力ポートを走査し、それぞれの名前をコンソールに出力します。

```js
for (const entry of midiAccess.inputs) {
  const input = entry[1];
  console.log(input.name);
}
```

仕様書
---

| Specification |
| --- |
| Web MIDI API # dom-midiport-name |

ブラウザーの互換性
---------

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


MIDIPort: statechange イベント - Web API

MIDIPort: statechange イベント
==========================

**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

`MIDIPort` インターフェイスの **`statechange`** イベントは、ポートが開いた状態から閉じた状態に、または閉じた状態から開いた状態に変化した時発火します。

構文
--

`addEventListener()` のようなメソッドでイベント名を用いるか、イベントハンドラープロパティを設定します。

```js
addEventListener("statechange", (event) => {});

onstatechange = (event) => {};
```

イベント型
-----

`MIDIConnectionEvent` です。`Event` を継承しています。

Event

MIDIConnectionEventイベントプロパティ
---------

`MIDIConnectionEvent.port` 読取専用

接続または切断されたポートを表す `MIDIPort` のインスタンスへの参照を返します。

例
-

以下の例では、変わるたびに現在の `MIDIPort.state` を記録します。

```js
port.onstatechange = (event) => {
  console.log(port.state);
};
```

仕様書
---

| Specification |
| --- |
| Web MIDI API # dom-midiport-onstatechange |

ブラウザーの互換性
---------

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


MIDIPort: type プロパティ - Web API

MIDIPort: type プロパティ
====================

**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

`MIDIPort` インターフェイスの読み取り専用プロパティ **`type`** は、ポートの種類を返し、この MIDI ポートが入力ポートなのか出力ポートなのかを表します。

値
-

ポートの種類を表す文字列で、以下のいずれかです。

`"input"`

この `MIDIPort` は入力ポートです。

`"output"`

この `MIDIPort` は出力ポートです。

例
-

以下の例では、すべての入力ポートを走査し、その `type` をコンソールに出力します。

```js
for (const entry of midiAccess.inputs) {
  const input = entry[1];
  console.log(input.type); // 常に input のはず
}
```

仕様書
---

| Specification |
| --- |
| Web MIDI API # dom-midiport-type |

ブラウザーの互換性
---------

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


GravitySensor: GravitySensor() コンストラクター - Web API

GravitySensor: GravitySensor() コンストラクター
=======================================

**`GravitySensor()`** コンストラクターは、デバイスの 3 軸それぞれにかかっている重力の測定値を提供する新しい `GravitySensor` オブジェクトを生成します。

構文
--

```js
new GravitySensor()
new GravitySensor(options)
```

### 引数

`options` 省略可

以下のオプションがあります。

`frequency`

1 秒間にサンプルを何回取得したいかであり、`reading` イベントが呼ばれる 1 秒あたりの回数になります。整数または小数が使用でき、小数は 1 秒に 1 回未満の頻度を設定するのに用います。実際の取得頻度はデバイスハードウェアに依存するので、要求値より少なくなる可能性があります。デフォルトの頻度は下層のプラットフォームで定義された頻度です。

`referenceFrame`

リファレンスフレームを表すローカル座標系です。`'device'` または `'screen'` を設定できます。デフォルトは `'device'` です。

### 例外

`SecurityError` `DOMException`

この機能の使用が Permissions Policy によりブロックされました。

仕様書
---

| Specification |
| --- |
| Accelerometer # dom-gravitysensor-gravitysensor |

ブラウザーの互換性
---------

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

関連情報
----

* `reading` イベント


PublicKeyCredential.rawId - Web API

PublicKeyCredential.rawId
=========================

**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

**`rawId`** は `PublicKeyCredential` インターフェイスの読み取り専用プロパティで、資格情報の識別子が入った `ArrayBuffer` オブジェクトです。

`PublicKeyCredential.id` プロパティはこの識別子が base64url エンコードされたものです。

**メモ:** このプロパティは最上位のコンテキストでしか使えません。例えば `<iframe>` の中では利用できません。

### 値

`ArrayBuffer` で、資格情報の識別子が入っています。この識別子はグローバルに固有で、現在の `PublicKeyCredential` および関連する `AuthenticatorAssertionResponse` を指しています。

例
-

```js
const options = {
  challenge: new Uint8Array(26) /\* from the server \*/,
  rp: {
    name: "Example CORP",
    id: "login.example.com",
  },
  user: {
    id: new Uint8Array(26) /\* To be changed for each user \*/,
    name: "canand@example.com",
    displayName: "Carina Anand",
  },
  pubKeyCredParams: [
    {
      type: "public-key",
      alg: -7,
    },
  ],
};

navigator.credentials
  .create({ publicKey: options })
  .then((pubKeyCredential) => {
    const rawId = pubKeyCredential.rawId;
    // Do something with rawId
  })
  .catch((err) => {
    // Deal with any error
  });
```

仕様書
---

| Specification |
| --- |
| Web Authentication: An API for accessing Public Key Credentials - Level 3 # ref-for-dom-publickeycredential-rawid |

ブラウザーの互換性
---------

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


PublicKeyCredential.id - Web API

PublicKeyCredential.id
======================

**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

**`id`** は `PublicKeyCredential` インターフェイスの読み取り専用プロパティで、 `Credential` から継承した文字列であり、現在の `PublicKeyCredential` インスタンスの識別子を表します。

このプロパティは `PublicKeyCredential.rawId` の base64url エンコード版です。

**メモ:** このプロパティは最上位のコンテキストでのみ使用することができ、例えば `<iframe>` では使用することができません。

値
-

`PublicKeyCredential.rawId` の base64url エンコード 版である文字列です。

例
-

```js
const publicKey = {
  challenge: new Uint8Array(26) /\* this actually is given from the server \*/,
  rp: {
    name: "Example CORP",
    id: "login.example.com",
  },
  user: {
    id: new Uint8Array(26) /\* To be changed for each user \*/,
    name: "canand@example.com",
    displayName: "Carina Anand",
  },
  pubKeyCredParams: [
    {
      type: "public-key",
      alg: -7,
    },
  ],
};

navigator.credentials
  .create({ publicKey })
  .then((newCredentialInfo) => {
    const id = newCredentialInfo.id;
    // Do something with the id

    // send attestation response and client extensions
    // to the server to proceed with the registration
    // of the credential
  })
  .catch((err) => {
    console.error(err);
  });
```

仕様書
---

#### No specification found

No specification data found for `api.PublicKeyCredential.id`.
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

ブラウザーの互換性
---------

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

関連情報
----

* `Credential.id`


PublicKeyCredential.response - Web API

PublicKeyCredential.response
============================

**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

**`response`** は `PublicKeyCredential` インターフェイスの読み取り専用プロパティで、このプロパティは `AuthenticatorResponse` オブジェクトであり、資格情報の作成/取得のために認証先からユーザーエージェントに送信されるものです。このレスポンスに含まれる情報は、要求が正当なものであるかどうかを確認するために、依存している側のサーバーで使用されます。

`AuthenticatorResponse` は以下のどちらかです。

* `AuthenticatorAttestationResponse` （`PublicKeyCredential` が `CredentialsContainer.create()` で作成された場合）
* `AuthenticatorAssertionResponse` （`PublicKeyCredential` が `CredentialsContainer.get()` (en-US) から取得された場合）

資格情報の*生成*を検証するには、依存している側のサーバーは以下の両方を必要とします。

* このレスポンス
* 要求を検証するためのクライアントの拡張機能 （`PublicKeyCredential.getClientExtensionResults()` で指定されたもの）

**メモ:** 既存の資格情報の取得を検証する場合、 `PublicKeyCredential` オブジェクト全体とクライアント拡張機能が依存している側のサーバーに必要です。

**メモ:** このプロパティは最上位のコンテキストでのみ使用することができます。例えば `<iframe>` では使用することができません。

値
-

作成または取得の要求を検証するために、依存する側のスクリプトが受信し、依存する側がのサーバーに送信されるべきデータを含む `AuthenticatorResponse` オブジェクトです。このオブジェクトには、クライアントからのデータ (`AuthenticatorResponse/clientDataJSON` (en-US)) と認証器からのデータが含まれます。

例
-

```js
const options = {
  challenge: new Uint8Array(16) /\* from the server \*/,
  rp: {
    name: "Example CORP",
    id: "login.example.com",
  },
  user: {
    id: new Uint8Array(16) /\* from the server \*/,
    name: "canand@example.com",
    displayName: "Carina Anand",
  },
  pubKeyCredParams: [
    {
      type: "public-key",
      alg: -7,
    },
  ],
};

navigator.credentials
  .create({ publicKey: options })
  .then((pubKeyCredential) => {
    const response = pubKeyCredential.response;
    const clientExtResults = pubKeyCredential.getClientExtensionResults();
    // Send response and client extensions to the server so that it can validate
    // and create credentials
  })
  .catch((err) => {
    // Deal with any error
  });
```

仕様書
---

| Specification |
| --- |
| Web Authentication: An API for accessing Public Key Credentials - Level 3 # dom-publickeycredential-response |

ブラウザーの互換性
---------

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


PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable() - Web API

PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable()
===================================================================

**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

**`isUserVerifyingPlatformAuthenticatorAvailable()`** は `PublicKeyCredential` インターフェイスの静的メソッドで、ユーザー検証プラットフォーム認証機能が利用できる場合に `true` に解決される `Promise` を返すメソッドです。

ユーザー検証プラットフォーム認証機能は、クライアント端末の一部であり（一般に取り外し不可）、ユーザーを識別するためにユーザーの操作を必要とする多要素認証機能の一種です。一般的なユーザー検証プラットフォーム認証機能には、以下のものがあります。

* Touch ID または Face ID (macOS や iOS)
* Windows Hello (Windows)
* Android の端末アンロック（指紋認証、顔認証、PIN、など）

**メモ:** このメソッドは最上位のコンテキストでのみ使用することができます。例えば `<iframe>` では使用できません。

構文
--

```js
isUserVerifyingPlatformAuthenticatorAvailable()
```

### 引数

なし。

### 返値

ユーザーを認証するプラットフォーム認証が利用できるかどうかを示す論理値に解決する `Promise` です。

**メモ:** このメソッドは静的メソッドであり、インスタンスではなく `PublicKeyCredential` インターフェイス上で直接呼び出されます。

**メモ:** 以前の版の仕様では、論理値は、そのような認証装置が存在することを開示することに対するユーザーの同意も伝えていました。

例
-

```js
PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable()
  .then((available) => {
    if (available) {
      // We can proceed with the creation of a PublicKeyCredential
      // with this authenticator
    } else {
      // Use another kind of authenticator or a classical login/password
      // workflow
    }
  })
  .catch((err) => {
    // Something went wrong
    console.error(err);
  });
```

仕様書
---

| Specification |
| --- |
| Web Authentication: An API for accessing Public Key Credentials - Level 3 # dom-publickeycredential-isuserverifyingplatformauthenticatoravailable |

ブラウザーの互換性
---------

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

関連情報
----

* Windows Hello
* Web Authentication and Windows Hello - MSDN Guide、特に special considerations mentioning `isUserVerifyingPlatformAuthenticator()`


PublicKeyCredential.getClientExtensionResults() - Web API

PublicKeyCredential.getClientExtensionResults()
===============================================

**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

**`getClientExtensionResults()`** は `PublicKeyCredential` インターフェイスのメソッドであり、 `ArrayBuffer` の形で拡張機能の識別子と、クライアントが処理した後の結果の対応表を返します。

`PublicKeyCredential` の生成または読み出し中 (それぞれ `navigator.credentials.create()` および `navigator.credentials.get()` (en-US) で実施) に、それぞれ `PublicKeyCredentialCreationOptions.extensions` (en-US) および `PublicKeyCredentialRequestOptions.extensions` (en-US) によって与えられる別々の拡張機能のために、クライアントが処理する「専用の」処理を持つことができます。

**メモ:** 拡張機能はオプションであり、ブラウザーによって認識する拡張機能は異なります。すべての拡張機能はクライアントが処理することはオプションです。ブラウザーが指定された拡張機能を知らない場合、失敗としてはいけません。

**メモ:** このプロパティは最上位のコンテキストでしか使えない可能性があり、例えば `<iframe>` の中では利用できません。

構文
--
```

mapArrayBuffer = publicKeyCredential.getClientExtensionResults()
```

### 引数

なし。

### 返値

`ArrayBuffer` の形で、クライアントが様々な拡張機能を処理した結果です。拡張子の識別子と、クライアントが処理した後の結果の対応表を返します。このオブジェクトには拡張機能の識別子と処理の結果の対応表が入っています。

**警告:** 2019 年 3 月時点で、 `appId` (`PublicKeyCredentialRequestOptions.extensions` (en-US) の生成の間に使用される) のみ、 Chrome および Edge が対応しています。 Firefox はどの拡張機能にも対応していないようです。

例
-

```js
var publicKey = {
  // Here are the extensions (as "inputs")
  extensions: {
    loc: true, // This extension has been defined to include location information in attestation
    uvi: true, // user verification index: how the user was verified
  },
  challenge: new Uint8Array(16) /\* from the server \*/,
  rp: {
    name: "Example CORP",
    id: "login.example.com",
  },
  user: {
    id: new Uint8Array(16) /\* from the server \*/,
    name: "jdoe@example.com",
    displayName: "John Doe",
  },
  pubKeyCredParams: [
    {
      type: "public-key",
      alg: -7,
    },
  ],
};

navigator.credentials
  .create({ publicKey })
  .then(function (newCredentialInfo) {
    var myBuffer = newCredentialInfo.getClientExtensionResults();
    // myBuffer will contain the result of any of the processing of the "loc" and "uvi" extensions
  })
  .catch(function (err) {
    console.error(err);
  });
```

仕様書
---

| Specification |
| --- |
| Web Authentication: An API for accessing Public Key Credentials - Level 3 # ref-for-dom-publickeycredential-getclientextensionresults |

ブラウザーの互換性
---------

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

関連情報
----

* 現在定義されている拡張機能の一覧
* `AuthenticatorAssertionResponse.authenticatorData` (en-US): 認証者の実行処理の結果が入る
* `PublicKeyCredentialCreationOptions.extensions` (en-US): 認証情報を作成するためのクライアント拡張機能の入力値が入る
* `PublicKeyCredentialRequestOptions.extensions` (en-US): 認証情報を受け取るクライアント拡張機能の入力値が入る


WorkerNavigator.platform - Web API

WorkerNavigator.platform
========================

**非推奨:** この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

ブラウザーのプラットフォームを表す文字列を返します。仕様では、ブラウザーは常に空文字列を返すようになっているので、このプロパティに頼らずに確実な答えを取得するようにしてください。

値
-

ブラウザーが動作しているプラットフォームを表す文字列、またはブラウザーがプラットフォームの特定を拒否した（あるいはできない）場合は空文字列を指定します。platform`は空文字列か、ブラウザーが実行されているプラットフォームを表す文字列である必要があります。

例: "`MacIntel`", "`Win32`", "`FreeBSD i386`", "`WebTV OS`".

例
-

```js
console.log(navigator.platform);
```

使用上の注意
------

Chrome、Edge、Firefox 63 以降を含むほとんどのブラウザーは、 64 ビット版の Windows で実行した場合でも、 `"Win32"` を返します。 Internet Explorer と Firefox のバージョン 63 より前のバージョンは、まだ `"Win64"` を報告します。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-navigator-platform-dev |

ブラウザーの互換性
---------

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


WorkerNavigator.appVersion - Web API

WorkerNavigator.appVersion
==========================

**非推奨:** この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

"`4.0`" またはブラウザーのバージョン情報を表す文字列のいずれかを返します。

**メモ:** このプロパティが正しいブラウザーバージョンを返すことに頼らないでください。

値
-

"`4.0`"またはブラウザのバージョン情報を表す文字列のどちらかです。

例
-

```js
alert(`Your browser version is reported as ${navigator.appVersion}`);
```

メモ
--

`navigator.userAgent` プロパティには、バージョン番号も含まれていますが（例えば "`Mozilla/5.0 (Windows; U; Win98; en-US; rv:0.9.2) Gecko/20010725 Netscape 6/6.1`"）、ユーザーエージェント文字列を変更したり他のブラウザーやプラットフォーム、ユーザーエージェントに「偽装」することがどれだけ簡単か、そしてブラウザベンダー自身がこれらのプロパティをどれだけ軽く扱っているかについて知っておくことが必要でしょう。

`navigator.appVersion`、`navigator.appName`、`navigator.userAgent` の各プロパティは「ブラウザースニッフィング」コードで使用されています。これは、使用しているブラウザーを探して、それに応じてページを調整しようとするスクリプトの体系です。このため、一部のウェブサイトから締め出されないようにするために、ブラウザーがこれらのプロパティから偽装した値を返さなければならない、という現状が生まれました。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-navigator-appversion-dev |

ブラウザーの互換性
---------

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


WorkerNavigator: serviceWorker プロパティ - Web API

WorkerNavigator: serviceWorker プロパティ
====================================

**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

`WorkerNavigator` インターフェイスの読み取り専用プロパティ **`serviceWorker`** は、関連付けられた文書の `ServiceWorkerContainer` オブジェクトを返します。このオブジェクトは、`ServiceWorker` の登録、除去、更新、通信を可能にします。

この機能は、プライベートモードでは利用できない可能性があります。

値
-

`ServiceWorkerContainer` です。

例
-

このコードは、ワーカー内でブラウザーがサービスワーカーの使用に対応しているかをチェックします。

```js
if ("serviceWorker" in navigator) {
  // 対応しています！
}
```

仕様書
---

| Specification |
| --- |
| Service Workers # navigator-serviceworker |

ブラウザーの互換性
---------

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

関連情報
----

* サービスワーカー API
* サービスワーカーの使用


WorkerNavigator: deviceMemory プロパティ - Web API

WorkerNavigator: deviceMemory プロパティ
===================================

**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

`WorkerNavigator` インターフェイスの読み取り専用プロパティ **`deviceMemory`** は、デバイスのメモリのだいたいの量をギガバイト単位で返します。

報告される値は、フィンガープリンティングを抑えるため、不正確です。値は、一番近い 2 の累乗に切り捨て、その後 1024 で割ることで近似されます。その後、メモリが非常に少ないまたは非常に多いデバイスの所有者のプライバシーを守るため、下限と上限の間にクランプされます。

値
-

浮動小数点数で、`0.25`, `0.5`, `1`, `2`, `4`, `8` のいずれかです。

例
-

以下のコードはワーカー内で実行できます。

```js
const memory = navigator.deviceMemory;
console.log(`このデバイスには少なくとも ${memory} GiB の RAM があります。`);
```

仕様書
---

| Specification |
| --- |
| Device Memory # sec-device-memory-js-api |

ブラウザーの互換性
---------

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

関連情報
----

* `Device-Memory` HTTP ヘッダー


WorkerNavigator: mediaCapabilities プロパティ - Web API

WorkerNavigator: mediaCapabilities プロパティ
========================================

読み取り専用プロパティ **`WorkerNavigator.mediaCapabilities`** は、Media Capabilities API (en-US) における定義に沿って、指定の形式のデコードやエンコードの能力、および出力の能力に関する情報へのアクセスを可能にする `MediaCapabilities` (en-US) オブジェクトを返します。

値
-

`MediaCapabilities` (en-US) オブジェクトです。

例
-

```js
navigator.mediaCapabilities
  .decodingInfo({
    type: "file",
    audio: {
      contentType: "audio/mp3",
      channels: 2,
      bitrate: 132700,
      samplerate: 5200,
    },
  })
  .then((result) => {
    console.log(`この構成に対応していま${result.supported ? "す" : "せん"}。`);
    console.log(`スムーズ${result.smooth ? "" : "じゃない"}です。`);
    console.log(`電力効率がよ${result.powerEfficient ? "" : "くな"}いです。`);
  });
```

仕様書
---

| Specification |
| --- |
| Media Capabilities # dom-workernavigator-mediacapabilities |

ブラウザーの互換性
---------

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

関連情報
----

* Media Capabilities API (en-US)
* `WorkerNavigator`


WorkerNavigator.serial - Web API

WorkerNavigator.serial
======================

**Experimental:** **これは実験的な機能です。**
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

**`serial`** は `WorkerNavigator` インターフェイスの読み取り専用プロパティで、 `Serial` オブジェクトを返します。これはウェブシリアル API へのエントリーポイントを表してます。

取得する際には、常に同じ `Serial` オブジェクトのインスタンスが返されることになります。

値
-

`Serial` オブジェクトです。

例
-

以下の例では、`getPorts()` メソッドを使用して、使用できるポートのリストを初期化しています。

```js
navigator.serial.getPorts().then((ports) => {
  // Initialize the list of available ports.
});
```

仕様書
---

| Specification |
| --- |
| Web Serial API # dom-workernavigator-serial |

ブラウザーの互換性
---------

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

関連情報
----

* Read from and write to a serial port
* Getting started with the web serial API


WorkerNavigator.connection - Web API

WorkerNavigator.connection
==========================

**`WorkerNavigator.connection`** は読み取り専用のプロパティで、ユーザーの端末の現在の帯域幅や接続が従量制であるかどうかなど、システムの接続に関する情報を格納した `NetworkInformation` オブジェクトを返します。これは、ユーザーの接続に応じて高解像度コンテンツと低解像度コンテンツを選択するために使用される可能性があります。

値
-

`NetworkInformation` オブジェクトです。

仕様書
---

| Specification |
| --- |
| Network Information API # connection-attribute |

ブラウザーの互換性
---------

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

関連情報
----

* オンライン・オフラインイベント
* ネットワーク情報 API


WorkerNavigator: clearAppBadge() メソッド - Web API

WorkerNavigator: clearAppBadge() メソッド
=====================================

**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

`WorkerNavigator` インターフェイスの **`clearAppBadge()`** メソッドは、現在のアプリケーションのアイコン上のバッジを `nothing` に設定し、クリアします。値 `nothing` は現在バッジが何も設定されておらず、バッジの状態が *cleared* であることを示します。

構文
--

```js
clearAppBadge()
```

### 引数

なし

### 返値

`undefined` で解決する `Promise` です。

### 例外

`InvalidStateError` `DOMException`

文書が完全にアクティブでないとき投げられます。

`SecurityError` `DOMException`

呼び出しが同一オリジンポリシーによりブロックされたとき投げられます。

`NotAllowedError` `DOMException`

`PermissionStatus.state` が `granted` でないとき投げられます。

例
-

アプリケーションにあるすべてのメッセージが読まれたら、`clearAppBadge()` を呼び出してバッジをクリアし、通知を除去します。

```js
navigator.clearAppBadge();
```

仕様書
---

#### No specification found

No specification data found for `api.WorkerNavigator.clearAppBadge`.
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

ブラウザーの互換性
---------

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

関連情報
----

* Badging for app icons


WorkerNavigator.product - Web API

WorkerNavigator.product
=======================

**非推奨:** この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

**`WorkerNavigator.product`** プロパティの値は、どのブラウザーでも常に "`Gecko`" です。このプロパティは互換性のためにのみ残されています。

**メモ:** このプロパティが実際の製品名を返すことを頼りにしないでください。すべてのブラウザーが、このプロパティの値として "`Gecko`" を返します。

値
-

"`Gecko`" という文字列です。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-navigator-product-dev |

ブラウザーの互換性
---------

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

関連情報
----

* `WorkerNavigator.appCodeName`
* `WorkerNavigator.appName`


WorkerNavigator.appName - Web API

WorkerNavigator.appName
=======================

**非推奨:** この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

**`WorkerNavigator.appName`** プロパティの値は、どのブラウザーでも常に "`Netscape`" です。 このプロパティは互換性のためにのみ残されています。

**メモ:** このプロパティが実際のブラウザー名を返すことに頼ってはいけません。すべてのブラウザーがこのプロパティの値として "`Netscape`" を返します。

値
-

文字列 "`Netscape`" です。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-navigator-appname-dev |

ブラウザーの互換性
---------

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

関連情報
----

* `WorkerNavigator.appCodeName`
* `WorkerNavigator.product`


WorkerNavigator.storage - Web API

WorkerNavigator.storage
=======================

**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

**`WorkerNavigator.storage`** は読み取り専用のプロパティで、現在のサイトまたはアプリのブラウザーの全体的なストレージ機能にアクセスするために使用されるシングルトンの `StorageManager` オブジェクトを返します。
 返されたオブジェクトにより、データストアの持続性を調べたり、設定したり、ブラウザーがローカルストレージを使用するために利用できる空間があとどのくらいあるのかをおおよそ知ることができます。

値
-

格納されたデータの永続性を維持するために使用できる `StorageManager` オブジェクトで、格納するデータの空き容量を大まかに判断することができます。

仕様書
---

| Specification |
| --- |
| Storage Standard # dom-navigatorstorage-storage |

ブラウザーの互換性
---------

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

関連情報
----

* `StorageManager`
* `WorkerNavigator`


WorkerNavigator.language - Web API

WorkerNavigator.language
========================

**`WorkerNavigator.language`** は読み取り専用のプロパティで、ユーザーの環境設定言語（通常はブラウザー UI の言語）を表す文字列を返します。

値
-

文字列で、 RFC 5646: Tags for Identifying Languages (also known as BCP 47) で定義された通りの言語バージョンを表します。有効な言語コードの例としては、 "en", "en-US", "fr", "fr-FR", "ja-JP" 等があります。

iOS 版の Safari の 10.2 以前では、返される国コードは小文字になることに注意してください。 "en-us", "fr-fr" など。

例
-

これをウェブワーカーの中に挿入して実行することができます。

```js
if (/^en\b/.test(navigator.language)) {
  doLangSelect(window.navigator.language);
}
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-navigator-language-dev |

ブラウザーの互換性
---------

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

関連情報
----

* `WorkerNavigator.languages`
* `WorkerNavigator`


WorkerNavigator: setAppBadge() メソッド - Web API

WorkerNavigator: setAppBadge() メソッド
===================================

**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

`WorkerNavigator` インターフェイスの **`setAppBadge()`** メソッドは、このアプリケーションに関連付けられたアイコンにバッジを設定します。このメソッドに値が渡された場合は、この値がバッジの値として設定されます。渡されなかった場合は、バッジは点もしくはプラットフォームで定義されたその他のインジケーターとして表示されます。

構文
--

```js
setAppBadge()
setAppBadge(contents)
```

### 引数

`contents` 省略可

バッジの値として用いる `number` です。`contents` が `0` の場合は、バッジはクリアを表す `nothing` に設定されます。

### 返値

`undefined` で解決する `Promise` です。

### 例外

`InvalidStateError` `DOMException`

文書が完全にアクティブでないとき投げられます。

`SecurityError` `DOMException`

呼び出しが同一オリジンポリシーによりブロックされたとき投げられます。

`NotAllowedError` `DOMException`

`PermissionStatus.state` が `granted` でないとき投げられます。

例
-

以下の例では、未読カウントを `setAppBadge()` に渡します。すると、バッジに `30` が表示されるはずです。

```js
const unread = 30;
navigator.setAppBadge(unread);
```

仕様書
---

#### No specification found

No specification data found for `api.WorkerNavigator.setAppBadge`.
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

ブラウザーの互換性
---------

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

関連情報
----

* Badging for app icons


WorkerNavigator: globalPrivacyControl プロパティ - Web API

WorkerNavigator: globalPrivacyControl プロパティ
===========================================

**Experimental:** **これは実験的な機能です。**
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

 読み取り専用プロパティ **`WorkerNavigator.globalPrivacyControl`** は、ユーザーの現在のウェブサイト用の Global Privacy Control 設定を返します。
 この設定は、ウェブサイトやサービスがユーザーの個人情報を第三者に販売したり共有したりすることにユーザーが同意しているかを示します。

このプロパティの値は、`Sec-GPC` (en-US) HTTP ヘッダーの値を反映します。

値
-

 ユーザーが明示的にデータの販売や共有に同意 *しない* ときは `true` です。
 ユーザーが同意しているか、希望を示していないときは `false` です。

例
-

```js
console.log(navigator.globalPrivacyControl);
// ユーザーが特にデータを共有したり販売したりされたくないと示しているとき "true"、そうでないとき "false" です。
```

仕様書
---

#### No specification found

No specification data found for `api.WorkerNavigator.globalPrivacyControl`.
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

ブラウザーの互換性
---------

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

関連情報
----

* `Sec-GPC` (en-US) ヘッダー
* globalprivacycontrol.org
* Global Privacy Control Spec
* Do Not Track on Wikipedia


WorkerNavigator.permissions - Web API

WorkerNavigator.permissions
===========================

**Experimental:** **これは実験的な機能です。**
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

**`WorkerNavigator.permissions`** は読み取り専用のプロパティで、 `Permissions` オブジェクトを返します。これは権限 API に応じた API の許可状況を照会・更新するために使用することができます。

値
-

`Permissions` オブジェクトです。

例
-

```js
navigator.permissions.query({ name: "notifications" }).then((result) => {
  if (result.state === "granted") {
    showNotification();
  } else if (result.state === "prompt") {
    requestNotificationPermission();
  }
});
```

仕様書
---

| Specification |
| --- |
| Permissions # dom-workernavigator-permissions |

ブラウザーの互換性
---------

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

関連情報
----

* 権限 API
* ウェブワーカー API


WorkerNavigator.userAgent - Web API

WorkerNavigator.userAgent
=========================

**WorkerNavigator.userAgent`** は読み取り専用プロパティで、現在のブラウザーのユーザーエージェント文字列を返します。

**メモ:** 仕様では、このフィールドを介して提供する情報を可能な限り少なくするよう、ブラウザーに要請しています。このプロパティの値が、同じブラウザーの将来のバージョンでも同じままであることを決して想定しないでください。まったく使用しないか、あるいは現在と過去のバージョンのブラウザーにのみ使用するようにしてください。新しいブラウザーは、古いブラウザーと同じ UA、またはその一部を使用し始めることがあります。ブラウザーエージェントが実際にこのプロパティで告知されたものであるという保証は、実のところありません。

また、ブラウザーのユーザーが望めば、このフィールドの値を変更できることも念頭に置いてください（UA スプーフィング）。

ユーザーエージェント文字列はユーザーが設定できるため、ユーザーエージェント文字列の検出に基づくブラウザーの識別は、以下のように**信頼性が低く**、**推奨されません**。

* Firefox では、`about:config` にある `general.useragent.override` という環境設定を変更することができます。 Firefox の拡張機能の中にはそのようなものがあります。しかし、これは取得する HTTP ヘッダーを変更するだけで、 JavaScript コードで実行されるブラウザー検出には影響しません。
* Opera 6+では、ユーザーがメニューからブラウザー識別文字列を設定することができます。
* Microsoft Internet Explorer は、 Windows のレジストリーを使用します。
* Safari と iCab では、ユーザーがメニューからブラウザーのユーザーエージェント文字列を、あらかじめ定義された Internet Explorer や Netscape の文字列に変更することができます。
値
-

ブラウザーが HTTP ヘッダーと、 `WorkerNavigator` オブジェクトのこのメソッドや他の関連するメソッドへのレスポンスの両方で提供する、 完全なユーザーエージェント文字列を指定した文字列です。

ユーザーエージェント文字列は、いくつかの情報片に分解できる正式な構造に基づいて構築されています。これらの情報は、他にもユーザーによって設定可能なナビゲータプロパティに由来しています。Gecko ベースのブラウザーは以下の一般的な構造に従っています。
```

userAgent = appCodeName/appVersion number (Platform; Security; OS-or-CPU;
Localization; rv: revision-version-number) product/productSub
Application-Name Application-Name-version
```

例
-

```js
alert(navigator.userAgent);
// alerts "Mozilla/5.0 (Windows; U; Win98; en-US; rv:0.9.2) Gecko/20010725 Netscape6/6.1"
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-navigator-useragent-dev |

ブラウザーの互換性
---------

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

関連情報
----

* `User-Agent` HTTP ヘッダー


WorkerNavigator.onLine - Web API

WorkerNavigator.onLine
======================

ブラウザーのオンライン状態を返します。このプロパティは論理値を返し、 `true` はオンラインを意味し、 `false` はオフラインを意味します。このプロパティは、ブラウザーがネットワークに接続する能力が変化するたびに、更新を送信します。更新は、ユーザーがリンクをたどったときや、スクリプトがリモートページをリクエストしたときに発生します。

例えば、ユーザーがインターネット接続を失った直後にリンクをクリックした場合、このプロパティは `false` を返します。

ブラウザーでは、このプロパティを異なる形で実装しています。

Chrome と Safari では、ブラウザーがローカルエリアネットワーク (LAN) またはルーターに接続できない場合にオフラインになり、それ以外の条件ではすべて `true` を返します。つまり、 `false` の値を返した場合は、ブラウザーがオフラインであるとみなされますが、 `true` の値を返した場合は、必ずしもブラウザーがインターネットにアクセスできることを意味するとは想定できません。例えば、コンピューターが仮想イーサネットアダプターを保有する仮想化ソフトウェアを実行しており、常に「接続」されている場合などには、誤った値を取得する可能性があります。したがって、実際にブラウザーのオンライン状態を判断したいのであれば、調べるための手段を追加開発する必要があります。詳しくは、 2011 年の記事、 Working Off the Grid をご覧ください。

Firefox と Internet Explorer では、ブラウザーをオフラインモードに切り替えると、 `false` の値が送信されます。

値
-

`online` は論理値の `true` または `false` です。

例
-

### 基本的な使用

ワーカーでオンラインかどうかを調べるには、以下の例のように `navigator.onLine` を問い合わせます。

```js
if (navigator.onLine) {
  console.log("online");
} else {
  console.log("offline");
}
```

ブラウザーが `navigator.onLine` に対応していない場合、上記の例は常に `false`/`undefined` として出力されます。

### ネットワーク状態の変化を待ち受けする

ネットワーク状態の変化を監視する場合は、 `addEventListener` を使用して `online` および `offline` のイベントを待ち受けしてください。以下の例のようにします。

```js
addEventListener("offline", (e) => {
  console.log("offline");
});

addEventListener("online", (e) => {
  console.log("online");
});
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-navigator-online-dev |

ブラウザーの互換性
---------

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


WorkerNavigator: gpu プロパティ - Web API

WorkerNavigator: gpu プロパティ
==========================

**Experimental:** **これは実験的な機能です。**
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

`WorkerNavigator` インターフェイスの読み取り専用プロパティ **`gpu`** は、現在のワーカーコンテキスト用の `GPU` オブジェクトを返します。これは WebGPU API のエントリーポイントです。

値
-

`GPU` オブジェクトです。

例
-

```js
// ウェブワーカーの内部で実行できます
async function init() {
  if (!navigator.gpu) {
    throw Error("WebGPU に対応していません。");
  }

  const adapter = await navigator.gpu.requestAdapter();
  if (!adapter) {
    throw Error("WebGPU アダプターを要求できませんでした。");
  }

  const device = await adapter.requestDevice();

  //...
}
```

仕様書
---

| Specification |
| --- |
| WebGPU # navigator-gpu |

ブラウザーの互換性
---------

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

関連情報
----

* WebGPU API


WorkerNavigator: usb プロパティ - Web API

WorkerNavigator: usb プロパティ
==========================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
`WorkerNavigator` インターフェイスの読み取り専用プロパティ **`usb`** は、現在の文書用の `USB` オブジェクトを返し、WebUSB API の機能へのアクセスを可能にします。

値
-

`USB` オブジェクトです。

仕様書
---

| Specification |
| --- |
| WebUSB API # dom-workernavigator-usb |

ブラウザーの互換性
---------

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

関連情報
----

* WebUSB API


WorkerNavigator.hardwareConcurrency - Web API

WorkerNavigator.hardwareConcurrency
===================================

**`navigator.hardwareConcurrency`** は読み取り専用のプロパティで、ユーザーのコンピューターでスレッドを実行するために利用できる論理プロセッサーの数を返します。

値
-

論理プロセッサーコアの数を示す数値です。

現代のコンピューターは、 CPU に複数の物理プロセッサーコア（2 つまたは 4 つのコアが一般的）がありますが、それぞれの物理コアは、高度なスケジューリング技術を使って一度に複数のスレッドを実行することもできるのが普通です。そのため、 4 つのコアを持つ CPU は、例えば 8 つの論理プロセッサーコアを提供することができます。論理プロセッサーコアの数は、コンテキストスイッチを持つことなく一度に効果的に実行できるスレッドの数を測定するために使用することができます。

しかし、ブラウザーは、一度に実行できるワーカー (`Worker`) の数をより正確に表すために、論理コアの数を少なくして報告することを選ぶかもしれません。

例
-

この例では、ブラウザーから報告された論理プロセッサーごとに `Worker` が一つ作成され、新しいワーカーへの参照と、 そのワーカーをまだ使っているかどうかを示す論理値を含むレコードが作成されます。 これらのオブジェクトは順に、後で使うために配列に格納されます。このようにして、後でリクエストを処理するために使用されるワーカーのプールが作成されます。

以下のコードはワーカーで実行することができます。

```js
let workerList = [];

for (let i = 0; i < navigator.hardwareConcurrency; i++) {
  let newWorker = {
    worker: new Worker("cpuworker.js"),
    inUse: false,
  };
  workerList.push(newWorker);
}
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-navigator-hardwareconcurrency-dev |

ブラウザーの互換性
---------

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

関連情報
----

* `WorkerNavigator`


WorkerNavigator.userAgentData - Web API

WorkerNavigator.userAgentData
=============================

**Experimental:** **これは実験的な機能です。**
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

**`userAgentData`** は `WorkerNavigator` インターフェイスの読み取り専用プロパティで、 `NavigatorUAData` オブジェクトを返します。これを使用して、ユーザーエージェントクライアントヒント API へアクセスすることができます。

値
-

`NavigatorUAData` オブジェクトです。

例
-

以下の例は、 `NavigatorUAData.brands` の値をコンソールに表示するものです。

```js
console.log(navigator.userAgentData.brands);
```

仕様書
---

| Specification |
| --- |
| User-Agent Client Hints # dom-navigatorua-useragentdata |

ブラウザーの互換性
---------

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

関連情報
----

* Improving user privacy and developer experience with User-Agent Client Hints


WorkerNavigator.languages - Web API

WorkerNavigator.languages
=========================

**`WorkerNavigator.languages`** は読み取り専用のプロパティで、ユーザーの推奨言語を表す文字列の配列を返します。言語は RFC 5646: Tags for Identifying Languages (also known as BCP 47) による言語タグを使用して記述されます。返される配列では、環境設定の順に並べられ、最も優先度の高い言語が最初に置かれます。

`navigator.language` の値は返される配列の最初の要素です。

その値が変更されると、ユーザーの環境設定が変更されたときに `languagechange` イベントが `WorkerGlobalScope` オブジェクトに発行されます。

ユーザーのブラウザーから行われるすべての HTTP リクエストにある `Accept-Language` ヘッダーは、 `navigator.languages` プロパティと同じ値を使用しますが、追加の `qvalues` （品質値）フィールドがある点が異なります（例: `en-US;q=0.8`）。

値
-

配列または文字列です。

例
-

これをウェブワーカーの中に挿入して実行することができます。

```js
navigator.language; //"en-US"
navigator.languages; //["en-US", "zh-CN", "ja-JP"]
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-navigator-languages-dev |

ブラウザーの互換性
---------

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

関連情報
----

* `WorkerNavigator.language`
* `WorkerNavigator`
* `languagechange` イベント


WorkerNavigator.locks - Web API

WorkerNavigator.locks
=====================

**`locks`** は `WorkerNavigator` インターフェイスの読み取り専用プロパティで、 `LockManager` オブジェクト返します。これは `Lock` オブジェクトをリクエストしたり、既存の `Lock` オブジェクトを問い合わせるためのメソッドを提供します。

値
-

`LockManager` オブジェクトです。

仕様書
---

| Specification |
| --- |
| Web Locks API # dom-navigatorlocks-locks |

ブラウザーの互換性
---------

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


WorkerNavigator.appCodeName - Web API

WorkerNavigator.appCodeName
===========================

**非推奨:** この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

**`WorkerNavigator.appCodeName`** プロパティの値は、どのブラウザーでも常に "`Mozilla`" となります。このプロパティは互換性のためにのみ残されています。

**メモ:** このプロパティが実際の製品名を返すことに頼らないでください。すべてのブラウザーが、このプロパティの値として "`Mozilla`" を返します。

値
-

文字列 "`Mozilla`" です。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-navigator-appcodename-dev |

ブラウザーの互換性
---------

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

関連情報
----

* `WorkerNavigator.appName`
* `WorkerNavigator.product`


BlobEvent: BlobEvent() コンストラクター - Web API

BlobEvent: BlobEvent() コンストラクター
===============================

**`BlobEvent()`** コンストラクターは、新たに生成され `Blob` に関連付けられた `BlobEvent` オブジェクトを返します。

構文
--

```js
new BlobEvent(type, options)
```

### 引数

`type`

 文字列で、このイベントの名前です。
 大文字小文字の区別があり、ブラウザーは常に `dataavailable` と設定します。

`options`

オブジェクトで、*`Event()` で定義されたプロパティに加え*、以下のプロパティを持つことができます。

`data`

イベントに関連付けられた `Blob` です。

`timecode`

blob イベントの初期化に使用される `DOMHighResTimeStamp` です。

### 返値

新しい `BlobEvent` オブジェクトです。

仕様書
---

| Specification |
| --- |
| MediaStream Recording # dom-blobevent-blobevent |

ブラウザーの互換性
---------

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

関連情報
----

* このメソッドが属する `BlobEvent` インターフェイス。


BlobEvent: data プロパティ - Web API

BlobEvent: data プロパティ
=====================

**`BlobEvent.data`** は読み取り専用プロパティで、イベントに関連付けられた `Blob` を表します。

値
-

`Blob` オブジェクトです。

仕様書
---

| Specification |
| --- |
| MediaStream Recording # dom-blobevent-data |

ブラウザーの互換性
---------

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

関連情報
----

* このプロパティが属する `BlobEvent` インターフェイス


BlobEvent: timecode プロパティ - Web API

BlobEvent: timecode プロパティ
=========================

**`timecode`** は `BlobEvent` インタフェースの読み取り専用プロパティで、データ内の最初のチャンクのタイムスタンプと、このレコーダによって生成された最初の `BlobEvent` 内の最初のチャンクのタイムスタンプとの差を示します。

なお、生成されたばかりの `BlobEvent` の `timecode` はゼロとは限らないことに注意してください。

### 値

`DOMHighResTimeStamp` です。

仕様書
---

| Specification |
| --- |
| MediaStream Recording # dom-blobevent-timecode |

ブラウザーの互換性
---------

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


ウェブ音声 API の使用 - Web API

ウェブ音声 API の使用
=============

 ウェブ音声 API は、音声認識と音声合成（text to speech または tts としても知られています）という 2 つの異なる分野の機能を提供しており、アクセシビリティと制御メカニズムに興味深い新しい可能性をもたらします。この記事では、両方の分野の簡単な紹介とデモを提供します。
音声認識
----

音声認識では、端末のマイクを通して音声を受信し、音声認識サービスによって文法のリスト（基本的には特定のアプリで認識させたい語彙）と照合されます。単語や句が正常に認識されると、結果（または結果のリスト）がテキスト文字列として返され、その結果としてさらなるアクションを開始することができます。

ウェブ音声 API には、このための中心的な制御インターフェイスである `SpeechRecognition` と、文法や結果などを表現するためのいくつかの密接に関連したインターフェイスがあります。一般的に、音声認識には端末上で利用可能な既定の音声認識システムが使用されます。最近のほとんどの OS には音声コマンドを発行するための音声認識システムが搭載されています。macOS の Dictation、iOS の Siri、Windows 10 の Cortana、Android の Speech などを想像してください。。

**メモ:** Chrome などの一部のブラウザーでは、ウェブページで音声認識を使用するためにサーバーベースの認識エンジンが必要です。音声が認識処理のためにウェブサービスに送信されるため、オフラインでは機能しません。

### デモ

ウェブ音声認識の簡単な使い方を示すために、 Speech color changer というデモを書いてみました。画面をタップ/クリックし、HTML の色のキーワードを言うと、アプリの背景色がその色に変わります。

![Speech Color changer というタイトルのアプリの UI。画面を内側へタップして色を言うと、アプリの背景をその色に変えてくれるというアプリです。この例では、背景を赤に変えています。](/ja/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API/speech-color-changer.png)

デモを実行するには、 Chrome 等の対応しているモバイルブラウザーでライブデモの URL に移動してください。

### ブラウザーの対応状況

ウェブ音声 API の音声認識のサポートは、通常 Chrome for Desktop と Android に限られています — Chrome はバージョン 33 付近からサポートしていますが、接頭辞付きのインターフェイスを使用しているため、 `webkitSpeechRecognition` などの接頭辞付きバージョンを含める必要があります。

### HTML と CSS

アプリの HTML と CSS は本当に簡単です。タイトル、説明段落、診断メッセージを出力する div があるだけです。

```html
<h1>Speech color changer</h1>
<p>Tap/click then say a color to change the background color of the app.</p>
<div>
  <p class="output"><em>…diagnostic messages</em></p>
</div>
```

この CSS では、他の端末でも問題なく見えるように、非常にシンプルなレスポンシブのスタイル付けをしています。

### JavaScript

JavaScript をもう少し詳しく見てみましょう。

#### Chrome 対応

前述したように、Chrome は現在接頭辞付きのプロパティで音声認識に対応しているので、適切なオブジェクトを Chrome に供給し、そして将来的な実装で接頭辞なしの機能をサポートする可能性も踏まえ、以下の行をコードの最初に追加しています。

```js
const SpeechRecognition = window.SpeechRecognition || webkitSpeechRecognition;
const SpeechGrammarList = window.SpeechGrammarList || webkitSpeechGrammarList;
const SpeechRecognitionEvent =
  window.SpeechRecognitionEvent || webkitSpeechRecognitionEvent;
```

#### 文法

コードの次の部分では、アプリが認識する文法を定義します。次の変数は文法を保持するために定義されています。

```js
const colors = [
  "aqua",
  "azure",
  "beige",
  "bisque",
  "black",
  "blue",
  "brown",
  "chocolate",
  "coral" /\* … \*/,
];
const grammar = `#JSGF V1.0; grammar colors; public <color> = ${colors.join(
 " | ",
)};`;
```

使用されている文法形式は JSpeech Grammar Format (**JSGF**) です — それについての詳細はリンク先の仕様書を参照してください。しかし、今のところは手っ取り早く実行してみましょう。

* 行の区切りは JavaScript と同じようにセミコロンで区切られています。
* 最初の行 — `#JSGF V1.0;` — は、使用されているフォーマットとバージョンを示します。これは常に最初に含める必要があります。
* 2 行目は認識したい用語の種類を示します。`public` はパブリックルールであることを宣言し、角括弧内の文字列はこの用語の認識名 (`color`) を定義し、等号の後に続く項目のリストは、用語の適切な値として認識され受け入れられる代替値です。それぞれがパイプ文字で区切られていることに注意してください。
* 上記の構造に従ってそれぞれの行に好きなだけ多くの用語を定義することができ、かなり複雑な文法定義を記載することができます。この基本的なデモでは、単純にしています。

#### 文法を音声認識にプラグインする

次にやるべきことは、アプリケーションの認識を制御する音声認識インスタンスを定義することです。これは `SpeechRecognition()` コンストラクターを使用して行います。また、`SpeechGrammarList()` (en-US) コンストラクターを使用して、文法を含む新しい音声文法リストも作成します。

```js
const recognition = new SpeechRecognition();
const speechRecognitionList = new SpeechGrammarList();
```

`SpeechGrammarList.addFromString()` (en-US) メソッドを使ってリストに `grammar` を追加します。 このメソッドは追加したい文字列を引数として受けとり、さらにオプションで、リスト内で利用可能な他の文法との関係においてこの文法の重要度を指定する重み値を受け取ります（0 から 1 までの範囲で指定できます）。追加された文法は`SpeechGrammar` オブジェクトのインスタンスとしてリスト内で利用できます。

```js
speechRecognitionList.addFromString(grammar, 1);
```

次に、 `SpeechGrammarList` (en-US) を `SpeechRecognition.grammars` プロパティの値として設定して、音声認識インスタンスに追加しています。他にも、認識インスタンスのプロパティをいくつか設定してから、次に移ります。

* `SpeechRecognition.continuous`: 認識が開始されるたびに連続した結果をキャプチャする (`true`) か、または単一の結果だけをキャプチャする (`false`) かを制御します。
* `SpeechRecognition.lang`: 認識の言語を設定します。これを設定することは良い習慣であるため、推奨されます。
* `SpeechRecognition.interimResults`: 音声認識システムが中間的な結果を返すか、最終的な結果だけを返すか定義します。このシンプルなデモでは最終的な結果で十分です。
* `SpeechRecognition.maxAlternatives`: 結果ごとに返される代替候補数を設定します。これは、結果が完全に明確ではなく、ユーザーが正しいものを選択できるように代替候補のリストを表示したい場合などに便利な場合があります。しかし、このシンプルなデモでは必要ないのでここでは 1 つだけ指定します（これは実際にはデフォルトです）。

```js
recognition.grammars = speechRecognitionList;
recognition.continuous = false;
recognition.lang = "en-US";
recognition.interimResults = false;
recognition.maxAlternatives = 1;
```

#### 音声認識の開始

出力先の `<div>` と HTML 要素への参照を取得（診断メッセージを出力したり、後でアプリの背景色を更新したりできるようにするため）した後、画面がタップ/クリックされたときに音声認識サービスが開始されるように onclick ハンドラーを実装します。これは `SpeechRecognition.start()` を呼び出すことで実現しています。 `forEach()` メソッドは何色を言っているかを示す色付きインジケーターを出力するために使われています。

```js
const diagnostic = document.querySelector(".output");
const bg = document.querySelector("html");
const hints = document.querySelector(".hints");

let colorHTML = "";
colors.forEach((color, i) => {
  console.log(color, i);
  colorHTML += `<span style="background-color:${color};"> ${color} </span>`;
});
hints.innerHTML = `Tap or click then say a color to change the background color of the app. Try ${colorHTML}.`;

document.body.onclick = () => {
  recognition.start();
  console.log("Ready to receive a color command.");
};
```

#### 結果の受け取りと処理

音声認識が開始されると、結果やその他の周辺情報を取得するために使用できる多くのイベントハンドラーがあります（`SpeechRecognition` のイベント を参照してください）。最も一般的なものは `result` イベントで、成功した結果を受信したときに発生します。

```js
recognition.onresult = (event) => {
  const color = event.results[0][0].transcript;
  diagnostic.textContent = `Result received: ${color}.`;
  bg.style.backgroundColor = color;
  console.log(`Confidence: ${event.results[0][0].confidence}`);
};
```

ここの 2 行目はちょっと複雑そうなので、順を追って説明していきましょう。`SpeechRecognitionEvent.results`プロパティは、 `SpeechRecognitionResult` (en-US) オブジェクトを含む `SpeechRecognitionResultList` (en-US) オブジェクトを返します。これはゲッターを持っているので配列のようにアクセスでき、最初の `[0]` は 0 の位置にある `SpeechRecognitionResult` を返します。各 `SpeechRecognitionResult` オブジェクトには、個々に認識された単語を含む `SpeechRecognitionAlternative` オブジェクトが含まれています。これらは配列のようにアクセスできるようにゲッターも持っています — 2 番目の `[0]` は、したがって位置 0 の `SpeechRecognitionAlternative` を返します。次に、その `transcript` プロパティを返して個々の認識結果を含む文字列を文字列として取得し、背景色をその色に設定し、認識された色を UI の診断メッセージとして報告します。

また、 `speechend` イベントを使用して音声認識サービスの実行を停止します（1 つの単語が認識され、それが発話され終わったら `SpeechRecognition.stop()`) を使用します）。

```js
recognition.onspeechend = () => {
  recognition.stop();
};
```

#### エラーや認識されない発話のハンドリング

最後の 2 つのハンドラは、定義された文法にない音声が認識されたケースやエラーが発生したケースを処理するためのものです。 `nomatch` は最初に言及したケースを処理することになっているようですが、今のところ正しく動作しているようには見えないことに注意してください（とにかく認識されたものを返すだけです）。

```js
recognition.onnomatch = (event) => {
  diagnostic.textContent = "I didn't recognize that color.";
};
```

`error` は、認識に成功して実際にエラーが発生したケースを処理します — `SpeechRecognitionErrorEvent.error` (en-US) プロパティには、返された実際のエラーが含まれます。

```js
recognition.onerror = (event) => {
  diagnostic.textContent = `Error occurred in recognition: ${event.error}`;
};
```

音声合成
----

音声合成 (別名 text-to-speech または tts) は、アプリ内のテキストを音声に合成し、機器のスピーカーまたは音声出力接続から再生することを指します。

ウェブ音声 API には、このための中心的な制御インターフェイス — `SpeechSynthesis` があり、さらに、合成される（発話とも呼ばれる）テキスト、発話に使用される音声などを表現する、密接に関連した多数のインターフェイスがあります。繰り返しになりますが、ほとんどの OS は何らかの音声合成システムを保有しており、利用可能な場合はこのタスクのために API が使用されることになります。

### デモ

ウェブ音声合成の基本的な使い方を示すために、 Speak easy synthesis というデモを提供しています。これには、合成するテキストを入力し、テキストが発声されるときに使用する音程、速度、および音声を設定するための一連のフォームコントロールが記載されています。テキストを入力した後、 `Enter`/`Return` を押すと、そのテキストが発話されるのを聞くことができます。

![speak easy synthesis というアプリの UI。合成するテキストを入力する入力欄、音声の速度やピッチを制御するスライダーコントロール、異なる形を選ぶドロップダウンメニューがあります。](/ja/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API/speak-easy-synthesis.png)

デモを実行するには、Chromeなどの対応しているモバイルブラウザーでライブデモの URL に移動してください。

### ブラウザーの対応

Web Speech APIの音声合成への対応は、主流のブラウザーでまだ進んでおらず、現在では以下のものに限られています。

* Firefox のデスクトップ版とモバイル版では、 Gecko 42+ (Windows)/44+ で接頭辞なしで対応しており、`about:config` で `media.webspeech.synth.enabled` フラッグを `true` に切り替えることでオンにすることが可能です。
* Firefox OS 2.5+では既定で、何の権限も必要なく対応しています。
* Chrome のデスクトップ版と Android 版では、バージョン 33 あたりから接頭辞なしで対応しています。
### HTML と CSS

HTMLとCSSは、タイトル、使用されるためのいくつかの指示、およびいくつかの単純なコントロールを持つ形式を含む、これもとても単純なものです。 `<select>` 要素は最初は空ですが、JavaScript で `<option>` を入力しています（後述します）。

```html
<h1>Speech synthesizer</h1>

<p>
  Enter some text in the input below and press return to hear it. change voices
  using the dropdown menu.
</p>

<form>
  <input type="text" class="txt" />
  <div>
    <label for="rate">Rate</label
 ><input type="range" min="0.5" max="2" value="1" step="0.1" id="rate" />
    <div class="rate-value">1</div>
    <div class="clearfix"></div>
  </div>
  <div>
    <label for="pitch">Pitch</label
 ><input type="range" min="0" max="2" value="1" step="0.1" id="pitch" />
    <div class="pitch-value">1</div>
    <div class="clearfix"></div>
  </div>
  <select></select>
</form>
```

### JavaScript

このアプリを動かしている JavaScript を調べてみましょう。

#### 変数の設定

まず最初に、UI に関係するすべての DOM 要素への参照を取得しますが、より興味深いのは `Window.speechSynthesis` への参照を取得することです。これは API のエントリーポイントであり、ウェブ音声合成の制御インターフェイスである `SpeechSynthesis` のインスタンスを返します。

```js
const synth = window.speechSynthesis;

const inputForm = document.querySelector("form");
const inputTxt = document.querySelector(".txt");
const voiceSelect = document.querySelector("select");

const pitch = document.querySelector("#pitch");
const pitchValue = document.querySelector(".pitch-value");
const rate = document.querySelector("#rate");
const rateValue = document.querySelector(".rate-value");

const voices = [];
```

#### select 要素の生成

`<select>` 要素に端末が利用できる様々な音声オプションを入力するために、 `populateVoiceList()` 関数を書きました。最初に `SpeechSynthesis.getVoices()` (en-US) を呼び出し、 `SpeechSynthesisVoice` (en-US) オブジェクトで表される、利用できるすべての音声のリストを返します。次に、このリストを走査します。 それぞれの音声に対して `<option>` 要素を作成し、そのテキストコンテンツを音声の名前（`SpeechSynthesisVoice.name` (en-US) から取得）、音声の言語（`SpeechSynthesisVoice.lang` (en-US) から取得）、音声が合成エンジンの既定の音声であれば `-- DEFAULT` （`SpeechSynthesisVoice.default` (en-US) が `true` を返しているかを調べることにより確認できます）を表示するよう設定します。

また、 option ごとに `data-` 属性を作成し、そこに音声の名前と言語を格納して、後で簡単に取得できるようにします。そして、その option を select の子として追加します。

```js
function populateVoiceList() {
  voices = synth.getVoices();

  for (const voice of voices) {
    const option = document.createElement("option");
    option.textContent = `${voice.name} (${voice.lang})`;

    if (voice.default) {
      option.textContent += " — DEFAULT";
    }

    option.setAttribute("data-lang", voice.lang);
    option.setAttribute("data-name", voice.name);
    voiceSelect.appendChild(option);
  }
}
```

この関数を実行するようになったら、以下のようにします。これは、 Firefox が `voiceschanged` (en-US) イベントに対応しておらず、 `SpeechSynthesis.getVoices()` (en-US) が発行されると声のリストを返すだけになってしまうためです。しかし、 Chrome では、イベントが発行されるのを待ってからリストを作成する必要があるため、下記のような if 文を記載しています。

```js
populateVoiceList();
if (speechSynthesis.onvoiceschanged !== undefined) {
  speechSynthesis.onvoiceschanged = populateVoiceList;
}
```

#### 入力されたテキストの発話

次に、テキストフィールドに入力されたテキストを話し始めるためのイベントハンドラーを作成します。 `Enter`/`Return` が押されたときにアクションが起こるように、フォームで onsubmit ハンドラーを使用しています。まず、コンストラクターを使用して新しい `SpeechSynthesisUtterance()` インスタンスを作成し、引数としてテキスト入力の値が渡されます。

次に、どの音声を使用するかを考える必要があります。ここでは `HTMLSelectElement` の `selectedOptions` プロパティを使って、現在選択されている `<option>` 要素を返します。次に、この要素の `data-name` 属性を使用して、この属性の値と一致する名前を持つ `SpeechSynthesisVoice` (en-US) オブジェクトを探します。一致する音声オブジェクトを`SpeechSynthesisUtterance.voice`プロパティの値として設定します。

最後に、 `SpeechSynthesisUtterance.pitch` と `SpeechSynthesisUtterance.rate` に、該当する範囲のフォーム要素の値を設定しています。そして、すべての準備が整ったところで、 `SpeechSynthesis.speak()` (en-US) を呼び出して、 `SpeechSynthesisUtterance` インスタンスを引数に渡して発話を始めます。

```js
inputForm.onsubmit = (event) => {
  event.preventDefault();

  const utterThis = new SpeechSynthesisUtterance(inputTxt.value);
  const selectedOption = voiceSelect.selectedOptions[0].getAttribute('data-name');
  for (const voice of voices) {
    if (voice.name === selectedOption) {
      utterThis.voice = voice;
    }
  }
  utterThis.pitch = pitch.value;
  utterThis.rate = rate.value;
  synth.speak(utterThis);
```

ハンドラーの最後の部分では、 `pause` イベントを記述して、 `SpeechSynthesisEvent` がいかに有益な用途で使用できるかを示しています。 `SpeechSynthesis.pause()` (en-US) が呼び出されると、音声が一時停止された文字番号と名前を報告するメッセージを返します。

```js
utterThis.onpause = (event) => {
  const char = event.utterance.text.charAt(event.charIndex);
  console.log(
    `Speech paused at character ${event.charIndex} of "${event.utterance.text}", which is "${char}".`,
  );
};
```

最後に、テキスト入力に対して blur() を呼び出しています。これは主に Firefox OS 上でキーボードを隠すためのものです。

```js
  inputTxt.blur();
}
```

#### 表示されているピッチとレートの値の更新

コードの最後の部分では、スライダーの位置が移動されるたびに、 UI に表示される `pitch`/`rate` 値を更新しています。

```js
pitch.onchange = () => {
  pitchValue.textContent = pitch.value;
};

rate.onchange = () => {
  rateValue.textContent = rate.value;
};
```


サービスワーカーの使用 - Web API

サービスワーカーの使用
===========

この記事はサービスワーカーを使い始めるための情報を提供するページです。基本的な構造、サービスワーカーの登録、新しいサービスワーカーのインストールと有効化のプロセス、サービスワーカーの更新、キャッシュやレスポンスの操作を含めた、オフラインで動作するシンプルなアプリケーションの機能についてです。

サービスワーカーの前提条件
-------------

ウェブユーザーが長年苦しめられてきた主要な問題の一つは、接続を失うことです。世界中の最高のウェブアプリは、ダウンロードできないときの使い勝手が最悪でした。これまでにも、この問題を解決するための技術を生み出す試みはさまざまに行われ、いくつかの問題は解決されてきました。しかし、一番の問題は、資産のキャッシュとカスタムネットワークリクエストのための優れた全体的な制御メカニズムが存在しなかったことです。

このような課題を修正したのがサービスワーカーです。サービスワーカーを使用すると、キャッシュ資産を最初に使用するようにアプリを設定することができ、したがってネットワークからより多くのデータを取得する前に、オフラインの場合でも既定の使い勝手を提供することができます（一般に「オフラインファースト」と呼ばれます）。これはネイティブアプリですでに利用できることで、ウェブアプリよりもネイティブアプリが多く選ばれる主な理由のひとつです。

サービスワーカーはプロキシーサーバーのように機能し、リクエストやレスポンスを自分自身でキャッシュに置き換えて変更することができます。

サービスワーカーを実行するための設定
------------------

サービスワーカーは、現代のすべてのブラウザーで、既定で有効になっています。サービスワーカーを使用してコードを実行するには、コードを HTTPS で提供する必要があります。サービスワーカーは、セキュリティ上の理由から HTTPS を介して実行するように制限されています。HTTPS に対応しているサーバーが必要です。実験をホスティングするには、GitHub、Netlify、Vercel などのサービスを使用することができます。ローカル開発を容易にするために、`localhost` はブラウザーでも安全なオリジンとみなされます。

基本構造
----

サービスワーカーでは、基本的なセットアップの際に下記のステップが一般的に見られます。

1. サービスワーカーのコードが読み取られ、`serviceWorkerContainer.register()` を通して登録されます。成功した場合、サービスワーカーは `ServiceWorkerGlobalScope` で実行されます。これは根本的に特殊なワーカーコンテキストで、メインスレッドから独立しており、 DOM へのアクセスもありません。
2. インストールが行われます。`install` イベントは常にサービスワーカーに送られる最初のイベントです（これを使用して IndexedDB を設定したり、サイト資産をキャッシュしたりするプロセスを開始することができます）。この段階では、アプリケーションはオフラインで使用するためのすべての準備をします。
3. `install` ハンドラーが完了すると、サービスワーカーはインストールされたと見なされます。この時点で、前回までのバージョンのサービスワーカーがアクティブになっており、ページを開くための制御をしている可能性があります。同じサービスワーカーの異なる2つのバージョンを同時に実行することは避けたいので、新しいバージョンはまだアクティブにはなりません。
4. 古いバージョンのサービスワーカーによって制御されているページがすべて閉じられたら、古いバージョンを引退させても問題なくなり、新しくインストールしたサービスワーカーは `activate` イベントを受け取ります。`activate` の主な使用目的は、以前のバージョンのサービスワーカーで使用していたリソースをクリーンアップすることです。新しいサービスワーカーは `skipWaiting()` を呼び出すことで、開いているページが閉じられるのを待たずにすぐにアクティブ化することをリクエストすることができます。新しいサービスワーカーは直ちに `activate` を受け取り、開いているページを引き継ぎます。
5. 有効化後、サービスワーカーはこれでページを制御するようになりますが、それは `register()` が成功した後に開かれたページだけです。言い換えれば、文書が実際に制御下に入るには、再読み込みが必要です。これは、文書におけるサービスワーカーの有無はライフサイクルの開始時に決まり、終了時までその状態が維持されるからです。サービスワーカーが `clients.claim()` を呼び出すと、この既定の動作を上書きして、開いているページに関与することができます。
6. 新しいバージョンのサービスワーカーが取得されるたびに、このサイクルが繰り返され、新しいバージョンのアクティブ化時に前回バージョンの残骸が掃除されます。

![ライフサイクルの図](/ja/docs/Web/API/Service_Worker_API/Using_Service_Workers/sw-lifecycle.svg)

利用可能なサービスワーカーのイベントの概要は次の通りです。

* `install`
* `activate`
* `message`
* 機能イベント
    + `fetch`
    + `sync`
    + `push`
### デモ

サービスワーカーの登録とインストールのごく基本的なことを示すために、シンプルなサービスワーカー というシンプルなデモを作成しました。これは、シンプルな Star Wars レゴの画像ギャラリーです。これは、プロミスを利用した関数で、 JSON オブジェクトから画像データを読み込み、 `fetch()` を用いて画像を読み込んでから、ページの下に画像を並べて表示するものです。今のところ静的でシンプルなものにしています。また、サービスワーカーを登録、インストール、アクティブ化しています。

![Star Wars の文字に続き、レゴで作られたダース・ベイダーの画像が表示されています。](/ja/docs/Web/API/Service_Worker_API/Using_Service_Workers/demo-screenshot.png)

GitHub 上のソースコードを確認し、例をライブで表示してみましょう。

### ワーカーの登録

このアプリの JavaScript ファイルである `app.js` の最初のコードブロックは、以下の通りです。これは、サービスワーカーを使用するためのエントリーポイントです。

```js
const registerServiceWorker = async () => {
  if ("serviceWorker" in navigator) {
    try {
      const registration = await navigator.serviceWorker.register("/sw.js", {
        scope: "/",
      });
      if (registration.installing) {
        console.log("Service worker installing");
      } else if (registration.waiting) {
        console.log("Service worker installed");
      } else if (registration.active) {
        console.log("Service worker active");
      }
    } catch (error) {
      console.error(`Registration failed with ${error}`);
    }
  }
};

// …

registerServiceWorker();
```

1. `if` ブロックは、登録を試みる前にサービスワーカーに対応しているか確認する機能検出試験を行います。
2. 次に、`ServiceWorkerContainer.register()` 関数を使って、このサイトのサービスワーカーを登録します。サービスワーカーのコードはアプリ内にあります（なお、これはオリジンからのファイルの相対 URL であって、それを参照している JS ファイルではありません）。
3. `scope` 引数はオプションで、サービスワーカーが制御するコンテンツのサブセットを指定することができます。このケースでは `'/'` を指定しており、アプリのオリジン配下のすべてのコンテンツを意味しています。もしこれを指定しなくてもこの値が既定値になりますが、指定方法を示すために使用しています。

これは、ワーカーのコンテキストで実行されるサービスワーカーを登録しているため、 DOM にはアクセスしていません。

1 つのサービスワーカーで、多数のページを制御することができます。スコープ内のページが読み込まれるたびに、サービスワーカーはそのページにインストールされて動作します。そのため、サービスワーカースクリプト内でのグローバル変数の扱いには注意が必要だということを心にとどめておいてください。各ページが固有のワーカーを持つわけではありません。

**メモ:** サービスワーカーの良いところは、以上で見てきたような機能の検出をすることで、サービスワーカーに対応していないブラウザーでもオンラインで期待通りの流儀でアプリを使用することができることです。

#### サービスワーカーの登録に失敗する理由

次の可能性が考えられます。

* HTTPS を使用してアプリケーションを実行していない。
* サービスワーカーファイルへのパスが正しく書かれていない。 — アプリのルートディレクトリではなく、アプリのオリジンからの相対パスで書く必要があります。上記の例では、ワーカーが `https://bncb2v.csb.app/sw.js` にあり、アプリのルートは `https://bncb2v.csb.app/` です。しかし、パスは `/sw.js` と書く必要があります。
* 指定されているサービスワーカーがアプリとは異なるオリジンにある。これは許可されていません。
* サービスワーカーはサービスワーカーのスコープ内にあるクライアントからのリクエストのみを取得します。
* サービスワーカーの最大スコープは、ワーカーのある場所です。
* サービスワーカーの最大スコープはワーカーの位置です（言い換えれば、スクリプト `sw.js` が `/js/sw.js` にある場合、 既定では `/js/` 以下の URL しか制御できません）。サービスワーカーの最大スコープのリストは `Service-Worker-Allowed` ヘッダーで指定することができます。
* Firefoxでは、ユーザーがプライベートブラウジングモードである場合、履歴が無効である場合、Firefox を閉じたときに Cookie がクリアされる場合、サービスワーカーの API は隠され使用することができません。
* Chrome の場合、「すべての Cookie をブロックする（推奨しない）」オプションが有効になっていると、登録に失敗します。
### インストールとアクティブ化: キャッシュの作成

サービスワーカーを登録した後、ブラウザーはページ/サイト上でサービスワーカーをインストールおよびアクティブ化しようとします。

インストールが成功裡に完了したとき、 `install` イベントが発行されます。通常、 `install` イベントはオフラインで実行する必要のある資産を、ブラウザーのオフラインキャッシュ領域に配置するために使われます。これをするために、サービスワーカーのストレージ API — `cache` — を使用します。キャッシュはサービスワーカーのグローバルオブジェクトで、レスポンスによって配信された資産を、そのリクエストをキーにして保存することができます。この API はブラウザーの標準キャッシュと同じように動作しますが、そのドメインに特化しています。キャッシュのコンテンツは、クリアするまで保持されます。

サービスワーカーが `install` イベントを扱う方法の例です。

```js
const addResourcesToCache = async (resources) => {
  const cache = await caches.open("v1");
  await cache.addAll(resources);
};

self.addEventListener("install", (event) => {
  event.waitUntil(
    addResourcesToCache([
      "/",
      "/index.html",
      "/style.css",
      "/app.js",
      "/image-list.js",
      "/star-wars-logo.jpg",
      "/gallery/bountyHunters.jpg",
      "/gallery/myLittleVader.jpg",
      "/gallery/snowTroopers.jpg",
    ]),
  );
});
```

1. ここでは サービスワーカー（thisによって）にイベントリスナーを追加して、イベントに `ExtendableEvent.waitUntil()` メソッドをチェーンしています ― これは `waitUntil()` の内部のコードが成功裡に実行されるまで、サービスワーカーがインストールされないことを保証します。
2. `addResourcesToCache()` の内部で、 `caches.open()` を使用して、 `v1` と呼ばれる新しいキャッシュを作成します。これはサイトリソースキャッシュのバージョン 1 となります。次に、作成されたキャッシュに対して `addAll()` を呼び出す関数を呼び出します。この関数の引数には、キャッシュしたいすべてのリソースのオリジンからの相対 URL の配列が渡されます。URL はワーカーの location からの相対パスです。
3. プロミスが拒否された場合、インストールが失敗し、ワーカーは何もしません。これは、コードを修正し、次に登録が発生したときに再試行することができるので、問題ありません。
4. インストールに成功すると、サービスワーカーがアクティブになります。これは、サービスワーカーの初回インストール/アクティベーション時にはあまり明確な用途はありませんが、サービスワーカーが更新された時にはより大きな意味を持ちます（後の サービスワーカーの更新の節を参照してください）。

**メモ:** ウェブストレージ API (`localStorage`) はサービスワーカーキャッシュと同じように動作しますが、同期処理であるため、サービスワーカー内では許可されていません。

**メモ:** 必要であれば、 IndexedDB をサービスワーカー内でデータ保存のために使用することができます。

### リクエストに対するカスタムレスポンス

サイトの資産がキャッシュされたので、サービスワーカーにキャッシュされたコンテンツを使って何かするように指示する必要があります。これは `fetch` イベントを使って実現できます。

1. `fetch` イベントが発行されるたび、指定されたスコープ内の文書とこれらの文書が参照するすべてのリソースを含む、サービスワーカーによって制御されたリソースの取得します（例えば、`index.html` が画像を埋め込むためにオリジン間リクエストを行うと、サービスワーカーを通過します）。
2. `fetch` イベントリスナーをサービスワーカーに割り当てると、そのイベント上で `respondWith()` を呼び出すことで、 HTTP レスポンスを乗っ取ってコンテンツを更新することができます。

```js
self.addEventListener("fetch", (event) => {
  event.respondWith(/\* カスタムコンテンツはこちら \*/);
});
```

3. それぞれのケースで、ネットワークリクエストの URL と一致するリソースでレスポンスすることから始めることができる。

```js
self.addEventListener("fetch", (event) => {
  event.respondWith(caches.match(event.request));
});
```

`caches.match(event.request)` は、ネットワークからリクエストされた各リソースを、キャッシュにある同等のリソースが利用可能であれば、マッチングさせることができるようにします。マッチングは、通常の HTTP リクエストと同様に、URL と様々なヘッダーを介して行われます。

![フェッチイベントの図](/ja/docs/Web/API/Service_Worker_API/Using_Service_Workers/sw-fetch.svg)

失敗したリクエストの復旧
------------

では、 `caches.match(event.request)` はサービスワーカーのキャッシュに一致するものがある場合は良いのですが、一致しない場合はどうでしょうか？もし、何らかの失敗処理を提供しなければ、プロミスは `undefined` で解決され、何も返されないでしょう。

キャッシュからのレスポンスをテストした後、通常のネットワークリクエストにフォールバックすることができます。

```js
const cacheFirst = async (request) => {
  const responseFromCache = await caches.match(request);
  if (responseFromCache) {
    return responseFromCache;
  }
  return fetch(request);
};

self.addEventListener("fetch", (event) => {
  event.respondWith(cacheFirst(event.request));
});
```

キャッシュにないリソースは、ネットワークからリクエストされます。

もっと複雑な戦略を用いると、ネットワークからリソースを要求するだけでなく、キャッシュに保存して、後でそのリソースに対するリクエストをオフラインで取得できるようにすることができます。つまり、Star Warsのギャラリーに画像が追加されたら、アプリが自動的に画像を取得してキャッシュすることができるのです。以下は、このような戦略を実装するためのスニペットです。

```js
const putInCache = async (request, response) => {
  const cache = await caches.open("v1");
  await cache.put(request, response);
};

const cacheFirst = async (request) => {
  const responseFromCache = await caches.match(request);
  if (responseFromCache) {
    return responseFromCache;
  }
  const responseFromNetwork = await fetch(request);
  putInCache(request, responseFromNetwork.clone());
  return responseFromNetwork;
};

self.addEventListener("fetch", (event) => {
  event.respondWith(cacheFirst(event.request));
});
```

リクエスト URL がキャッシュにない場合、 `await fetch(request)` でネットワークリクエストからリソースをリクエストします。その後、レスポンスのクローンをキャッシュに格納します。 `putInCache()` 関数は `caches.open('v1')` と `cache.put()` を使用して、リソースをキャッシュに追加します。本来のレスポンスはブラウザーに返され、それを呼び出したページに渡されます。

リクエストストリームとレスポンスストリームは一度しか読み込めないので、レスポンスの複製を作成する必要があります。ブラウザーにレスポンスを返してキャッシュに入れるには、それを複製する必要があります。つまり、オリジナルはブラウザーに返され、クローンはキャッシュに送られます。これらはそれぞれ一度だけ読み込まれます。

少し奇妙に見えるのは、 `putInCache()` が返すプロミスが待ち状態でないことです。しかしその理由は、レスポンスクローンがキャッシュに追加されるまで、レスポンスを返すのを待ちたくないからです。

今ある唯一の問題は、リクエストがキャッシュに何も一致せず、ネットワークも利用できない場合、やはりリクエストは失敗してしまうということです。何が起こっても、ユーザーは少なくとも何かを得ることができるように、既定の代替処理を提供することにしましょう。

```js
const putInCache = async (request, response) => {
  const cache = await caches.open("v1");
  await cache.put(request, response);
};

const cacheFirst = async ({ request, fallbackUrl }) => {
  // First try to get the resource from the cache
  const responseFromCache = await caches.match(request);
  if (responseFromCache) {
    return responseFromCache;
  }

  // Next try to get the resource from the network
  try {
    const responseFromNetwork = await fetch(request);
    // response may be used only once
    // we need to save clone to put one copy in cache
    // and serve second one
    putInCache(request, responseFromNetwork.clone());
    return responseFromNetwork;
  } catch (error) {
    const fallbackResponse = await caches.match(fallbackUrl);
    if (fallbackResponse) {
      return fallbackResponse;
    }
    // when even the fallback response is not available,
    // there is nothing we can do, but we must always
    // return a Response object
    return new Response("Network error happened", {
      status: 408,
      headers: { "Content-Type": "text/plain" },
    });
  }
};

self.addEventListener("fetch", (event) => {
  event.respondWith(
    cacheFirst({
      request: event.request,
      fallbackUrl: "/gallery/myLittleVader.jpg",
    }),
  );
});
```

この代替画像を選択したのは、失敗する可能性のあるアップデートは新しい画像だけで、他のすべては先に見た `install` イベントのリスナーでのインストールに依存しているためです。

サービスワーカーのナビゲーション先読み
-------------------

 有効にすると、ナビゲーション先読み機能は、フェッチリクエストがなされるとすぐに、サービスワーカーのアクティブ化と並行してリソースのダウンロードを開始します。
 これにより、サービスワーカーがアクティブ化するまで待つ必要がなく、ページへのナビゲーションですぐにダウンロードが開始されるようになります。
 この遅延は比較的稀にしか発生しませんが、発生した場合は避けられないものであり、重大なものになる可能性があります。

まず、サービスワーカーアクティブ化時に `registration.navigationPreload.enable()` (en-US) を使ってこの機能を有効にする必要があります。

```js
self.addEventListener("activate", (event) => {
  event.waitUntil(self.registration?.navigationPreload.enable());
});
```

そして、`event.preloadResponse` を使って `fetch` イベントハンドラーの中で先読みされたリソースのダウンロードが終了するのを待ちます。

前の節の例に引き続き、キャッシュチェックの後に先読みされたリソースを待機し、成功しなかった場合はネットワークから取得するコードを挿入します。

新しい処理は次の通りです。

1. キャッシュをチェック
2. `event.preloadResponse` を待ちます。これは `preloadResponsePromise` として `cacheFirst()` 関数に渡されます。結果が返ってきたら、それをキャッシュします。
3. どちらも定義されていない場合は、ネットワークに行きます。

```js
const addResourcesToCache = async (resources) => {
  const cache = await caches.open("v1");
  await cache.addAll(resources);
};

const putInCache = async (request, response) => {
  const cache = await caches.open("v1");
  await cache.put(request, response);
};

const cacheFirst = async ({ request, preloadResponsePromise, fallbackUrl }) => {
  // First try to get the resource from the cache
  const responseFromCache = await caches.match(request);
  if (responseFromCache) {
    return responseFromCache;
  }

  // Next try to use (and cache) the preloaded response, if it's there
  const preloadResponse = await preloadResponsePromise;
  if (preloadResponse) {
    console.info("using preload response", preloadResponse);
    putInCache(request, preloadResponse.clone());
    return preloadResponse;
  }

  // Next try to get the resource from the network
  try {
    const responseFromNetwork = await fetch(request);
    // response may be used only once
    // we need to save clone to put one copy in cache
    // and serve second one
    putInCache(request, responseFromNetwork.clone());
    return responseFromNetwork;
  } catch (error) {
    const fallbackResponse = await caches.match(fallbackUrl);
    if (fallbackResponse) {
      return fallbackResponse;
    }
    // when even the fallback response is not available,
    // there is nothing we can do, but we must always
    // return a Response object
    return new Response("Network error happened", {
      status: 408,
      headers: { "Content-Type": "text/plain" },
    });
  }
};

// Enable navigation preload
const enableNavigationPreload = async () => {
  if (self.registration.navigationPreload) {
    await self.registration.navigationPreload.enable();
  }
};

self.addEventListener("activate", (event) => {
  event.waitUntil(enableNavigationPreload());
});

self.addEventListener("install", (event) => {
  event.waitUntil(
    addResourcesToCache([
      "/",
      "/index.html",
      "/style.css",
      "/app.js",
      "/image-list.js",
      "/star-wars-logo.jpg",
      "/gallery/bountyHunters.jpg",
      "/gallery/myLittleVader.jpg",
      "/gallery/snowTroopers.jpg",
    ]),
  );
});

self.addEventListener("fetch", (event) => {
  event.respondWith(
    cacheFirst({
      request: event.request,
      preloadResponsePromise: event.preloadResponse,
      fallbackUrl: "/gallery/myLittleVader.jpg",
    }),
  );
});
```

この例では、リソースを「通常」ダウンロードしても先読みしても、同じデータをダウンロードしてキャッシュすることに注意してください。代わりに、先読み時に別のリソースをダウンロードし、キャッシュするように選択することもできます。詳細については、`NavigationPreloadManager` > カスタムレスポンスを参照してください。

サービスワーカーの更新
-----------

サービスワーカーが以前にインストールされているが、ページの更新や読み込みの時に新しいバージョンのワーカーが利用できる場合、新しいバージョンはバックグラウンドでインストールされますが、まだアクティブ化しません。まだ古いサービスワーカーを使用している読み込まれたページがなくなったら、新しいサービスワーカーがアクティブ化します。

**メモ:** `Clients.claim()` を使用して、これを回避することが可能です。

新しいサービスワーカーで、 `install` イベントリスナーをこのようなもの（新しいバージョン番号を通知するもの）に更新したくなるでしょう。

```js
const addResourcesToCache = async (resources) => {
  const cache = await caches.open("v2");
  await cache.addAll(resources);
};

self.addEventListener("install", (event) => {
  event.waitUntil(
    addResourcesToCache([
      "/",
      "/index.html",
      "/style.css",
      "/app.js",
      "/image-list.js",

      // …

      // 新しいバージョンのための新しい他のリソースを入れてください...
    ]),
  );
});
```

サービスワーカーをインストールしている間、以前のバージョンはまだフェッチに対してレスポンスします。新しいバージョンは、バックグラウンドでインストールされています。以前の `v1` キャッシュを妨げないように、新しいキャッシュを `v2` と呼んでいます。

どのページも前回のバージョンを使用していないとき、新しいワーカーが有効化し、フェッチにレスポンスするようになります。

### 古いキャッシュの削除

前の節で見たように、サービスワーカーを新しいバージョンに更新するとき、その `install` イベントハンドラーで新しいキャッシュを作成します。前回バージョンのワーカーによって制御される開くためのページがある一方で、前回バージョンのキャッシュが必要なので、両方のキャッシュを保持する必要があります。前のキャッシュからデータを削除するには `activate` イベントを使用します。

`waitUntil()` に渡されたプロミスは、完了するまで他のイベントをブロックするので、新しいキャッシュ上で初めての `fetch` イベントを取得するときには、クリーンアップ操作が完了していると確信できます。

```js
const deleteCache = async (key) => {
  await caches.delete(key);
};

const deleteOldCaches = async () => {
  const cacheKeepList = ["v2"];
  const keyList = await caches.keys();
  const cachesToDelete = keyList.filter((key) => !cacheKeepList.includes(key));
  await Promise.all(cachesToDelete.map(deleteCache));
};

self.addEventListener("activate", (event) => {
  event.waitUntil(deleteOldCaches());
});
```

開発者ツール
------

* Chrome
* Firefox
    + Firefox のツールバーのカスタマイズオプションで利用できる「このサイトを忘れる」ボタンは、サービスワーカーとそのキャッシュを消去するために使用できます。
* Edge
関連情報
----

* プロミス
* ウェブワーカーの使用


performance.clearResourceTimings() - Web API

performance.clearResourceTimings()
==================================

**`clearResourceTimings()`** メソッドは、`entryType` が "`resource`" のすべての `パフォーマンスエントリー`をブラウザーのパフォーマンスデータバッファーから削除し、パフォーマンスデータバッファーのサイズをゼロに設定します。ブラウザーのパフォーマンスデータバッファーのサイズを設定するには、`Performance.setResourceTimingBufferSize()` メソッドを使用してください。

**注:** この機能は Web Worker 内で利用可能です

構文
--

```js
performance.clearResourceTimings();
```

### 引数

* void
    + :
### 返値

なし

このメソッドに返値はありません。

例
-

```js
function load\_resource() {
  var image = new Image();
  image.src = "https://developer.mozilla.org/mdn-social-share.png";
}
function clear\_performance\_timings() {
  if (performance === undefined) {
    log("Browser does not support Web Performance");
    return;
  }
  // Create a resource timing performance entry by loading an image
  load\_resource();

  var supported = typeof performance.clearResourceTimings == "function";
  if (supported) {
    console.log("Run: performance.clearResourceTimings()");
    performance.clearResourceTimings();
  } else {
    console.log("performance.clearResourceTimings() NOT supported");
    return;
  }
  // getEntries should now return zero
  var p = performance.getEntriesByType("resource");
  if (p.length == 0) console.log("... Performance data buffer cleared");
  else console.log("... Performance data buffer NOT cleared!");
}
```

仕様書
---

| Specification |
| --- |
| Resource Timing # dom-performance-clearresourcetimings |

ブラウザーの互換性
---------

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


performance.getEntriesByName() - Web API

performance.getEntriesByName()
==============================

**`getEntriesByName()`** メソッドは、指定された*名前*と*種別*の `PerformanceEntry` オブジェクトのリストを返します。リストのメンバー（*エントリー*）は、明示的な時点でパフォーマンス*マーク*または*メジャー*を作成することで（たとえば `mark()` メソッドを呼び出すことで）作成できます。

**注:** この機能は Web Worker 内で利用可能です

構文
--

```js
entries = window.performance.getEntriesByName(name, type);
```

### 引数

name

取得するエントリーの名前

type 省略可

"`mark`" など、取得するエントリーの種類。有効なエントリー種別の一覧は `PerformanceEntry.entryType` にあります。

### 返値

entries

指定された `name` と `type` を持つ `PerformanceEntry` オブジェクトのリスト。 `type` 引数が指定されていない場合は、返されるエントリーを決定するために名前だけが使用されます。項目はエントリー '`startTime` に基づいて時系列に並んでいます。指定された基準を満たすオブジェクトがない場合は、空のリストが返されます。

例
-

```js
function use\_PerformanceEntry\_methods() {
  log("PerformanceEntry tests ...");

  if (performance.mark === undefined) {
    log("... performance.mark Not supported");
    return;
  }

  // Create some performance entries via the mark() method
  performance.mark("Begin");
  do\_work(50000);
  performance.mark("End");
  performance.mark("Begin");
  do\_work(100000);
  performance.mark("End");
  do\_work(200000);
  performance.mark("End");

  // Use getEntries() to iterate through the each entry
  var p = performance.getEntries();
  for (var i = 0; i < p.length; i++) {
    log("Entry[" + i + "]");
    check\_PerformanceEntry(p[i]);
  }

  // Use getEntries(name, entryType) to get specific entries
  p = performance.getEntries({ name: "Begin", entryType: "mark" });
  for (var i = 0; i < p.length; i++) {
    log("Begin[" + i + "]");
    check\_PerformanceEntry(p[i]);
  }

  // Use getEntriesByType() to get all "mark" entries
  p = performance.getEntriesByType("mark");
  for (var i = 0; i < p.length; i++) {
    log(
      "Mark only entry[" +
        i +
        "]: name = " +
        p[i].name +
        "; startTime = " +
        p[i].startTime +
        "; duration = " +
        p[i].duration,
    );
  }

  // Use getEntriesByName() to get all "mark" entries named "Begin"
  p = performance.getEntriesByName("Begin", "mark");
  for (var i = 0; i < p.length; i++) {
    log(
      "Mark and Begin entry[" +
        i +
        "]: name = " +
        p[i].name +
        "; startTime = " +
        p[i].startTime +
        "; duration = " +
        p[i].duration,
    );
  }
}
```

仕様書
---

| Specification |
| --- |
| Performance Timeline # dom-performance-getentriesbyname |

ブラウザーの互換性
---------

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


Performance.navigation - Web API

Performance.navigation
======================

**非推奨:** この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

古い **`Performance.navigation`** は読み取り専用プロパティで、指定された閲覧コンテキスト内で発生するナビゲーションの種類を表す `PerformanceNavigation` オブジェクトを返します。リソースを取得するまでに必要なリダイレクトの数などです。

このプロパティはワーカーでは利用できません。

**警告:** このプロパティは Navigation Timing Level 2 仕様書では非推奨です。代わりに `PerformanceNavigationTiming` を使用してください。

構文
--

```js
navObject = performance.navigation;
```

仕様書
---

 この機能は標準化路線上にはありません。 Navigation Timing 仕様書では非推奨としています。
 代わりに `PerformanceNavigationTiming` インターフェイスを使用してください。

ブラウザーの互換性
---------

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

関連情報
----

* 所属先の `Performance` インターフェイス


performance.setResourceTimingBufferSize() - Web API

performance.setResourceTimingBufferSize()
=========================================

**`setResourceTimingBufferSize()`** メソッドは、ブラウザーのリソースタイミングバッファーサイズを、指定された数の "`resource`" の `パフォーマンスエントリー種別`のオブジェクトに設定します。

ブラウザーの推奨リソースタイミングバッファサイズは少なくとも`パフォーマンスエントリー`オブジェクト 150 件分です。

**注:** この機能は Web Worker 内で利用可能です

構文
--

```js
performance.setResourceTimingBufferSize(maxSize);
```

### 引数

maxSize

`number` で、ブラウザーがパフォーマンスエントリーバッファーに保持する必要がある`パフォーマンスエントリー`オブジェクトの最大数を表します。

### 返値

なし

このメソッドには返値はありません。

例
-

```js
function setResourceTimingBufferSize(maxSize) {
  if (performance === undefined) {
    log("Browser does not support Web Performance");
    return;
  }
  var supported = typeof performance.setResourceTimingBufferSize == "function";
  if (supported) {
    log("... Performance.setResourceTimingBufferSize() = Yes");
    performance.setResourceTimingBufferSize(maxSize);
  } else {
    log("... Performance.setResourceTimingBufferSize() = NOT supported");
  }
}
```

仕様書
---

| Specification |
| --- |
| Resource Timing # dom-performance-setresourcetimingbuffersize |

ブラウザーの互換性
---------

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


performance.mark() - Web API

performance.mark()
==================

**`mark()`** メソッドは、ブラウザーのパフォーマンスエントリーバッファーに、指定された名前で`timestamp` を作成します。

アプリケーション定義のタイムスタンプは、`Performance` インタフェースの `getEntries*()` メソッド (`getEntries()`、`getEntriesByName()` または`getEntriesByType()`) のいずれかによって取得できます。

`mark()` は内部的にデータを `PerformanceEntry` として格納します。

**注:** この機能は Web Worker 内で利用可能です

構文
--

```js
performance.mark(name);
performance.mark(measureName, markOptions);
```

### 引数

name

`DOMString` で、マークの名前を表します。このメソッドで指定された `name` がすでに `PerformanceTiming` インターフェイスに存在していた場合は、 `SyntaxError` が発生します。

`markOptions` 省略可

このマークのためにタイムスタンプと追加のメタデータを指定するためのオブジェクトです。

`detail`

マークに含める任意のメタデータです。

`startTime`

マークの時刻として使用する `DOMHighResTimeStamp` です。

### 返値

entry

生成された `PerformanceMark` エントリーです。

例
-

次の例は、`mark()` を使用して `PerformanceMark` エントリーを作成および取得する方法を示しています。

```js
// たくさんの mark を作成します。
performance.mark("squirrel");
performance.mark("squirrel");
performance.mark("monkey");
performance.mark("monkey");
performance.mark("dog");
performance.mark("dog");

// PerformanceMark エントリーをすべて取得します。
const allEntries = performance.getEntriesByType("mark");
console.log(allEntries.length);
// 6

// "monkey" PerformanceMark エントリーをすべて入手します。
const monkeyEntries = performance.getEntriesByName("monkey");
console.log(monkeyEntries.length);
// 2

// すべての mark を消去します。
performance.clearMarks();
```

仕様書
---

| Specification |
| --- |
| User Timing # dom-performance-mark |

ブラウザーの互換性
---------

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


performance.measure() - Web API

performance.measure()
=====================

**`measure()`** メソッドは、マーク間、ナビゲーション開始時刻、または現在時刻の間に、ブラウザーの*パフォーマンスエントリーバッファー*に名前付き `timestamp` を作成します。

2 つのマーク間を測定するときは、それぞれ*開始マーク*と*終了マーク*があります。名前付きタイムスタンプは、*メジャー*と呼ばれます。

`measure` は、`Performance` インターフェイスのうち、
 (`getEntries()`,
 `getEntriesByName()`,
 `getEntriesByType()`) のいずれかを使用して取得できます。

**注:** この機能は Web Worker 内で利用可能です

構文
--

```js
measure(measureName);
measure(measureName, MeasureOptions);
measure(measureName, startMark);
measure(measureName, startMark, endMark);
```

`measureName` のみが指定された場合、開始タイムスタンプはゼロに設定され、（時間を計算するために使用される）終了タイムスタンプは `Performance.now()` から返される値になります。

### 引数

`measureName`

`DOMString` で、メジャーの名前を表します。

`MeasureOptions` 省略可

メジャーのすべてのオプションを含むオブジェクトです（`startMark` と `endMark` はこのオブジェクト内で指定することも、独自の引数で指定することもできます）。

`detail`

メジャーに含める任意のメタデータです。

`start`

 開始時刻として使用される `DOMHighResTimeStamp` のタイムスタンプ、または開始マークとして使用される `DOMString` です。
 これが開始マークの名前を表す場合は、 `startMark` の場合と同じように定義します（すなわち、既存のマークまたは `PerformanceTiming` プロパティの名前でなければなりません）。

`duration`

開始マークと終了マークのそれぞれの時刻 (`DOMHighResTimeStamp`) 間の時間.

`end`

 終了時刻として使用される `DOMHighResTimeStamp` のタイムスタンプ、または終了マークとして使用される `DOMString` です。
 これが終了マークの名前を表す場合は、 `endMark` の場合と同じように定義します（すなわち、既存のマークまたは `PerformanceTiming` プロパティの名前でなければなりません）。

`startMark` 省略可

`DOMString` で、このメジャーの開始マークの名前を表します。
 `PerformanceTiming` プロパティの名前にすることもできます。
 既存の `PerformanceMark` または `PerformanceTiming` を表していない名前を指定すると `SyntaxError` の `DOMException` が発生します。

`endMark` 省略可

`DOMString` で、このメジャーの終了マークの名前を表します。
 `PerformanceTiming` プロパティの名前にすることもできます。
 既存の `PerformanceMark` または `PerformanceTiming` を表していない名前を指定すると `SyntaxError` の `DOMException` が発生します。

### 返値

生成された `PerformanceMeasure` のエントリーです。

返される*メジャー*には、以下のプロパティ値になります。

* `entryType` - "`measure`" が設定されます。
* `name` - "`name`" 引数が設定されます。
* `startTime` - 以下のように設定されます。
    + `MeasureOptions.start` で指定された場合は `timestamp`。
    + `MeasureOptions.start` または `startMark` で指定された場合は、開始マークのタイムスタンプ。
    + `MeasureOptions.end` と `MeasureOptions.duration` から計算されたタイムスタンプ（`MeasureOptions.start` が指定されていない場合）。
    + 指定されておらず、他の値から特定することができない場合は 0。
* `duration` - `DOMHighResTimeStamp` で、終了タイムスタンプから `startTime` を引いて計算されたメジャーの時間を設定します。
 終了タイムスタンプは以下のいずれかになります。
    + `MeasureOptions.end` で指定された場合は `timestamp`。
    + `MeasureOptions.end` または `endMark` で指定された場合は、終了マークのタイムスタンプ。
    + `MeasureOptions.start` と `MeasureOptions.duration` から計算されたタイムスタンプ（`MeasureOptions.end` が指定されていない場合）。
    + 終了マークが指定されていないか、他の値から特定することができない場合は、 `Performance.now()` で返される値。
* `detail` - `MeasureOptions` で渡された値に設定されます。
例外
--

`TypeError` `DOMException`

start, end, duration の何れかが曖昧になる場合に発生します。

* `endMark` と `MeasureOptions` の両方が指定された。
* `MeasureOptions` が指定されたが、 `start` および `end` メンバーが指定されなかった。
* `MeasureOptions` が `start`, `end`, `duration` のメンバーすべてある状態（そして不整合な状態）で指定された。

`SyntaxError` `DOMException`

その名前のマークが存在しない場合に発生します。

* `endMark` または `MeasureOptions.end` のどちらかを使用してエンドマークが指定されたが、一致する名前のパフォーマンスバッファーに `PerformanceMark`がない。
* `endMark` または `MeasureOptions.end` のどちらかを使用してエンドマークが指定されたが、 `PerformanceTiming` インターフェイスの読み取り専用属性に変換することができない。
* 開始マークが `startMark` または `MeasureOptions.start` のどちらかで指定されているが、一致する名前のパフォーマンスバッファーに `PerformanceMark`がない。
* 開始マークが `startMark` または `MeasureOptions.start` のどちらかで指定されているが、 `PerformanceTiming` インターフェイスの読み取り専用属性に変換することができない。

`DataCloneError` `DOMException`

`MeasureOptions.detail` が `null` 以外の値であり、 HTML の "StructuredSerialize" アルゴリズムでシリアライズできない場合です。

`RangeError`

`MeasureOptions.detail` が `null` 以外の値であり、 HTML の "StructuredSerialize" アルゴリズムでシリアライズする際にメモリーが割り当てられなかった場合です。

例
-

次の例は、ブラウザーのパフォーマンスエントリーバッファーに `measure()` を使用して新しい*メジャー*`パフォーマンスエントリー`を作成する方法を示しています。

```js
const markerNameA = "example-marker-a"
const markerNameB = "example-marker-b"

// いくつかのネストしたタイムアウトを実行し、それぞれに対して PerformanceMark を作成します。
performance.mark(markerNameA);
setTimeout(function() {
  performance.mark(markerNameB);
  setTimeout(function() {

    // さまざまな測定値を作成します。
    performance.measure("measure a to b", markerNameA, markerNameB);
    performance.measure("measure a to now", markerNameA);
    performance.measure("measure from navigation start to b", undefined, markerNameB);
    performance.measure("measure from the start of navigation to now");

    // すべての測定値を引き出します。
    console.log(performance.getEntriesByType("measure"));

    // 最後に、エントリ-
    を整理します。
    performance.clearMarks();
    performance.clearMeasures();
  }, 1000);
}, 1000);
```

仕様書
---

| Specification |
| --- |
| User Timing # dom-performance-measure |

ブラウザーの互換性
---------

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


performance.getEntriesByType() - Web API

performance.getEntriesByType()
==============================

**`getEntriesByType()`** メソッドは、指定された型の `PerformanceEntry` オブジェクトのリストを返します。リストのメンバー（エントリー）は、明示的な時点でパフォーマンス*マーク*または*メジャー*を作成することで（たとえば `mark()` メソッドを呼び出すことで）作成できます。

**注:** この機能は Web Worker 内で利用可能です

構文
--

```js
entries = window.performance.getEntriesByType(type);
```

### 引数

type

"`mark`" など、取得するエントリーの種類。有効なエントリー種別の一覧は `PerformanceEntry.entryType` にあります。

### 返値

entries

指定された `type` を持つ `PerformanceEntry` オブジェクトのリスト。項目はエントリーの `startTime` に基づいて時系列に並んでいます。指定された `type` を持つオブジェクトがない場合、または引数が指定されていない場合は、空のリストが返されます。

例
-

```js
function usePerformanceEntryMethods() {
  log("PerformanceEntry tests ...");

  if (performance.mark === undefined) {
    log("... performance.mark Not supported");
    return;
  }

  // Create some performance entries via the mark() method
  performance.mark("Begin");
  doWork(50000);
  performance.mark("End");
  performance.mark("Begin");
  doWork(100000);
  performance.mark("End");
  doWork(200000);
  performance.mark("End");

  // Use getEntries() to iterate through the each entry
  var p = performance.getEntries();
  for (var i = 0; i < p.length; i++) {
    log("Entry[" + i + "]");
    checkPerformanceEntry(p[i]);
  }

  // Use getEntries(name, entryType) to get specific entries
  p = performance.getEntries({ name: "Begin", entryType: "mark" });
  for (var i = 0; i < p.length; i++) {
    log("Begin[" + i + "]");
    checkPerformanceEntry(p[i]);
  }

  // Use getEntriesByType() to get all "mark" entries
  p = performance.getEntriesByType("mark");
  for (var i = 0; i < p.length; i++) {
    log(
      "Mark only entry[" +
        i +
        "]: name = " +
        p[i].name +
        "; startTime = " +
        p[i].startTime +
        "; duration = " +
        p[i].duration,
    );
  }

  // Use getEntriesByName() to get all "mark" entries named "Begin"
  p = performance.getEntriesByName("Begin", "mark");
  for (var i = 0; i < p.length; i++) {
    log(
      "Mark and Begin entry[" +
        i +
        "]: name = " +
        p[i].name +
        "; startTime = " +
        p[i].startTime +
        "; duration = " +
        p[i].duration,
    );
  }
}
```

仕様書
---

| Specification |
| --- |
| Performance Timeline # dom-performance-getentriesbytype |

ブラウザーの互換性
---------

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


performance.clearMeasures() - Web API

performance.clearMeasures()
===========================

**`clearMeasures()`** メソッドは、ブラウザーのパフォーマンスエントリーバッファーから*名前付きメジャー*を削除します。このメソッドが引数なしで呼び出された場合、エントリー種別が "`measure`" のパフォーマンスエントリーがすべてパフォーマンスエントリーバッファーから削除されます。

**注:** この機能は Web Worker 内で利用可能です

構文
--

```js
performance.clearMeasures();
performance.clearMeasures(name);
```

### 引数

name 省略可

タイムスタンプの名前を表す `DOMString` です。 この引数を省略すると、エントリー種別が "`measure`" であるすべてのパフォーマンスエントリーが削除されます。

### 返値

* void
    + :
例
-

次の例は、`clearMeasures()` メソッドの両方の使用方法を示しています。

```js
// Create a small helper to show how many PerformanceMeasure entries there are.
function logMeasureCount() {
  console.log(
    "Found this many entries: " +
      performance.getEntriesByType("measure").length,
  );
}

// Create a bunch of measures.
performance.measure("from navigation");
performance.mark("a");
performance.measure("from mark a", "a");
performance.measure("from navigation");
performance.measure("from mark a", "a");
performance.mark("b");
performance.measure("between a and b", "a", "b");

logMeasureCount(); // "Found this many entries: 5"

// Delete just the "from navigation" PerformanceMeasure entries.
performance.clearMeasures("from navigation");
logMeasureCount(); // "Found this many entries: 3"

// Delete all of the PerformanceMeasure entries.
performance.clearMeasures();
logMeasureCount(); // "Found this many entries: 0"
```

仕様書
---

| Specification |
| --- |
| User Timing # dom-performance-clearmeasures |

ブラウザーの互換性
---------

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


performance.clearMarks() - Web API

performance.clearMarks()
========================

**`clearMarks()`** メソッドは、ブラウザーのパフォーマンスエントリーバッファーから*名前付きマーク*を削除します。このメソッドが引数なしで呼び出された場合、エントリー種別が "`mark`" のパフォーマンスエントリーがすべてパフォーマンスエントリーバッファーから削除されます。

**注:** この機能は Web Worker 内で利用可能です

構文
--

```js
performance.clearMarks();
performance.clearMarks(name);
```

### 引数

name 省略可

タイムスタンプの名前を表す `DOMString` です。 この引数を省略すると、エントリー種別が "`mark`" であるすべてのパフォーマンスエントリーが削除されます。

### 返値

* void
    + :
例
-

次の例は、`clearMarks()` メソッドの両方の使用法を示しています。

```js
// PerformanceMark のエントリーがいくつあるかを表示する小さなヘルパーを作成します。
function logMarkCount() {
  console.log(
    "Found this many entries: " + performance.getEntriesByType("mark").length,
  );
}

// Create a bunch of marks.
performance.mark("squirrel");
performance.mark("squirrel");
performance.mark("monkey");
performance.mark("monkey");
performance.mark("dog");
performance.mark("dog");

logMarkCount(); // "Found this many entries: 6"

// Delete just the "squirrel" PerformanceMark entries.
performance.clearMarks("squirrel");
logMarkCount(); // "Found this many entries: 4"

// Delete all of the PerformanceMark entries.
performance.clearMarks();
logMarkCount(); // "Found this many entries: 0"
```

仕様書
---

| Specification |
| --- |
| User Timing # dom-performance-clearmarks |

ブラウザーの互換性
---------

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


Performance.timeOrigin - Web API

Performance.timeOrigin
======================

**Experimental:** **これは実験的な機能です。**
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

**`timeOrigin`** は `Performance` インターフェイスの読み取り専用プロパティで、パフォーマンス測定の開始時刻の高解像度タイムスタンプを返します。

**注:** この機能は Web Worker 内で利用可能です

構文
--

```js
var timeOrigin = performance.timeOrigin;
```

### 値

高解像度のタイムスタンプです。

仕様書
---

| Specification |
| --- |
| High Resolution Time # dom-performance-timeorigin |

ブラウザーの互換性
---------

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


performance.getEntries() - Web API

performance.getEntries()
========================

**`getEntries()`** メソッドは、そのページのすべての `PerformanceEntry` オブジェクトのリストを返します。リストのメンバー（エントリー）は、明示的な時点でパフォーマンスマークまたはメジャーを作成することで（たとえば `mark()` メソッドを呼び出すことで）作成できます。特定の種類のパフォーマンスエントリーや特定の名前のパフォーマンスエントリーにのみ関心がある場合は、 `getEntriesByType()` と `getEntriesByName()` を参照してください。

**注:** この機能は Web Worker 内で利用可能です

構文
--

一般的な構文:

```js
entries = window.performance.getEntries();
```

### 返値

entries

`PerformanceEntry` オブジェクトの配列。項目はエントリー '`startTime` に基づいて時系列に並んでいます。

例
-

```js
function use\_PerformanceEntry\_methods() {
  console.log("PerformanceEntry tests ...");

  if (performance.mark === undefined) {
    console.log("... performance.mark Not supported");
    return;
  }

  // Create some performance entries via the mark() method
  performance.mark("Begin");
  do\_work(50000);
  performance.mark("End");
  performance.mark("Begin");
  do\_work(100000);
  performance.mark("End");
  do\_work(200000);
  performance.mark("End");

  // Use getEntries() to iterate through the each entry
  let p = performance.getEntries();
  for (var i = 0; i < p.length; i++) {
    console.log("Entry[" + i + "]");
    check\_PerformanceEntry(p[i]);
  }

  // Use getEntriesByType() to get all "mark" entries
  p = performance.getEntriesByType("mark");
  for (let i = 0; i < p.length; i++) {
    console.log(
      "Mark only entry[" +
        i +
        "]: name = " +
        p[i].name +
        "; startTime = " +
        p[i].startTime +
        "; duration = " +
        p[i].duration,
    );
  }

  // Use getEntriesByName() to get all "mark" entries named "Begin"
  p = performance.getEntriesByName("Begin", "mark");
  for (let i = 0; i < p.length; i++) {
    console.log(
      "Mark and Begin entry[" +
        i +
        "]: name = " +
        p[i].name +
        "; startTime = " +
        p[i].startTime +
        "; duration = " +
        p[i].duration,
    );
  }
}
```

仕様書
---

| Specification |
| --- |
| Performance Timeline # dom-performance-getentries |

ブラウザーの互換性
---------

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


performance.now() - Web API

performance.now()
=================

**`performance.now()`** メソッドは、ミリ秒単位で計測された `DOMHighResTimeStamp` を返します。

**注:** この機能は Web Worker 内で利用可能です

返値は時刻原点からの経過時間を表します。

次の点に留意してください。

* `Window` コンテキストから生成された専用ワーカー (dedicated worker) では、この値は生成元の window における`performance.now()` の値よりも小さい値になります。従来はメインコンテキストの `t0` と同じでしたが、変更されました。
* 共有ワーカー (shared worker) またはサービスワーカー (service worker) では、この値はメインコンテキストでの値よりも大きくなるかもしれません。 window はワーカーよりも後に生成される可能性があるからです。

ブラウザーは通常、 Spectre のような潜在的なセキュリティ脅威を軽減するために、予測可能性を低下させる目的で、返される値をある量で丸めることを覚えておくことが重要です。これは、タイマーの解像度や精度を制限することで、意図的にある程度不正確にします。例えば、 Firefox は返される時刻を 1 ミリ秒単位で丸めます。

返される値の精度は、セキュリティ上の懸念が他の手段で軽減された場合、またはされた場合に変更される可能性があります。

構文
--

```js
t = performance.now();
```

例
-

```js
const t0 = performance.now();
doSomething();
const t1 = performance.now();
console.log(`Call to doSomething took ${t1 - t0} milliseconds.`);
```

JavaScript で利用できる他の時刻のデータ（例えば `Date.now`）とは異なり、 `performance.now()` が返すタイムスタンプは、 1 ミリ秒の分解能に制限されません。代わりに、マイクロ秒までの精度を持った浮動小数点の値で時刻を表します。

また、`Date.now()` とは違い、`performance.now()` が返す値は、（手動で調整、または NTP のようなソフトウェアで変更される可能性がある）システムクロックから独立しており、常に一定の割合で増加します。一方、 `performance.timing.navigationStart + performance.now()` は、おおよそ `Date.now()` と等しくなります。

時間精度の引き下げ
---------

 タイミング攻撃やフィンガープリンティングから保護するため、ブラウザーの設定によっては、 `performance.now()` の精度が丸められることがあります。
 Firefox では、 `privacy.reduceTimerPrecision` の設定が既定で有効になっており、既定で 1 ミリ秒となっています。

```js
// Firefox 60 での時間精度の引き下げ (1ms)
performance.now();
// 8781416
// 8781815
// 8782206
// ...

// `privacy.resistFingerprinting` 有効化による時間精度の引き下げ`
performance.now();
// 8865400
// 8866200
// 8866700
// ...
```

Firefox では `privacy.resistFingerprinting` も有効にすることができます。これは、精度を 100 ミリ秒または `privacy.resistFingerprinting.reduceTimerPrecision.microseconds` のどちらか大きい方へ変更します。

Firefox 79 以降では、高精度タイマーは文書が `Cross-Origin-Opener-Policy` および `Cross-Origin-Embedder-Policy` ヘッダーを使用してクロスオリジン分離を行っている場合に使用することができるようになりました。
```

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp
```

これらのヘッダーは、最上位の文書がクロスオリジン文書と閲覧コンテキストグループを共有しないことを保証します。 COOP プロセスは、文書を分離し、潜在的な攻撃者がポップアップでそれを開いていたとしても、グローバルオブジェクトにアクセスできないようにし、 XS-Leaks と呼ばれる一連のクロスオリジン攻撃を防止しています。

仕様
--

| Specification |
| --- |
| High Resolution Time # dom-performance-now |

仕様書
---

| Specification |
| --- |
| High Resolution Time # dom-performance-now |

ブラウザーの互換性
---------

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

関連情報
----

* When milliseconds are not enough: performance.now() (HTML5 Rocks)


Performance.timing - Web API

Performance.timing
==================

**非推奨:** この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

古い **`Performance.timing`** 読み取り専用プロパティは、遅延時間に関するパフォーマンス情報を含む `PerformanceTiming` オブジェクトを返します。

このプロパティはワーカーでは使用できません。

**警告:** このプロパティは Navigation Timing Level 2 仕様書では非推奨です。代わりに `PerformanceNavigationTiming` を使用してください。

構文
--

```js
timingInfo = performance.timing;
```

仕様書
---

 この機能は標準化路線上にはありません。 Navigation Timing 仕様書では非推奨としています。
 代わりに `PerformanceNavigationTiming` インターフェイスを使用してください。

ブラウザーの互換性
---------

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

関連情報
----

* 所属先の `Performance` インターフェイス


Performance: resourcetimingbufferfull イベント - Web API

Performance: resourcetimingbufferfull イベント
==========================================

`resourcetimingbufferfull` イベントは、ブラウザーのリソースタイミングバッファーがいっぱいになると発生します。

|  |  |
| --- | --- |
| バブリング | はい |
| キャンセル | 可 |
| インターフェイス | `Event` |
| イベントハンドラープロパティ | `onresourcetimingbufferfull` |

例
-

次の例では、`onresourcetimingbufferfull` プロパティにコールバック関数を設定します。

```js
function buffer\_full(event) {
  console.log("WARNING: Resource Timing Buffer is FULL!");
  performance.setResourceTimingBufferSize(200);
}
function init() {
  // リソースバッファーが一杯になったときのコールバックを設定
  performance.onresourcetimingbufferfull = buffer_full;
}
<body onload="init()">
```

addEventListener() 関数を使用してハンドラーを設定することもできます。

```js
performance.addEventListener("resourcetimingbufferfull", buffer_full);
```

仕様書
---

| Specification |
| --- |
| Resource Timing # dom-performance-onresourcetimingbufferfull |

ブラウザーの互換性
---------

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

関連情報
----

* `Performance.clearResourceTimings()`
* `Performance.setResourceTimingBufferSize()`


performance.toJSON() - Web API

performance.toJSON()
====================

**`toJSON()`** は `Performance` インターフェイスのメソッドで、標準のシリアライザーです。パフォーマンスオブジェクトのプロパティの JSON 表現を返します。

**注:** この機能は Web Worker 内で利用可能です

構文
--

```js
myPerf = performance.toJSON();
```

### 引数

* なし
    + :
### 返値

myPerf

`Performance` オブジェクトをシリアライズした JSON オブジェクト。

例
-

```js
var js;
js = window.performance.toJSON();
console.log("json = " + JSON.stringify(js));
```

仕様書
---

| Specification |
| --- |
| High Resolution Time # dom-performance-tojson |

ブラウザーの互換性
---------

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