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!" }); })(), ); }); 仕様書
| Specification |
|---|
| Background Fetch # background-fetch-update-ui-event |
ブラウザーの互換性
Loading…