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() などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

js
addEventListener("backgroundfetchsuccess", (event) => {});

onbackgroundfetchsuccess = (event) => {};

イベント型

BackgroundFetchUpdateUIEvent です。

Event ExtendableEvent BackgroundFetchEvent BackgroundFetchUpdateUIEvent

イベントプロパティ

親である BackgroundFetchEvent から継承したプロパティがあります。

BackgroundFetchUpdateUIEvent.updateUI()

ブラウザーがフェッチ操作の進捗状況を表示するために表示する要素の UI を更新します。

解説

バックグラウンドフェッチ操作が正常に完了すると（つまり、すべての個々のネットワークリクエストが正常に完了すると）、必要に応じてブラウザーはサービスワーカーを開始し、サービスワーカーのグローバルスコープで backgroundfetchsuccess イベントを発行します。

このイベントのハンドラーでは、サービスワーカーはレスポンスを取得し、（例えば、Cache API を使用して）保存することができます。レスポンスデータにアクセスするには、サービスワーカーはイベントの registration プロパティを使用します。

バックグラウンドフェッチ API では、ブラウザーはユーザーに操作の進行状況を示す UI 要素を表示します。backgroundfetchsuccess ハンドラーでは、サービスワーカーがその UI を更新して操作が成功したことを示すことができます。これを行うには、ハンドラーがイベントの 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" });
  });
});

仕様書

Specification
Background Fetch
# dom-serviceworkerglobalscope-onbackgroundfetchsuccess

ブラウザーの互換性

BCD tables only load in the browser

関連情報