Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developer.mozilla.org/ja/docs/Web/API/BackgroundFetchUpdateUIEvent below:

BackgroundFetchUpdateUIEvent - Web API | MDN

Limited availability

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

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4