recursal/MDN huggingface dataset:
ServiceWorkerRegistration.showNotification()
============================================

`showNotification()` は `ServiceWorkerRegistration` インターフェイスのメソッドで、アクティブなサービスワーカー上で通知を作成します。

**メモ:** この機能はウェブワーカーで利用できます。

構文
--


```js
showNotification(title)
showNotification(title, options)
```

### 引数

`title`

通知内に表示する必要があるタイトル

`options` 省略可

通知の設定を可能にするオブジェクト。 次のプロパティを持つことができます。

`actions` 
Experimental

通知に表示するアクションの配列。 配列のメンバーはオブジェクトリテラルである必要があります。 次の値が含まれる場合があります。

`action`

通知に表示されるユーザーアクションを識別する文字列。

`title`

ユーザーに表示されるアクションテキストを含む文字列。

`icon`

アクションで表示するアイコンの URL を含む文字列。

適切なレスポンスは、 `event.action` を `notificationclick` イベントで使用することで作成されます。

`badge` 
Experimental

文字列で、Android の通知バーなど、通知自体を表示するのに十分なスペースがない場合に通知を表す画像の URL が入ります。Android 端末では、バッジは最大 4 倍の解像度、約 96 x 96 ピクセルの端末に対応する必要があり、画像は自動的にマスクされます。

`body`

通知内に表示する追加のコンテンツを表す文字列。

`data` 
Experimental

通知に関連付ける任意のデータ。 これは任意のデータ型にすることができます。

`dir`

通知の方向。 `auto`、`ltr`、`rtl` のいずれかです。

`icon`

通知でアイコンとして使用される画像の URL を含む文字列。

`image` 
Experimental

通知に表示される画像の URL を含む文字列。

`lang`

通知内で使用される言語を指定します。 この文字列は、RFC 5646: 言語識別子のタグ (BCP 47 とも呼ばれる)に基づく有効なものである必要があります。

`renotify` 
Experimental

論理値で、`tag` 値を再利用するときにバイブレーションと可聴アラートを抑制するかどうかを示します。 *オプション*の `renotify` が `true` で、*オプション*の `tag` が空の文字列の場合、TypeError が発生します。既定値は `false` です。

`requireInteraction` 
Experimental

画面が十分に大きい端末では、ユーザーがクリックするか閉じるまで通知をアクティブにしておく必要があることを示します。 この値がないか `false` の場合、デスクトップ版の Chrome は約 20 秒後に通知を自動的に最小化します。既定値は `false` です。

`silent`

設定されている場合、音やバイブレーションは発生しないことを示します。*オプション*の `silent` が `true` で、*オプション*の `vibrate` が存在する場合、TypeError 例外が発生します。既定値は `false` です。

`tag`

必要に応じてスクリプトを使用して通知を検索、置換、または削除できるようにする所与の通知の ID です。

`timestamp`

この通知に関連付けられた時刻で、ミリ秒単位のUnix 時刻で表されるタイムスタンプです。これは過去に、端末がオフラインだったためにすぐに配信できなかったメッセージに通知が使用された場合や、これから始まる会議に向けて通知が使用された場合などです。

`vibrate` 
Experimental

通知の表示で実行するバイブレーションパターン。 バイブレーションパターンは、メンバーが 1 つしかない配列にすることができます。 値はミリ秒単位の時間で、偶数のインデックス（0、2、4 など）は振動する時間を示し、奇数のインデックスは一時停止する時間を示します。例えば、 `[300, 100, 400]` は、 300 ミリ秒振動し、 100 ミリ秒休止してから、 400 ミリ秒振動します。


返値
--

`undefined` に解決するプロミス (`Promise`) です。

例
-


```js
navigator.serviceWorker.register("sw.js");

function showNotification() {
  Notification.requestPermission((result) => {
    if (result === "granted") {
      navigator.serviceWorker.ready.then((registration) => {
        registration.showNotification("バイブレーションの例", {
          body: "ブンブン! ブンブン!",
          icon: "../images/touch/chrome-touch-icon-192x192.png",
          vibrate: [200, 100, 200, 100, 200, 100, 200],
          tag: "vibration-sample",
        });
      });
    }
  });
}
```


上記の関数を適切なタイミングで呼び出すには、`onnotificationclick` イベントハンドラーが使用できます。

現在のサービスワーカーから発生した `Notification` の詳細は、 `ServiceWorkerRegistration.getNotifications()` を使用して取得することもできます。

仕様書
---

| Specification |
| --- |
| Notifications API Standard # dom-serviceworkerregistration-shownotification |

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

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

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

**`backgroundFetch`** は `ServiceWorkerRegistration` インターフェイスのプロパティで、`BackgroundFetchManager` オブジェクトへの参照を返します。これは、バックグラウンドフェッチ操作を開始することができます。

値
-

`BackgroundFetchManager` オブジェクト。

例
-

### バックグラウンドフェッチの開始

次のコードは、`backgroundFetch` プロパティにアクセスし、これを使用してバックグラウンドフェッチ操作を開始するものです。


```js
// main.js
async function requestBackgroundFetch(movieData) {
  const swRegistration = await navigator.serviceWorker.ready;
  const fetchRegistration = await swRegistration.backgroundFetch.fetch(
    "download-movie",
    ["/my-movie-part-1.webm", "/my-movie-part-2.webm"],
    {
      icons: movieIcons,
      title: "Downloading my movie",
      downloadTotal: 60 \* 1024 \* 1024,
      label: "Downloading a show",
    },
  );
  //...
}
```

仕様書
---

| Specification |
| --- |
| Background Fetch # dom-serviceworkerregistration-backgroundfetch |

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

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

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

**`paymentManager`** は `ServiceWorkerRegistration` インターフェイスのプロパティで、決済アプリの `PaymentManager` (en-US) インスタンスを返します。これは決済アプリの様々な機能を管理するために使用されます。

値
-

`PaymentManager` (en-US) のオブジェクトインスタンスです。

例
-


```js
navigator.serviceWorker.register("serviceworker.js").then((registration) => {
  registration.paymentManager.userHint = "Card number should be 16 digits";

  registration.paymentManager
    .enableDelegations(["shippingAddress", "payerName"])
    .then(() => {
      // ...
    });

  // ...
});
```


* `PaymentManager.userHint` (en-US) は、決済ハンドラー UI で決済アプリの名前とアイコンと共に表示するブラウザー用のヒントを提供するために使用します。
* `PaymentManager.enableDelegations()` (en-US)は、必要な決済情報の様々な部分を、加盟店のウェブサイト内から収集するのではなく、決済アプリに提供する責任を委任するために使用します。
仕様書
---

| Specification |
| --- |
| Payment Handler API # dom-serviceworkerregistration-paymentmanager |

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

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

関連情報
----

* 決済ハンドラー API (en-US)
* Web-based payment apps overview
* Setting up a payment method
* Life of a payment transaction
* 決済リクエスト API の使用
* 決済処理の概要
ServiceWorkerRegistration.active
================================

**`active`** は `ServiceWorkerRegistration` インターフェイスのプロパティで、`ServiceWorker.state` がアクティブ化中 (`activating`) またはアクティブ化済み (`activated`) のサービスワーカーを返します。 このプロパティは、最初は `null` に設定されています。

クライアントの URL が登録のスコープ内にある場合、アクティブワーカーは `Client` を制御します（`ServiceWorkerContainer.register` が最初に呼び出されたときに設定された `scope` オプション）。

**メモ:** この機能はウェブワーカーで利用できます。

**メモ:** アクティブワーカーが `activating` になると、ランタイムスクリプトエラーやアクティブワーカーの強制終了でもアクティブワーカーが `activated` になります。

値
-

`ServiceWorker` オブジェクトのプロパティ（現在アクティブ化中 (`activating`) またはアクティブ化済み (`activated`) の状態の場合）。

仕様書
---

| Specification |
| --- |
| Service Workers # navigator-service-worker-active |

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

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

関連情報
----

* サービスワーカーの使用
* Service workers basic code example (英語)
* Is ServiceWorker ready? (英語)
* `Promise`
* ウェブワーカーの使用
ServiceWorkerRegistration.installing
====================================

**`installing`** は `ServiceWorkerRegistration` インターフェイスのプロパティで、`ServiceWorker.state` がインストール中 (`installing`) のサービスワーカーを返します。 このプロパティは、最初は `null` に設定されています。

**メモ:** この機能はウェブワーカーで利用できます。

値
-

`ServiceWorker` オブジェクト（現在インストール中 (`installing`) の状態の場合）。

仕様書
---

| Specification |
| --- |
| Service Workers # navigator-service-worker-installing |

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

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

関連情報
----

* サービスワーカーの使用
* Service workers basic code example (英語)
* Is ServiceWorker ready? (英語)
* `Promise`
* ウェブワーカーの使用
ServiceWorkerRegistration.index
===============================

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

**`index`** は `ServiceWorkerRegistration` インターフェイスの読み取り専用プロパティで、オフラインコンテンツの索引付けができる `ContentIndex` (en-US) インターフェイスへの参照を返します。

値
-

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

例
-

このプロパティはメインスクリプトと登録済みサービスワーカーのどちらからでもアクセスできます。

ここでは、メインスクリプトからアクセスする例を示します。


```js
// reference registration
const registration = await navigator.serviceWorker.ready;

// feature detection
if ("index" in registration) {
  // Content Index API functionality
  const contentIndex = registration.index;
}
```


サービスワーカーからの呼び出し例です。


```js
// service worker script

const contentIndex = self.registration.index;
```

仕様書
---

| Specification |
| --- |
| Content Index # dom-serviceworkerregistration-index |

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

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

関連情報
----

* コンテンツインデックス API (en-US)
* An introductory article on the Content Index API (英語)
* An app which uses the Content Index API to list and remove 'save for later' content (英語)
ServiceWorkerRegistration: updatefound イベント
===========================================

**`updatefound`** は `ServiceWorkerRegistration` インターフェイスのイベントで、 `ServiceWorkerRegistration.installing` プロパティが新しいサービスワーカーが取得するたびに呼び出されます。

構文
--

このイベント名を `addEventListener()` のようなメソッドで使用したり、イベントハンドラープロパティに設定したりしてください。


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

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

イベント型
-----

一般的な `Event` です。

例
-


```js
const registration = await navigator.serviceWorker.getRegistration();
if (registration) {
  registration.addEventListener("updatefound", () => {
    console.log("サービスワーカーの更新版が見つかりました。");
  });
}
```

仕様書
---

| Specification |
| --- |
| Service Workers # dom-serviceworkerregistration-onupdatefound |

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

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

関連情報
----

* サービスワーカーの使用
ServiceWorkerRegistration: pushManager プロパティ
============================================

**`pushManager`** は `ServiceWorkerRegistration` インターフェイスのプロパティで、プッシュサブスクリプションを管理するための `PushManager` インターフェイスへの参照を返します。 これには、サブスクリプションへの参加、アクティブなサブスクリプションの取得、プッシュ通知の許可状況へのアクセスの対応が含まれます。

構文
--

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

例
-


```js
this.onpush = (event) => {
  console.log(event.data);
  // ここから、IndexedDB にデータを書き込んだり、いずれかのウィンドウに
  // それを送信したり、通知を表示したりできます。
};

navigator.serviceWorker
  .register("serviceworker.js")
  .then((serviceWorkerRegistration) => {
    serviceWorkerRegistration.pushManager.subscribe().then(
      (pushSubscription) => {
        console.log(pushSubscription.subscriptionId);
        console.log(pushSubscription.endpoint);
        // アプリケーションサーバが必要としているプッシュサブスクリプションの
        // 詳細はここから使用できます。たとえば、XMLHttpRequest を使用して
        // これを送信できます。
      },
      (error) => {
        // 開発中は、コンソールにエラーを表示するのに役立ちます。
        // 本番環境では、アプリケーションサーバにエラー情報を送信
        // するためにも 役立ちます。
        console.error(error);
      },
    );
  });
```

仕様書
---

| Specification |
| --- |
| Push API # dom-serviceworkerregistration-pushmanager |

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

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

関連情報
----

* プッシュ API
ServiceWorkerRegistration.update()
==================================

**`update()`** は `ServiceWorkerRegistration` インターフェイスのメソッドで、サービスワーカーの更新を試みます。 ワーカーのスクリプト URL を読み取り、新しいワーカーが現在のワーカーとバイト単位で同一でない場合は、新しいワーカーをインストールします。 前回の読み取りが 24 時間以上前であった場合、ワーカーの読み取り時にブラウザーのキャッシュをバイパスします。

**メモ:** この機能はウェブワーカーで利用できます。

構文
--


```js
update()
```

### 引数

なし。

### 返値

`ServiceWorkerRegistration` オブジェクトで解決する `Promise` です。

例
-

次の簡単な例では、サービスワーカーの例を登録し、次にイベントハンドラーをボタンに追加して、必要に応じてサービスワーカーを明示的に更新できるようにします。


```js
if ("serviceWorker" in navigator) {
  navigator.serviceWorker
    .register("/sw.js", { scope: "/" })
    .then((registration) => {
      // 登録成功
      console.log("登録に成功しました。");
      button.onclick = () => {
        registration.update();
      };
    })
    .catch((error) => {
      // 登録に失敗
      console.log(`登録に失敗しました: ${error}`);
    });
}
```

仕様書
---

| Specification |
| --- |
| Service Workers # service-worker-registration-update |

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

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

関連情報
----

* サービスワーカーの使用
* Service workers basic code example (英語)
* Is ServiceWorker ready? (英語)
* `Promise`
* ウェブワーカーの使用
ServiceWorkerRegistration.navigationPreload
===========================================

**`navigationPreload`** は `ServiceWorkerRegistration` インターフェイスの読み取り専用プロパティで、現在のサービスワーカー登録に関連する `NavigationPreloadManager` を返します。

返されるオブジェクトは、サービスワーカーによって管理されるリソースが、サービスワーカーの起動と並行して優先的にダウンロードできるようにします。

値
-

`NavigationPreloadManager` のインスタンスです。

仕様書
---

| Specification |
| --- |
| Service Workers # service-worker-registration-navigationpreload |

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

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

**`scope`** は `ServiceWorkerRegistration` インターフェイスの読み取り専用プロパティで、サービスワーカー登録の一意の識別子を返します。 サービスワーカーは、 `ServiceWorker` を登録する文書と同じオリジンにある必要があります。

**メモ:** この機能はウェブワーカーで利用できます。

値
-

固有の識別子。

仕様書
---

| Specification |
| --- |
| Service Workers # service-worker-registration-scope |

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

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

関連情報
----

* サービスワーカーの使用
* Service workers basic code example (英語)
* Is ServiceWorker ready? (英語)
* `Promise`
* ウェブワーカーの使用
ServiceWorkerRegistration.periodicSync
======================================

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

**`periodicSync`** は `ServiceWorkerRegistration` インターフェイスの読み取り専用プロパティで、定期的なバックグラウンド同期プロセスを管理する `PeriodicSyncManager` インターフェイスへの参照を返します。

値
-

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

例
-

このプロパティはメインスクリプトと登録済みサービスワーカーのどちらからでもアクセスできます。

ここでは、メインスクリプトからアクセスする例を示します。


```js
// reference registration
const registration = await navigator.serviceWorker.ready;

// feature detection
if ("periodicSync" in registration) {
  // Background Periodic Sync functionality
  const periodicSync = registration.periodicSync;
}
```


サービスワーカーからの呼び出し例です。


```js
// service worker script

const periodicSync = self.registration.periodicSync;
```

仕様書
---

| Specification |
| --- |
| Web Periodic Background Synchronization # dom-serviceworkerregistration-periodicsync |

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

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

関連情報
----

* Richer offline experiences with the Periodic Background Sync API (英語)
* A Periodic Background Sync demo app (英語)
ServiceWorkerRegistration.unregister()
======================================

**`unregister()`** は `ServiceWorkerRegistration` インターフェイスのメソッドで、サービスワーカーの登録を解除し、プロミス (`Promise`) を返します。 登録が見つからなかった場合、プロミスは `false` に解決されます。 それ以外の場合は、登録解除したかどうかに関係なく、`true` に解決されます（誰かが同じスコープで `ServiceWorkerContainer.register()` を同時に呼び出した場合は、登録解除されない場合があります）。 サービスワーカーは、登録解除される前に進行中の操作を完了します。

**メモ:** この機能はウェブワーカーで利用できます。

構文
--


```js
unregister()
```

### 引数

なし。

### 返値

`Promise` で、サービスワーカーが登録解除されたかどうかを示す論理値で解決します。

例
-

次の簡単な例では、サービスワーカーの例を登録していますが、すぐに録を解除しています。


```js
if ("serviceWorker" in navigator) {
  navigator.serviceWorker
    .register("/sw.js", { scope: "/" })
    .then((registration) => {
      // 登録に成功
      console.log("登録に成功しました。");
      registration.unregister().then((boolean) => {
        // boolean = true ならば、登録解除は成功
      });
    })
    .catch(function (error) {
      // 登録に失敗しました
      console.error(`登録に失敗しました: ${error}`);
    });
}
```

仕様書
---

| Specification |
| --- |
| Service Workers # navigator-service-worker-unregister |

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

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

関連情報
----

* サービスワーカーの使用
* Service workers basic code example (英語)
* Is ServiceWorker ready? (英語)
* `Promise`
* ウェブワーカーの使用
Headers.delete()
================

**`delete()`** は `Headers` インターフェイスのメソッドで、現在の `Headers` オブジェクトからヘッダーを削除します。

このメソッドでは、次の場合に `TypeError` が発生します。

* name 引数の値が HTTP ヘッダーの名前ではない場合。
* ガードの値が `immutable` である場合。

セキュリティ上の理由から、いくつかのヘッダーはユーザーエージェントでしか制御できません。これには、禁止ヘッダー名と禁止レスポンスヘッダー名があります。

構文
--


```js
delete(name)
```

### 引数

`name`

`Headers` オブジェクトから削除する HTTP ヘッダーの名前。

### 返値

なし (`undefined`)。

例
-

空の `Headers` オブジェクトの作成は簡単です。


```js
const myHeaders = new Headers(); // Currently empty
```


`Headers.append` を使用して、これにヘッダーを追加できます。


```js
myHeaders.append("Content-Type", "image/jpeg");
myHeaders.get("Content-Type"); // Returns 'image/jpeg'
```


その後、再度削除することができます。


```js
myHeaders.delete("Content-Type");
myHeaders.get("Content-Type"); // Returns null, as it has been deleted
```

仕様書
---

| Specification |
| --- |
| Fetch Standard # ref-for-dom-headers-delete① |

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

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

関連情報
----

* サービスワーカー API
* HTTP アクセス制御 (CORS)
* HTTP
Headers.set()
=============

**`set()`** は `Headers` インターフェイスのメソッドで、 `Headers` オブジェクトの中にある既存のヘッダーに新しい値を設定するか、ヘッダーがまだ存在しない場合には追加するかします。

`set()` と `Headers.append` の違いは、指定されたヘッダーがすでに存在し、複数の値を受け入れられる場合、 `set()` は既存の値を新しい値で上書きするのに対し、 `Headers.append` は新しい値を値の集合の最後に追加する点です。

セキュリティ上の理由から、いくつかのヘッダーはユーザーエージェントでしか制御できません。これには、禁止ヘッダー名と禁止レスポンスヘッダー名があります。

構文
--


```js
set(name, value)
```

### 引数

`name`

新しい値に設定したい HTTP ヘッダーの名前。指定された名前が HTTP ヘッダーの名前でない場合、このメソッドで `TypeError` 例外が発生します。

`value`

新たに設定したい値です。

### 返値

なし (`undefined`)。

例
-

空の `Headers` オブジェクトを作成するのは簡単です。


```js
const myHeaders = new Headers(); // Currently empty
```


これに `Headers.append` を使用してヘッダーを追加し、次に `set()` を使用してこのヘッダーに新しい値を設定することができます。


```js
myHeaders.append("Content-Type", "image/jpeg");
myHeaders.set("Content-Type", "text/html");
```


指定されたヘッダーがまだ存在しない場合、`set()` はそれを作成し、その値を指定された値に設定します。指定されたヘッダーが既に存在し、複数の値を受け入れられる場合は、 `set()` は既存の値を新しい値で上書きします。


```js
myHeaders.set("Accept-Encoding", "deflate");
myHeaders.set("Accept-Encoding", "gzip");
myHeaders.get("Accept-Encoding"); // Returns 'gzip'
```


新しい値を上書きするのではなく、値に追加するために `Headers.append` が必要になります。

仕様書
---

| Specification |
| --- |
| Fetch Standard # ref-for-dom-headers-set① |

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

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

関連情報
----

* サービスワーカー API
* HTTP アクセス制御 (CORS)
* HTTP
Headers.forEach()
=================

**`Headers.forEach()`** メソッドは、 `Headers` オブジェクト内のキー/値の組にそれぞれ一度ずつ、コールバック関数を実行します。

構文
--


```js
// アロー関数
forEach((value, key) => { /\* … \*/ })
forEach((value, key, object) => { /\* … \*/ })

// インラインコールバック関数
forEach(function (value, key) { /\* … \*/ })
forEach(function (value, key, object) { /\* … \*/ })
forEach(function (value, key) { /\* … \*/ }, thisArg)
```

### 引数

`callbackFn`

このマップの各項目に対して実行される関数です。以下の引数を取ります。

`value`

現在参照しているヘッダー項目の値です。

`key`

現在参照しているヘッダー項目の名前です。

`object`

反復処理を行う Headers オブジェクトです。


`thisArg` 省略可

`callback` を実行するときに `this` として使用する値。

### 返値

`undefined` です。

解説
--

`Headers.forEach()` メソッドは、指定されたコールバックを、実際に存在するヘッダーの各キーに対して一度ずつ実行します。削除されたキーに対しては呼び出されません。しかし、存在しているが値が undefined であるキーに対しては実行されます。

例
-

### Headers オブジェクトの内容を表示

以下のコードは `myHeaders` オブジェクトの各キー/値に対して 1 行ずつログ出力します。


```js
// 新しいテスト用 Headers オブジェクトを作成
const myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");
myHeaders.append("Cookie", "This is a demo cookie");
myHeaders.append("compression", "gzip");

// キーと値の組を表示
myHeaders.forEach((value, key) => {
  console.log(`${key} ==> ${value}`);
});
```


結果は次の通りです。
```

compression ==> gzip
content-type ==> application/json
cookie ==> This is a demo cookie
```

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

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

関連情報
----

* `Map.prototype.forEach()`
* サービスワーカー API
* HTTP アクセス制御 (CORS)
* HTTP
Headers.entries()
=================

**`Headers.entries()`** メソッドは、このオブジェクトに含まれるすべてのキーと値のペアを走査するイテレーターを返します。それぞれのペアのキーと値は両方とも `String` オブジェクトです。

**メモ:** このメソッドはウェブワーカーで使用できます。

構文
--


```js
entries()
```

### 引数

なし。

### 返値

イテレーターを返します。

例
-


```js
// Headers テストオブジェクトを作成
const myHeaders = new Headers();
myHeaders.append("Content-Type", "text/xml");
myHeaders.append("Vary", "Accept-Language");

// キーと値のペアを表示
for (const pair of myHeaders.entries()) {
  console.log(`${pair[0]}: ${pair[1]}`);
}
```


結果は次の通りです。
```

content-type: text/xml
vary: Accept-Language
```

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

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

関連情報
----

* サービスワーカー API
* HTTP アクセス制御 (CORS)
* HTTP
Headers.keys()
==============

**`Headers.keys()`** メソッドは、このオブジェクトに含まれるすべてのキーを読み取ることができるイテレーターオブジェクトを返します。キーは文字列です。です。

**メモ:** このメソッドはウェブワーカーで使用できます。

構文
--


```js
keys()
```

### 引数

なし。

### 返値

イテレーターを返します。

例
-


```js
// テスト用の Headers オブジェクトを作成
const myHeaders = new Headers();
myHeaders.append("Content-Type", "text/xml");
myHeaders.append("Vary", "Accept-Language");

// キーを表示
for (const key of myHeaders.keys()) {
  console.log(key);
}
```


結果は次の通りです。
```

content-type
vary
```

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

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

関連情報
----

* サービスワーカー API
* HTTP アクセス制御 (CORS)
* HTTP
Headers.get()
=============

**`get()`** は `Headers` インターフェイスのメソッドで、指定された名前の `Headers` オブジェクト内のヘッダーのすべての値のバイト文字列を返します。要求されたヘッダーが `Headers` オブジェクトに存在しない場合、`null` を返します。

セキュリティ上の理由から、いくつかのヘッダーはユーザーエージェントでしか制御できません。これには、禁止ヘッダー名と禁止レスポンスヘッダー名があります。

構文
--


```js
get(name)
```

### 引数

`name`

`Headers` オブジェクトから値を取得する HTTP ヘッダーの名前。指定された名前が HTTP ヘッダーの名前でない場合、このメソッドでは `TypeError` 例外が発生します。名前は大文字と小文字を区別しません。

### 返値

取得したヘッダーの値を表す文字列の配列です。このヘッダーが設定されていない場合は `null` を返します。

例
-

空の `Headers` オブジェクトの作成は簡単です。


```js
const myHeaders = new Headers(); // 現在空です
myHeaders.get("Not-Set"); // null を返します
```


`Headers.append` を使用してヘッダーを追加し、`get()` を使用してヘッダーを取得できます。


```js
myHeaders.append("Content-Type", "image/jpeg");
myHeaders.get("Content-Type"); // "image/jpeg" を返します
```


ヘッダーに複数の値が関連付けられている場合、ByteString には、`Headers` オブジェクトに追加された順序ですべての値が含まれます。


```js
myHeaders.append("Accept-Encoding", "deflate");
myHeaders.append("Accept-Encoding", "gzip");
myHeaders.get("Accept-Encoding"); // "deflate,gzip" を返します
myHeaders
  .get("Accept-Encoding")
  .split(",")
  .map((v) => v.trimStart()); // [ "deflate", "gzip" ] を返します。
```

仕様書
---

| Specification |
| --- |
| Fetch Standard # ref-for-dom-headers-get① |

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

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

関連情報
----

* サービスワーカー API
* HTTP アクセス制御 (CORS)
* HTTP
Headers()
=========

**`Headers()`** コンストラクターは、新しい `Headers` オブジェクトを生成します。

構文
--


```js
new Headers()
new Headers(init)
```

### 引数

`init` 省略可

`Headers` オブジェクトに事前に入力したい、任意の HTTP ヘッダーを含むオブジェクトです。これは文字列の値を持つ単純なオブジェクトリテラル、名前と値の組の配列（各組は 2 つの要素を持つ文字列の配列）、あるいは既存の `Headers` オブジェクトになります。最後の場合は、新しい `Headers` オブジェクトは既存の `Headers` オブジェクトからそのデータをコピーします。

例
-

簡単に空の `Headers` オブジェクトを生成できます。


```js
const myHeaders = new Headers(); // Currently empty
```


`Headers.append` を使用してヘッダーを追加できます。


```js
myHeaders.append("Content-Type", "image/jpeg");
myHeaders.get("Content-Type"); // Returns 'image/jpeg'
```


または、`Headers` オブジェクトの生成時に必要なヘッダーを追加することもできます。次のスニペットでは、新しい `Headers` を作成し、コンストラクターに初期化オブジェクトを引数として渡してヘッダーを追加しています。


```js
const httpHeaders = {
  "Content-Type": "image/jpeg",
  "X-My-Custom-Header": "Zeke are cool",
};
const myHeaders = new Headers(httpHeaders);
```


最初の `Headers` を初期化オブジェクトとして渡して、別の `Headers` オブジェクトを生成できます。


```js
const secondHeadersObj = new Headers(myHeaders);
secondHeadersObj.get("Content-Type"); // Would return 'image/jpeg' — it inherits it from the first headers object
```


また、`Headers` オブジェクトを作成する際に、二次元の配列を使用して、同じ値を持つ複数のヘッダーを追加することができます。以下のスニペットでは、コンストラクターの引数に初期化配列を渡して、複数の `Set-Cookie` ヘッダーを持つ新しい `Headers` オブジェクトを作成しています。


```js
const headers = [
  ["Set-Cookie", "greeting=hello"],
  ["Set-Cookie", "name=world"],
];
const myHeaders = new Headers(headers);
```

仕様書
---

| Specification |
| --- |
| Fetch Standard # ref-for-dom-headers① |

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

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

関連情報
----

* サービスワーカー API
* HTTP アクセス制御 (CORS)
* HTTP
Headers.has()
=============

**`has()`** は `Headers` インターフェイスのメソッドで、 `Headers` オブジェクトに指定された特定のヘッダーがあるかどうかを示す論理値を返します。

セキュリティ上の理由から、いくつかのヘッダーはユーザーエージェントでしか制御できません。これには、禁止ヘッダー名と禁止レスポンスヘッダー名があります。

構文
--


```js
has(name)
```

### 引数

`name`

テストしたい HTTP ヘッダーの名前。指定された名前が有効な HTTP ヘッダーの名前でない場合、このメソッドで `TypeError` 例外が発生します。

### 返値

論理値です。

例
-

空の `Headers` オブジェクトを作成するのは簡単です。


```js
const myHeaders = new Headers(); // Currently empty
```


これに `Headers.append` を使用してヘッダーを追加し、`has()` を使用してヘッダーが存在するかどうかをテストすることができます。


```js
myHeaders.append("Content-Type", "image/jpeg");
myHeaders.has("Content-Type"); // Returns true
myHeaders.has("Accept-Encoding"); // Returns false
```

仕様書
---

| Specification |
| --- |
| Fetch Standard # ref-for-dom-headers-has① |

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

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

関連情報
----

* サービスワーカー API
* HTTP アクセス制御 (CORS)
* HTTP