Merge branch 'main' into patch-1

files/ja/web/api/navigationpreloadmanager/index.md

@@ -1,53 +1,86 @@
 ---
 title: NavigationPreloadManager
 slug: Web/API/NavigationPreloadManager
+l10n:
+  sourceCommit: f2088b8912ef205a737551441d54b73507bd3ac6
 ---
 
-{{APIRef("Service Workers API")}}
+{{APIRef("Service Workers API")}}{{SecureContext_Header}}{{AvailableInWorkers}}
 
-[Service Worker API](/ja/docs/Web/API/Service_Worker_API) の **`NavigationPreloadManager`** インターフェイスは、サービスワーカーによるリソースのプリロード（事前読み込み）を管理するためのメソッドを提供します。
+**`NavigationPreloadManager`** は[サービスワーカー API](/ja/docs/Web/API/Service_Worker_API) のインターフェイスで、サービスワーカーによるリソースの事前読み込みを管理するためのメソッドを提供します。
+
+対応していれば、この型のオブジェクトは {{domxref("ServiceWorkerRegistration.navigationPreload")}} によって返されます。
+事前読み込みフェッチリクエストの結果は、{{domxref("FetchEvent.preloadResponse")}} によって返されたプロミスを使用して待ちます。
 
 ## メソッド
 
 - {{domxref("NavigationPreloadManager.enable()")}}
-  - : ナビゲーションのプリロードを有効にし、解決する {{jsxref("Promise")}} を返します。
+  - : ナビゲーションの事前読み込みを有効にし、{{jsxref('undefined')}} で解決する {{jsxref("Promise")}} を返します。
 - {{domxref("NavigationPreloadManager.disable()")}}
-  - : ナビゲーションのプリロードを無効にし、解決する {{jsxref("Promise")}} を返します。
+  - : ナビゲーションの事前読み込みを無効にし、{{jsxref('undefined')}} で解決する {{jsxref("Promise")}} を返します。
 - {{domxref("NavigationPreloadManager.setHeaderValue()")}}
   - : `Service-Worker-Navigation-Preload` ヘッダーの値を設定し、空の {{jsxref("Promise")}} を返します。
 - {{domxref("NavigationPreloadManager.getState()")}}
-  - : プリロードが有効かどうかと、`Service-Worker-Navigation-Preload` の内容を示すプロパティを持つオブジェクトに解決する {{jsxref("Promise")}} を返します。
+  - : 事前読み込みが有効かどうかと、HTTP の {{HTTPHeader("Service-Worker-Navigation-Preload")}} の内容を示すプロパティを持つオブジェクトに解決する {{jsxref("Promise")}} を返します。
+
+## 解説
+
+サービスワーカーは、指定されたスコープ内のページに対して、サイトの代理として {{domxref("Window/fetch", "fetch()")}} イベントを処理します。
+ユーザーがサービスワーカーを使用するページに移動すると、ブラウザーは（まだ実行していなければ）ワーカーを起動し、フェッチイベントを送信して結果を待ちます。
+イベントを受信すると、キャッシュにリソースが存在する場合はそれを返します。存在しない場合はリモートサーバーからリソースを取得します（将来のリクエストで返すためのコピーを保存します）。
+
+サービスワーカーは、起動するまでブラウザーからのイベントを処理できません。
+これは避けられませんが、通常は大きな影響はありません。
+サービスワーカーは、多くの場合、すでに開始されています（他にもリクエストされた処理が完了する時点までアクティブな状態が続きます）。
+サービスワーカーが起動しなければならない場合でも、多くの場合、キャッシュから値が返されるため、非常に高速です。
+しかし、リモートリソースを取得し始める前にワーカーが起動しなければならない場合、遅延は著しくなる可能性があります。
+
+`NavigationPreloadManager` には、サービスワーカーの起動時にリソースを並列して取得するメカニズムが用意されており、これにより、ワーカーがブラウザーからのフェッチリクエストを処理できるまでに、リソースがすでに完全に、または部分的にダウンロードされている状態にすることができます。
+これにより、ワーカーがすでに開始されている場合と「同程度」に悪い状態で開始される場合、場合によってはそれよりも良い状態で開始される場合があります。
+
+事前読み込みマネージャーは、事前読み込みリクエストに HTTP の {{HTTPHeader("Service-Worker-Navigation-Preload")}} ヘッダーを送信し、事前読み込みリクエストに対するレスポンスをカスタマイズできるようにします。
+例えば、元のページの一部だけに送信されるデータを削減したり、ユーザーのログイン状態に基づいてレスポンスをカスタマイズしたりするために使用できます。
 
 ## 例
 
-#### ナビゲーションのプリロードの機能を検出して有効化
+この例は [Speed up Service Worker with Navigation Preloads](https://web.dev/blog/navigation-preload) (developer.chrome.com) から取ったものです。
+
+#### ナビゲーションの事前読み込みの機能を検出して有効化
+
+下記では、最初の {{domxref("ServiceWorkerRegistration.navigationPreload")}} を使用して、この機能に対応してしているかどうかを判断した後、サービスワーカーの activate イベントハンドラーでナビゲーションの事前読み込みを有効にしています（この関数は、サービスワーカー用の `NavigationPreloadManager` を返すか、機能に対応していない場合は `undefined` を返します）。
 
 ```js
 addEventListener("activate", (event) => {
   event.waitUntil(
-    (async function () {
+    (async () => {
       if (self.registration.navigationPreload) {
-        // ナビゲーションのプリロードを有効にします！
+        // ナビゲーションの事前読み込みを有効にします！
         await self.registration.navigationPreload.enable();
       }
     })(),
   );
 });
 ```
 
-#### プリロードされたレスポンスの使用
+#### 事前読み込みされたレスポンスの使用
+
+次のコードは、事前読み込みされたレスポンス ({{domxref("FetchEvent.preloadResponse")}}) を使用するサービスワーカーのフェッチイベントハンドラーを示しています。
 
-次の例は、プリロードされたレスポンスを使用する fetch イベントの実装を示しています。
+`fetch` イベントハンドラーは、{{domxref("FetchEvent.respondWith", "FetchEvent.respondWith()")}} を呼び出して、コントロールするページにプロミスを渡すと、このプロミスはリクエストされたリソースで解決されます。リソースは、キャッシュ、事前読み込みされたフェッチリクエスト、または新しいネットワークリクエストから取得されます。
+
+この {{domxref("Cache")}} オブジェクトに一致する URL リクエストがある場合、コードはキャッシュからレスポンスを取得するための解決済みのプロミスを返します。
+キャッシュに一致するものがなかった場合、コードは解決済みの事前読み込みレスポンス ({{domxref("FetchEvent.preloadResponse")}}) を返します。
+一致するキャッシュ項目または事前読み込みレスポンスがなかった場合、コードはネットワークから新しい読み取り操作を開始し、その読み取り操作のための（未解決の）プロミスを返します。
 
 ```js
 addEventListener("fetch", (event) => {
   event.respondWith(
-    (async function () {
+    (async () => {
       // 可能なら、キャッシュから応答します
       const cachedResponse = await caches.match(event.request);
       if (cachedResponse) return cachedResponse;
 
-      // それがなく、プリロードされたレスポンスがあれば、それを使用します
+      // それがなく、事前読み込みされたレスポンスがあれば、それを使用します
       const response = await event.preloadResponse;
       if (response) return response;
 
@@ -58,10 +91,55 @@ addEventListener("fetch", (event) => {
 });
 ```
 
-## 仕様
+### 独自のレスポンス
+
+ブラウザーは、事前読み込みリクエストに HTTP の {{HTTPHeader("Service-Worker-Navigation-Preload")}} ヘッダーを、既定で `true` のディレクティブ値で送信します。
+これにより、サーバーは通常のフェッチリクエストと事前読み込みフェッチリクエストを区別し、必要に応じてそれぞれ異なるレスポンスを送信することができます。
+
+> [!NOTE]
+> 事前読み込みと通常のフェッチ操作で異なるレスポンスを返すことができる場合、サーバーは確実に異なるレスポンスがキャッシュされるように `Vary: Service-Worker-Navigation-Preload` を設定する必要があります。
+
+{{domxref("NavigationPreloadManager.setHeaderValue()")}} を使用してヘッダー値を変更し、先読み操作に追加のコンテキストを提供することができます。
+例えば、最近キャッシュされたリソースの ID を値として設定すると、サーバーは実際に必要とされるまでリソースを返さなくなります。
+同様に、Cookie を使用する代わりに、認証ステータスに基づいて返値を構成することもできます。
+
+下記のコードは、ヘッダーディレクティブの値を、変数 `newValue` に設定する方法を示しています。
+
+```js
+navigator.serviceWorker.ready
+  .then((registration) =>
+    registration.navigationPreload.setHeaderValue(newValue),
+  )
+  .then(() => {
+    console.log("Done!");
+  });
+```
+
+[Speed up Service Worker with Navigation Preloads > Custom responses for preloads](https://web.dev/blog/navigation-preload) は、記事のウェブページのレスポンスがキャッシュされたヘッダーとフッターから構築されるサイトの、より完全な例を提供します。これにより、記事コンテンツのみが先読みされるように返されます。
+
+### 状態の取得
+
+{{domxref("NavigationPreloadManager.getState()")}} を使用すると、ナビゲーションの事前読み込みが有効になっているかどうかを調べ、事前読み込みリクエストに対して HTTP の {{HTTPHeader("Service-Worker-Navigation-Preload")}} ヘッダーにどのようなディレクティブ値が送信されているかを判断することができます。
+
+下記コードは、状態オブジェクトに解決するプロミスを取得し、結果をログ出力する方法を示しています。
+
+```js
+navigator.serviceWorker.ready
+  .then((registration) => registration.navigationPreload.getState())
+  .then((state) => {
+    console.log(state.enabled); // boolean
+    console.log(state.headerValue); // string
+  });
+```
+
+## 仕様書
 
 {{Specifications}}
 
 ## ブラウザーの互換性
 
 {{Compat}}
+
+## 関連情報
+
+- [Speed up Service Worker with Navigation Preloads](https://web.dev/blog/navigation-preload) (developer.chrome.com)

files/ja/web/api/navigationpreloadmanager/setheadervalue/index.md

@@ -0,0 +1,61 @@
+---
+title: "NavigationPreloadManager: setHeaderValue() メソッド"
+short-title: setHeaderValue()
+slug: Web/API/NavigationPreloadManager/setHeaderValue
+l10n:
+  sourceCommit: cfb7587e3e3122630ad6cbd94d834ecadbe0a746
+---
+
+{{APIRef("Service Workers API")}}{{SecureContext_Header}}{{AvailableInWorkers}}
+
+**`setHeaderValue()`** は {{domxref("NavigationPreloadManager")}} インターフェイスのメソッドで、サービスワーカーのナビゲーション事前読み込み中に実行された {{domxref("Window/fetch", "fetch()")}} 操作の結果として送信されるリクエストに付加される {{HTTPHeader("Service-Worker-Navigation-Preload")}} ヘッダーの値を設定します。
+これは、`undefined` で解決する空のプロミス ({{jsxref("Promise")}}) を返します。
+
+事前読み込みリクエストに {{HTTPHeader("Service-Worker-Navigation-Preload")}} ヘッダーが存在することで、サーバーは事前読み込みフェッチリクエストと通常のフェッチリクエストに対して、異なるリソースを返すように構成することができます。
+既定でこのディレクティブは `true` に設定されています。このメソッドでは、事前読み込みリクエストに対して複数の異なる応答を構成することが可能なのです。
+
+> [!NOTE]
+> このヘッダーを設定することで異なるレスポンスが返される可能性がある場合、サーバーは異なるレスポンスが確実にキャッシュされるように `Vary: Service-Worker-Navigation-Preload` を設定する必要があります。
+
+## 構文
+
+```js-nolint
+setHeaderValue(value)
+```
+
+### 引数
+
+- `value`
+  - : 対象とするサーバーが、リクエストされたリソースに対して何を返すべきかを決定するために使用する任意の文字列値です。
+
+### 返値
+
+{{jsxref('undefined')}} で解決するプロミス ({{jsxref("Promise")}}) です。
+
+### 例外
+
+- `InvalidStateError` {{domxref("DOMException")}}
+  - : この {{domxref("NavigationPreloadManager")}} が属する登録に関連するアクティブなワーカーがない場合。
+
+## 例
+
+次のコードは、この値を設定する方法を示しています。
+
+```js
+navigator.serviceWorker.ready
+  .then((registration) =>
+    registration.navigationPreload.setHeaderValue(newValue),
+  )
+  .then(() => console.log("Done!"))
+  .catch((e) =>
+    console.error(`NavigationPreloadManager に対応していません: ${e.message}`),
+  );
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}

files/ja/web/http/headers/alt-svc/index.md

@@ -1,15 +1,19 @@
 ---
 title: Alt-Svc
 slug: Web/HTTP/Headers/Alt-Svc
+l10n:
+  sourceCommit: 9231a7046973685f4600e1891fa644ecce41ef3b
 ---
 
 {{HTTPSidebar}}
 
-**`Alt-Svc`** は HTTP のレスポンスヘッダーで、同じリソースに到達できる代替サービスを宣伝するために使用します。 代替サービスは、プロトコル/ホスト/ポートの組み合わせによって定義します。
+**`Alt-Svc`** は HTTP のヘッダーで、将来のリクエスト時に、そのオリジンのサーバーとして別のネットワーク上の場所（「代替サービス」）を扱うことができることをサーバーが示すことができます。
+
+これにより、実行中のリクエストに影響を与えることなく、新しいプロトコルのバージョンを宣伝することができ、またサーバーのトラフィックを制御するのにも役立ちます。代替サービスを使用しても、エンドユーザーには見えません。URL やリクエストのオリジンのサーバーは変更されず、余分なラウンドトリップも発生しません。
 
 ## 構文
 
-```
+```http
 Alt-Svc: clear
 Alt-Svc: <protocol-id>=<alt-authority>; ma=<max-age>
 Alt-Svc: <protocol-id>=<alt-authority>; ma=<max-age>; persist=1
@@ -18,19 +22,22 @@ Alt-Svc: <protocol-id>=<alt-authority>; ma=<max-age>; persist=1
 - `clear`
   - : 特別な値 `clear` は、そのオリジンのすべての代替を無効にすることをオリジンが要求することを示します。
 - `<protocol-id>`
-  - : {{Glossary("ALPN")}} プロトコル識別子。 例には、HTTP/2 の h2 および HTTP/3 プロトコルのドラフト 25 の h3-25 が含まれています。
+  - : {{Glossary("ALPN")}} プロトコル識別子。例えば、HTTP/2 の `h2` および HTTP/3 プロトコルのドラフト 25 の `h3-25` があります。
 - `<alt-authority>`
   - : 任意のホストのオーバーライド、コロン、および必須のポート番号で構成される代替機関を指定する引用符付きの文字列。
-- `ma=<max-age>`{{Optional_Inline}}
-  - : 代替サービスが新鮮であると見なす秒数。 省略した場合のデフォルトは 24 時間です。 代替サービスのエントリは、最大で _\<max-age>_ から（{{ httpheader("Age") }} ヘッダーからの）レスポンスの経過時間を差し引いた秒数までキャッシュできます。 キャッシュされたエントリが期限切れになると、クライアントは新しい接続にこの代替サービスを使用できなくなります。
-- `persist=1`{{Optional_Inline}}
-  - : 通常、キャッシュされた代替サービスエントリは、ネットワーク構成の変更時にクリアされます。 persist=1 パラメータを使用すると、そのような変更によってエントリが削除されなくなります。
+- `ma=<max-age>` {{optional_inline}}
+  - : 代替サービスが新鮮であると見なす秒数。 省略した場合の既定値 24 時間です。 代替サービスの項目は、最大で _\<max-age>_ から（{{httpheader("Age")}} ヘッダーからの）レスポンスの経過時間を差し引いた秒数までキャッシュできます。
+    キャッシュされた項目が期限切れになると、クライアントは新しい接続にこの代替サービスを使用できなくなります。
+- `persist=1` {{optional_inline}}
+  - : 通常、キャッシュされた代替サービス項目は、ネットワーク構成の変更時にクリアされます。
+    `persist=1` 引数を使用すると、そのような変更によって項目が削除されなくなります。
 
-区切り文字としてカンマを使用して、単一の `Alt-Svc` ヘッダーで複数のエントリを指定できます。 その場合、早期のエントリーがより望ましいと考えられます。
+区切り文字としてカンマを使用して、単一の `Alt-Svc` ヘッダーで複数の項目を指定できます。
+その場合、先にある項目がより望ましいとみなされます。
 
 ## 例
 
-```
+```http
 Alt-Svc: h2=":443"; ma=2592000;
 Alt-Svc: h2=":443"; ma=2592000; persist=1
 Alt-Svc: h2="alt.example.com:443", h2=":443"
@@ -39,14 +46,12 @@ Alt-Svc: h3-25=":443"; ma=3600, h2=":443"; ma=3600
 
 ## 仕様書
 
-| 仕様書        | 状態     | 備考     |
-| ------------- | -------- | -------- |
-| {{RFC(7838)}} | IETF RFC | 初回定義 |
+{{Specifications}}
 
 ## ブラウザーの互換性
 
 {{Compat}}
 
 ## 関連情報
 
-- [ウェブ上のリソースの識別](/ja/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web)
+- [Alternative Services](https://www.mnot.net/blog/2016/03/09/alt-svc) （HTTP Working Group 代表 Mark Nottingham による `Alt-Svc` についての記事）