BackgroundFetchUpdateUIEvent

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

Background Fetch API の BackgroundFetchUpdateUIEvent インターフェイスは、 backgroundfetchsuccess (en-US) 、および、 backgroundfetchfail (en-US) イベントのためのイベント型で、バックグラウンドでのフェッチの成否をユーザーに伝えるために、アプリのタイトルやアイコンを更新するメソッドを有しています。

Event ExtendableEvent BackgroundFetchEvent BackgroundFetchUpdateUIEvent

コンストラクター

BackgroundFetchUpdateUIEvent()

新規に BackgroundFetchUIEvent オブジェクトを作成します。通常、このコンストラクターが使用されることはありません。なぜなら、これらのオブジェクトは backgroundfetchsuccess (en-US) 、および、 backgroundfetchfail (en-US) イベントのためにブラウザーによって自動で生成されるからです。

プロパティ

このインスタンスは特にプロパティを持っていませんが、 Event 、および、 BackgroundFetchEvent のプロパティを継承します。

メソッド

BackgroundFetchUpdateUIEvent.updateUI()

バックグラウンドのフェッチの状況を知らせるために、 UI 上のタイトルとアイコンを更新します。 Promise によって解決されます。

例

以下の例では、 backgroundfetchsuccess イベントの発生が待ち受けられおり、イベントの発生はフェッチが完遂されたことを意味します。イベント発生時、ユーザーにエピソードのダウンロードが完了したことを伝えるメッセージと共に、 updateUI() メソッドが呼ばれています。

js
addEventListener("backgroundfetchsuccess", (event) => {
  const bgFetch = event.registration;

  event.waitUntil(
    (async () => {
      // キャッシュを作成
      const cache = await caches.open("downloads");
      // すべての BackgroundFetchRecord オブジェクトを取得
      const records = await bgFetch.matchAll();
      // 各リクエスト/レスポンスの組をコピー
      const promises = records.map(async (record) => {
        const response = await record.responseReady;
        await cache.put(record.request, response);
      });

      // コピーの完了を待つ
      await Promise.all(promises);

      // 進捗表示を更新
      event.updateUI({ title: "Episode 5 ready to listen!" });
    })(),
  );
});

仕様書

Specification
Background Fetch
# background-fetch-update-ui-event

ブラウザーの互換性

BCD tables only load in the browser