ServiceWorkerGlobalScope: backgroundfetchsuccess イベント
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
安全なコンテキスト用: この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。
メモ: この機能はサービスワーカー内でのみ利用可能です。
backgroundfetchsuccess は ServiceWorkerGlobalScope インターフェイスのイベントで、バックグラウンドフェッチ操作が正常に完了したとき、つまり、フェッチで行うネットワークリクエストがすべて正常に完了したときに発行されます。
このイベントはキャンセル不可で、バブリングしません。
構文
このイベント名を addEventListener() などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
addEventListener("backgroundfetchsuccess", (event) => {});
onbackgroundfetchsuccess = (event) => {};
イベント型
イベントプロパティ
親である BackgroundFetchEvent から継承したプロパティがあります。
BackgroundFetchUpdateUIEvent.updateUI()-
ブラウザーがフェッチ操作の進捗状況を表示するために表示する要素の UI を更新します。
解説
バックグラウンドフェッチ操作が正常に完了すると（つまり、すべての個々のネットワークリクエストが正常に完了すると）、必要に応じてブラウザーはサービスワーカーを開始し、サービスワーカーのグローバルスコープで backgroundfetchsuccess イベントを発行します。
このイベントのハンドラーでは、サービスワーカーはレスポンスを取得し、（例えば、Cache API を使用して）保存することができます。レスポンスデータにアクセスするには、サービスワーカーはイベントの registration プロパティを使用します。
バックグラウンドフェッチ API では、ブラウザーはユーザーに操作の進行状況を示す UI 要素を表示します。backgroundfetchsuccess ハンドラーでは、サービスワーカーがその UI を更新して操作が成功したことを示すことができます。これを行うには、ハンドラーがイベントの updateUI() メソッドを呼び出し、新しいタイトルやアイコンを渡します。
例
レスポンスを保存して UI を更新
このイベントハンドラーは、すべてのレスポンスをキャッシュに格納し、UI を更新します。
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" });
});
});
仕様書
| Specification |
|---|
| Background Fetch # dom-serviceworkerglobalscope-onbackgroundfetchsuccess |
ブラウザーの互換性
Loading…