-
Notifications
You must be signed in to change notification settings - Fork 8.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
4 changed files
with
294 additions
and
0 deletions.
There are no files selected for viewing
68 changes: 68 additions & 0 deletions
68
files/ja/web/api/serviceworkerglobalscope/backgroundfetchabort_event/index.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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) |
72 changes: 72 additions & 0 deletions
72
files/ja/web/api/serviceworkerglobalscope/backgroundfetchclick_event/index.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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) |
68 changes: 68 additions & 0 deletions
68
files/ja/web/api/serviceworkerglobalscope/backgroundfetchfail_event/index.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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) |
86 changes: 86 additions & 0 deletions
86
files/ja/web/api/serviceworkerglobalscope/backgroundfetchsuccess_event/index.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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) |