Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Web/API/ServiceWorkerGlobalScope/backgroundfetchabort_event 他3件を新規翻訳 #23690

Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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)
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)
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)
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)