From b62ba6ef733e89b7e95ccec066b6c2c9027fa088 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 20 Sep 2024 00:45:25 +0900 Subject: [PATCH] =?UTF-8?q?2024/07/24=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?= =?UTF-8?q?=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../fetch_event/index.md | 33 ++++++++++--------- 1 file changed, 17 insertions(+), 16 deletions(-) diff --git a/files/ja/web/api/serviceworkerglobalscope/fetch_event/index.md b/files/ja/web/api/serviceworkerglobalscope/fetch_event/index.md index e9c97e03d53c55..7b6bb36f8d96f5 100644 --- a/files/ja/web/api/serviceworkerglobalscope/fetch_event/index.md +++ b/files/ja/web/api/serviceworkerglobalscope/fetch_event/index.md @@ -1,13 +1,14 @@ --- title: "ServiceWorkerGlobalScope: fetch イベント" +short-title: fetch slug: Web/API/ServiceWorkerGlobalScope/fetch_event l10n: - sourceCommit: 6f2391b536a4db607ea94e4ce07396b2cead6a88 + sourceCommit: 58ad1df59f2ffb9ecab4e27fe1bdf1eb5a55f89b --- -{{APIRef("Service Workers API")}} +{{APIRef("Service Workers API")}}{{SecureContext_Header}}{{AvailableInWorkers("service")}} -**`fetch`** イベントはメインスレッドがネットワークリクエストを行うときに発生します。これによりサービスワーカーがリクエストをカスタマイズされたレスポンス（ローカルキャッシュなど）に差し替えることができます。 +**`fetch`** は {{domxref("ServiceWorkerGlobalScope")}} インターフェイスのイベントで、メインアプリスレッドがネットワークリクエストを発行したときに、サービスワーカーのグローバルスコープで発生します。これにより、サービスワーカーがネットワークリクエストを傍受し、独自のレスポンス（例えば、ローカルキャッシュからのレスポンス）を送信できるようになります。 このイベントはキャンセル不可で、バブリングしません。 @@ -23,23 +24,23 @@ onfetch = (event) => {}; ## 解説 -この `fetch` イベントは、メインスレッドがネットワークリクエストを行う際に、サービスワーカーのグローバルスコープで発生します。これはメインスレッドからの明示的な {{domxref("fetch()")}} 呼び出しだけではなく、ページナビゲーションや JavaScript、CSS、画像などのリソースの取得による暗黙的なリクエストでも発生します。 +この `fetch` イベントは、メインスレッドがネットワークリクエストを行う際に、サービスワーカーのグローバルスコープで発生します。これはメインスレッドからの明示的な {{domxref("Window/fetch", "fetch()")}} 呼び出しだけではなく、ページナビゲーションや JavaScript、CSS、画像などのリソースの取得による暗黙的なリクエストでも発生します。 -イベントハンドラは {{domxref("FetchEvent")}} オブジェクトを受け取り、{{domxref("Request")}} インスタンスを通じてリクエストにアクセスできます。 +イベントハンドラーは {{domxref("FetchEvent")}} オブジェクトを受け取り、{{domxref("Request")}} インスタンスを通じてリクエストにアクセスできます。 -`FetchEvent` はパラメータに {{domxref("Response")}} 、または `Response` で解決する `Promise` を受け取る {{domxref("FetchEvent.respondWith()", "respondWith()")}} メソッドを持っています。これにより、サービスワーカーのイベントハンドラはメインスレッドでリクエストに返されるレスポンスを差し替えることができます。 +`FetchEvent` はパラメーターに {{domxref("Response")}} 、または `Response` で解決する `Promise` を受け取る {{domxref("FetchEvent.respondWith()", "respondWith()")}} メソッドを持っています。これにより、サービスワーカーのイベントハンドラーはメインスレッドでリクエストに返されるレスポンスを差し替えることができます。 例えばサービスワーカーは以下のような値へ差し替えることができます。 -- {{domxref("Cache")}} インターフェースから取得したレスポンスのローカルキャッシュ -- {{domxref("Response.json()")}} や {{domxref("Response.Response()", "Response()")}} コンストラクタなどのメソッドでサービスワーカーが合成したレスポンス。 +- {{domxref("Cache")}} インターフェイスから取得したレスポンスのローカルキャッシュ +- {{domxref("Response.json()")}} や {{domxref("Response.Response()", "Response()")}} コンストラクターなどのメソッドでサービスワーカーが合成したレスポンス。 - {{domxref("Response.error_static()", "Response.error()")}} による ネットワークエラー。これは `fetch()` 呼び出しを拒否させます。 `respondWith()` メソッドは、一つのリクエストに対して一度だけ呼び出すことができます。複数の `fetch` イベントリスナーが設定された場合、`respondWith()` が呼び出されるまで、登録された順に呼び出されます。 -`respondWith()` メソッドは同期的に呼び出す必要があります。つまり `then` ハンドラから呼び出すことはできません。 +`respondWith()` メソッドは同期的に呼び出す必要があります。つまり `then` ハンドラーから呼び出すことはできません。 -通常、`fetch` イベントハンドラは URL などのリクエスト特徴に応じて異なる戦略をとります。 +通常、`fetch` イベントハンドラーは URL などのリクエスト特徴に応じて異なる戦略をとります。 ```js function strategy1() { @@ -63,7 +64,7 @@ self.addEventListener("fetch", (event) => { }); ``` -ハンドラ内で `respondWith()` が呼び出されなかった場合、ユーザーエージェントは自動的に元のネットワークリクエストを行います。例えば上記のコードでは `pattern1` または `pattern2` にマッチしないリクエストはすべて、サービスワーカーが存在しなかったかのように振る舞います。 +ハンドラー内で `respondWith()` が呼び出されなかった場合、ユーザーエージェントは自動的に元のネットワークリクエストを行います。例えば上記のコードでは `pattern1` または `pattern2` にマッチしないリクエストはすべて、サービスワーカーが存在しなかったかのように振る舞います。 ## イベント型 @@ -73,7 +74,7 @@ self.addEventListener("fetch", (event) => { ### キャッシュからネットワークへのフォールバック -この `fetch` イベントハンドラは、まずキャッシュ済みのレスポンスを探します。レスポンスが見つかった場合はキャッシュ済みのレスポンスを返します。そうでない場合はネットワークからリソースを取得しようとします。 +この `fetch` イベントハンドラーは、まずキャッシュ済みのレスポンスを探します。レスポンスが見つかった場合はキャッシュ済みのレスポンスを返します。そうでない場合はネットワークからリソースを取得しようとします。 ```js async function cacheThenNetwork(request) { @@ -94,7 +95,7 @@ self.addEventListener("fetch", (event) => { ### キャッシュのみ -この `fetch` イベントハンドラは、スクリプトとスタイルシートに対して「キャッシュのみ」ポリシーを実装します。リクエストの {{domxref("Request.destination", "destination")}} が `"script"` または `"style"` である場合、ハンドラはキャッシュだけを探し、レスポンスが見つからない場合はエラーを返します。その他のリクエストはすべてネットワークを通して行われます。 +この `fetch` イベントハンドラーは、スクリプトとスタイルシートに対して「キャッシュのみ」ポリシーを実装します。リクエストの {{domxref("Request.destination", "destination")}} が `"script"` または `"style"` である場合、ハンドラーはキャッシュだけを探し、レスポンスが見つからない場合はエラーを返します。その他のリクエストはすべてネットワークを通して行われます。 ```js async function cacheOnly(request) { @@ -128,6 +129,6 @@ self.addEventListener("fetch", (event) => { - [サービスワーカーの使用](/ja/docs/Web/API/Service_Worker_API/Using_Service_Workers) - [サービスワーカーの基本的なコード例](https://github.com/mdn/dom-examples/tree/main/service-worker/simple-service-worker) -- {{domxref("fetch()")}} method -- {{domxref("Request")}} interface -- {{domxref("Response")}} interface +- {{domxref("WorkerGlobalScope/fetch", "fetch()")}} メソッド +- {{domxref("Request")}} インターフェイス +- {{domxref("Response")}} インターフェイス