ServiceWorkerGlobalScope: backgroundfetchclick イベント

Limited availability

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

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

安全なコンテキスト用: この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

メモ: この機能はサービスワーカー内でのみ利用可能です。

backgroundfetchclick は ServiceWorkerGlobalScope インターフェイスのイベントで、バックグラウンドフェッチ操作の進捗状況をユーザーに表示するためにブラウザーが提供する UI をユーザーがクリックしたときに発生します。

このイベントはキャンセル不可で、バブリングしません。

構文

このイベント名を addEventListener() などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

js
addEventListener("backgroundfetchclick", (event) => {});

onbackgroundfetchclick = (event) => {};

イベント型

BackgroundFetchEvent です。

Event ExtendableEvent BackgroundFetchEvent

イベントプロパティ

親である ExtendableEvent から継承したプロパティがあります。

BackgroundFetchEvent.registration

中止されたフェッチのための BackgroundFetchRegistration を返します。

解説

バックグラウンドフェッチ操作が開始されると、ブラウザーはユーザーに UI 要素を表示して操作の進行状況を示します。ユーザーがこの要素をクリックすると、ブラウザーは必要に応じてサービスワーカーを開始し、サービスワーカーのグローバルスコープで backgroundfetchclick イベントを発生させます。

このような状況下でハンドラーが実行する一般的なタスクは、ユーザーにフェッチ操作の詳細情報を提供するウィンドウを開くことです。

例

詳細を表示するウィンドウを開く

このイベントハンドラーは、グローバルな clients プロパティを使用して、フェッチに関する詳細情報をユーザーに提供するウィンドウを開きます。フェッチが完了しているか否かによって、異なるウィンドウが開きます。

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

  if (registration.result === "success") {
    clients.openWindow("/play-movie");
  } else {
    clients.openWindow("/movie-download-progress");
  }
});

仕様書

Specification
Background Fetch
# dom-serviceworkerglobalscope-onbackgroundfetchclick

ブラウザーの互換性

BCD tables only load in the browser

関連情報