このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
BackgroundFetchUpdateUIEvent
利用可能性は限定的
この機能はベースラインではありません。最も広く使用されているブラウザーの一部で動作しません。
Want more support for this feature? Tell us why.
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
Background Fetch API の BackgroundFetchUpdateUIEvent インターフェイスは、 backgroundfetchsuccess 、および、 backgroundfetchfail イベントのためのイベント型で、バックグラウンドでのフェッチの成否をユーザーに伝えるために、アプリのタイトルやアイコンを更新するメソッドを有しています。
コンストラクター
BackgroundFetchUpdateUIEvent()-
新規に
BackgroundFetchUIEventオブジェクトを作成します。通常、このコンストラクターが使用されることはありません。なぜなら、これらのオブジェクトはbackgroundfetchsuccess、および、backgroundfetchfailイベントのためにブラウザーによって自動で生成されるからです。
プロパティ
このインスタンスは特にプロパティを持っていませんが、 Event 、および、 BackgroundFetchEvent のプロパティを継承します。
メソッド
BackgroundFetchUpdateUIEvent.updateUI()-
バックグラウンドのフェッチの状況を知らせるために、 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!" });
})(),
);
});
仕様書
| 仕様書 |
|---|
| Background Fetch # background-fetch-update-ui-event |
ブラウザーの互換性
ブラウザー互換性一覧表を表示するには、JavaScript を有効にしてください。