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 、および、backgroundfetchfail イベントのためのイベント型で、バックグラウンドでのフェッチの成否をユーザーに伝えるために、アプリのタイトルやアイコンを更新するメソッドを有しています。

コンストラクター

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

プロパティ

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

メソッド

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

例

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

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!" });    })(),  );});