From be4ef379deba80b3b5a3a52ed24c064c8e778be9 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 19 Sep 2024 22:36:03 +0900 Subject: [PATCH] =?UTF-8?q?2024/05/07=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=96=B0=E8=A6=8F=E7=BF=BB=E8=A8=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../backgroundfetchabort_event/index.md | 68 +++++++++++++++ .../backgroundfetchclick_event/index.md | 72 ++++++++++++++++ .../backgroundfetchfail_event/index.md | 68 +++++++++++++++ .../backgroundfetchsuccess_event/index.md | 86 +++++++++++++++++++ 4 files changed, 294 insertions(+) create mode 100644 files/ja/web/api/serviceworkerglobalscope/backgroundfetchabort_event/index.md create mode 100644 files/ja/web/api/serviceworkerglobalscope/backgroundfetchclick_event/index.md create mode 100644 files/ja/web/api/serviceworkerglobalscope/backgroundfetchfail_event/index.md create mode 100644 files/ja/web/api/serviceworkerglobalscope/backgroundfetchsuccess_event/index.md diff --git a/files/ja/web/api/serviceworkerglobalscope/backgroundfetchabort_event/index.md b/files/ja/web/api/serviceworkerglobalscope/backgroundfetchabort_event/index.md new file mode 100644 index 00000000000000..fffa80b278b40f --- /dev/null +++ b/files/ja/web/api/serviceworkerglobalscope/backgroundfetchabort_event/index.md @@ -0,0 +1,68 @@ +--- +title: "ServiceWorkerGlobalScope: backgroundfetchabort イベント" +short-title: backgroundfetchabort +slug: Web/API/ServiceWorkerGlobalScope/backgroundfetchabort_event +l10n: + sourceCommit: c77a11ee1509542c16b0348afc4fcb3ffe588e1c +--- + +{{APIRef("Background Fetch API")}}{{SeeCompatTable}}{{SecureContext_Header}}{{AvailableInWorkers("service")}} + +**`backgroundfetchabort`** は {{domxref("ServiceWorkerGlobalScope")}} インターフェイスのイベントで、ユーザーまたはアプリ自体が[バックグラウンドフェッチ操作](/ja/docs/Web/API/Background_Fetch_API)をキャンセルしたときに発生します。 + +このイベントはキャンセル不可で、バブリングしません。 + +## 構文 + +このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。 + +```js +addEventListener("backgroundfetchabort", (event) => {}); + +onbackgroundfetchabort = (event) => {}; +``` + +## イベント型 + +{{domxref("BackgroundFetchEvent")}} です。 + +{{InheritanceDiagram("BackgroundFetchEvent")}} + +## イベントプロパティ + +_親である {{domxref("ExtendableEvent")}} から継承したプロパティがあります。_ + +- {{domxref("BackgroundFetchEvent.registration")}} + - : 中止されたフェッチのための {{domxref("BackgroundFetchRegistration")}} を返します。 + +## 解説 + +バックグラウンドフェッチ API では、ブラウザーがユーザーに UI 要素を表示して操作の進行状況を示します。この要素により、ユーザーはフェッチをキャンセルすることもできます。アプリ自体も、{{domxref("BackgroundFetchRegistration.abort()")}} を呼び出すことでフェッチをキャンセルできます。 + +フェッチがキャンセルされた場合、ブラウザーはフェッチを中止し、必要に応じてサービスワーカーを起動し、そのサービスワーカーのグローバルスコープで `backgroundfetchabort` イベントを発生させます。 + +このイベントのハンドラー内で、サービスワーカーは操作に関連するデータをクリーンアップできます。また、成功したレスポンスをすべて取得して保存することもできます（例えば、{{domxref("Cache")}} API を使用して）。レスポンスデータにアクセスするために、サービスワーカーはイベントの {{domxref("BackgroundFetchEvent/registration", "registration")}} プロパティを使用します。 + +## 例 + +### クリーンアップ + +このイベントハンドラーは、中止されたフェッチに関連するデータのクリーンアップを実行することができます。 + +```js +addEventListener("backgroundfetchabort", (event) => { + // 関連するデータをクリーンアップ +}); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [バックグラウンドフェッチ API](/ja/docs/Web/API/Background_Fetch_API) diff --git a/files/ja/web/api/serviceworkerglobalscope/backgroundfetchclick_event/index.md b/files/ja/web/api/serviceworkerglobalscope/backgroundfetchclick_event/index.md new file mode 100644 index 00000000000000..57a9edaf9a5a59 --- /dev/null +++ b/files/ja/web/api/serviceworkerglobalscope/backgroundfetchclick_event/index.md @@ -0,0 +1,72 @@ +--- +title: "ServiceWorkerGlobalScope: backgroundfetchclick イベント" +short-title: backgroundfetchclick +slug: Web/API/ServiceWorkerGlobalScope/backgroundfetchclick_event +l10n: + sourceCommit: c77a11ee1509542c16b0348afc4fcb3ffe588e1c +--- + +{{APIRef("Background Fetch API")}}{{SeeCompatTable}}{{SecureContext_Header}}{{AvailableInWorkers("service")}} + +**`backgroundfetchclick`** は {{domxref("ServiceWorkerGlobalScope")}} インターフェイスのイベントで、[バックグラウンドフェッチ](/ja/docs/Web/API/Background_Fetch_API)操作の進捗状況をユーザーに表示するためにブラウザーが提供する UI をユーザーがクリックしたときに発生します。 + +このイベントはキャンセル不可で、バブリングしません。 + +## 構文 + +このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。 + +```js +addEventListener("backgroundfetchclick", (event) => {}); + +onbackgroundfetchclick = (event) => {}; +``` + +## イベント型 + +{{domxref("BackgroundFetchEvent")}} です。 + +{{InheritanceDiagram("BackgroundFetchEvent")}} + +## イベントプロパティ + +_親である {{domxref("ExtendableEvent")}} から継承したプロパティがあります。_ + +- {{domxref("BackgroundFetchEvent.registration")}} + - : 中止されたフェッチのための {{domxref("BackgroundFetchRegistration")}} を返します。 + +## 解説 + +[バックグラウンドフェッチ](/ja/docs/Web/API/Background_Fetch_API)操作が開始されると、ブラウザーはユーザーに UI 要素を表示して操作の進行状況を示します。ユーザーがこの要素をクリックすると、ブラウザーは必要に応じてサービスワーカーを開始し、サービスワーカーのグローバルスコープで `backgroundfetchclick` イベントを発生させます。 + +このような状況下でハンドラーが実行する一般的なタスクは、ユーザーにフェッチ操作の詳細情報を提供するウィンドウを開くことです。 + +## 例 + +### 詳細を表示するウィンドウを開く + +このイベントハンドラーは、グローバルな {{domxref("ServiceWorkerGlobalScope.clients", "clients")}} プロパティを使用して、フェッチに関する詳細情報をユーザーに提供するウィンドウを開きます。フェッチが完了しているか否かによって、異なるウィンドウが開きます。 + +```js +addEventListener("backgroundfetchclick", (event) => { + const registration = event.registration; + + if (registration.result === "success") { + clients.openWindow("/play-movie"); + } else { + clients.openWindow("/movie-download-progress"); + } +}); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [バックグラウンドフェッチ API](/ja/docs/Web/API/Background_Fetch_API) diff --git a/files/ja/web/api/serviceworkerglobalscope/backgroundfetchfail_event/index.md b/files/ja/web/api/serviceworkerglobalscope/backgroundfetchfail_event/index.md new file mode 100644 index 00000000000000..586a64c04997da --- /dev/null +++ b/files/ja/web/api/serviceworkerglobalscope/backgroundfetchfail_event/index.md @@ -0,0 +1,68 @@ +--- +title: "ServiceWorkerGlobalScope: backgroundfetchfail イベント" +short-title: backgroundfetchfail +slug: Web/API/ServiceWorkerGlobalScope/backgroundfetchfail_event +l10n: + sourceCommit: c77a11ee1509542c16b0348afc4fcb3ffe588e1c +--- + +{{APIRef("Background Fetch API")}}{{SeeCompatTable}}{{SecureContext_Header}}{{AvailableInWorkers("service")}} + +**`backgroundfetchfail`** は {{domxref("ServiceWorkerGlobalScope")}} インターフェイスのイベントで、[バックグラウンドフェッチ](/ja/docs/Web/API/Background_Fetch_API)操作が失敗した場合、つまり、フェッチ内の少なくとも 1 つのネットワークリクエストが正常に完了しなかった場合に発生します。 + +このイベントはキャンセル不可で、バブリングしません。 + +## 構文 + +このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。 + +```js +addEventListener("backgroundfetchfail", (event) => {}); + +onbackgroundfetchfail = (event) => {}; +``` + +## イベント型 + +{{domxref("BackgroundFetchUpdateUIEvent")}} です。 + +{{InheritanceDiagram("BackgroundFetchUpdateUIEvent")}} + +## イベントプロパティ + +_親である {{domxref("BackgroundFetchEvent")}} から継承したプロパティがあります。_ + +- {{domxref("BackgroundFetchUpdateUIEvent.updateUI()")}} + - : ブラウザーがフェッチ操作の進捗状況を表示するために表示する要素の UI を更新します。 + +## 解説 + +[バックグラウンドフェッチ](/ja/docs/Web/API/Background_Fetch_API)操作が失敗した場合（つまり、個々のネットワークリクエストの少なくとも 1 つが正常に完了していない場合）、ブラウザーは必要に応じてサービスワーカーを起動し、サービスワーカーのグローバルスコープで `backgroundfetchfail` イベントを発行します。 + +バックグラウンドフェッチ API では、ブラウザーはユーザーに操作の進行状況を示す UI 要素を表示します。`backgroundfetchfail` ハンドラーでは、サービスワーカーがその UI を更新して操作が失敗したことを示すことができます。これを行うには、ハンドラーがイベントの {{domxref("BackgroundFetchUpdateUIEvent/updateUI", "updateUI()")}} メソッドを呼び出し、新しいタイトルやアイコンを渡します。 + +この `backgroundfetchfail` のハンドラーでは、サービスワーカーは操作に関連するデータをクリーンアップすることもできます。また、成功したレスポンスをすべて取得して（{{domxref("Cache")}} APIを使用して）保存することもできます。レスポンスデータにアクセスするために、サービスワーカーはイベントの {{domxref("BackgroundFetchEvent/registration", "registration")}} プロパティを使用します。 + +## 例 + +### UI の更新 + +このイベントハンドラーは、操作が失敗したことをユーザーに知らせるために UI を更新します。 + +```js +addEventListener("backgroundfetchfail", (event) => { + event.updateUI({ title: "Could not complete download" }); +}); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [バックグラウンドフェッチ API](/ja/docs/Web/API/Background_Fetch_API) diff --git a/files/ja/web/api/serviceworkerglobalscope/backgroundfetchsuccess_event/index.md b/files/ja/web/api/serviceworkerglobalscope/backgroundfetchsuccess_event/index.md new file mode 100644 index 00000000000000..9a748334d1ae23 --- /dev/null +++ b/files/ja/web/api/serviceworkerglobalscope/backgroundfetchsuccess_event/index.md @@ -0,0 +1,86 @@ +--- +title: "ServiceWorkerGlobalScope: backgroundfetchsuccess イベント" +short-title: backgroundfetchsuccess +slug: Web/API/ServiceWorkerGlobalScope/backgroundfetchsuccess_event +l10n: + sourceCommit: c77a11ee1509542c16b0348afc4fcb3ffe588e1c +--- + +{{APIRef("Background Fetch API")}}{{SeeCompatTable}}{{SecureContext_Header}}{{AvailableInWorkers("service")}} + +**`backgroundfetchsuccess`** は {{domxref("ServiceWorkerGlobalScope")}} インターフェイスのイベントで、[バックグラウンドフェッチ](/ja/docs/Web/API/Background_Fetch_API)操作が正常に完了したとき、つまり、フェッチで行うネットワークリクエストがすべて正常に完了したときに発行されます。 + +このイベントはキャンセル不可で、バブリングしません。 + +## 構文 + +このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。 + +```js +addEventListener("backgroundfetchsuccess", (event) => {}); + +onbackgroundfetchsuccess = (event) => {}; +``` + +## イベント型 + +{{domxref("BackgroundFetchUpdateUIEvent")}} です。 + +{{InheritanceDiagram("BackgroundFetchUpdateUIEvent")}} + +## イベントプロパティ + +_親である {{domxref("BackgroundFetchEvent")}} から継承したプロパティがあります。_ + +- {{domxref("BackgroundFetchUpdateUIEvent.updateUI()")}} + - : ブラウザーがフェッチ操作の進捗状況を表示するために表示する要素の UI を更新します。 + +## 解説 + +[バックグラウンドフェッチ](/ja/docs/Web/API/Background_Fetch_API)操作が正常に完了すると（つまり、すべての個々のネットワークリクエストが正常に完了すると）、必要に応じてブラウザーはサービスワーカーを開始し、サービスワーカーのグローバルスコープで `backgroundfetchsuccess` イベントを発行します。 + +このイベントのハンドラーでは、サービスワーカーはレスポンスを取得し、（例えば、{{domxref("Cache")}} API を使用して）保存することができます。レスポンスデータにアクセスするには、サービスワーカーはイベントの {{domxref("BackgroundFetchEvent/registration", "registration")}} プロパティを使用します。 + +バックグラウンドフェッチ API では、ブラウザーはユーザーに操作の進行状況を示す UI 要素を表示します。`backgroundfetchsuccess` ハンドラーでは、サービスワーカーがその UI を更新して操作が成功したことを示すことができます。これを行うには、ハンドラーがイベントの {{domxref("BackgroundFetchUpdateUIEvent/updateUI", "updateUI()")}} メソッドを呼び出し、新しいタイトルやアイコンを渡します。 + +## 例 + +### レスポンスを保存して UI を更新 + +このイベントハンドラーは、すべてのレスポンスをキャッシュに格納し、UI を更新します。 + +```js +addEventListener("backgroundfetchsuccess", (event) => { + const registration = event.registration; + + event.waitUntil(async () => { + // Open a cache + const cache = await caches.open("movies"); + // Get all the records + const records = await registration.matchAll(); + // Cache all responses + const cachePromises = records.map(async (record) => { + const response = await record.responseReady; + await cache.put(record.request, response); + }); + + // Wait for caching to finish + await Promise.all(cachePromises); + + // Update the browser's UI + event.updateUI({ title: "Move download complete" }); + }); +}); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [バックグラウンドフェッチ API](/ja/docs/Web/API/Background_Fetch_API)