ServiceWorkerRegistration

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2018年4月⁩.

* Some parts of this feature may have varying levels of support.

ServiceWorkerRegistration はサービスワーカー API のインターフェイスで、サービスワーカー登録を表します。同じオリジンを共有している 1 つ以上のページを制御するサービスワーカーを登録します。

サービスワーカー登録の存続期間は、対応するサービスワーカークライアントの存続期間内でそれらを表す ServiceWorkerRegistration オブジェクトの存続期間を超えています。ブラウザーは、アクティブな ServiceWorkerRegistration オブジェクトの永続的なリストを維持します。

メモ: この機能はウェブワーカーで利用できます。

インスタンスプロパティ

親インターフェイスである EventTarget から継承したプロパティも実装しています。

ServiceWorkerRegistration.active 読取専用: 状態がアクティブ化中 (activating) またはアクティブ化済み (activated) のサービスワーカーを返します。これは最初は null に設定されています。クライアントの URL が登録のスコープ内にある場合、アクティブワーカーは Client を制御します（ServiceWorkerContainer.register を最初に呼び出したときに設定した scope オプション）。
ServiceWorkerRegistration.backgroundFetch 読取専用 Experimental: バックグラウンドフェッチ操作を管理する BackgroundFetchManager オブジェクトへの参照を返します。
ServiceWorkerRegistration.index 読取専用: ContentIndex インターフェイスの参照を返し、これによってオフライン表示のコンテンツの索引付けを管理します。
ServiceWorkerRegistration.installing 読取専用: 状態がインストール中 (installing) のサービスワーカーを返します。これは最初は null に設定されています。
ServiceWorkerRegistration.navigationPreload 読取専用: 現在のサービスワーカー登録に関連する NavigationPreloadManager のインスタンスを返します。
ServiceWorkerRegistration.paymentManager Experimental: 決済アプリの様々な機能を管理するために使用する、決済アプリの PaymentManager のインスタンスを返します。
ServiceWorkerRegistration.pushManager 読取専用: 購読申し込み、アクティブな購読の取得、プッシュの許可状況へのアクセスなど、プッシュの購読を管理するための PushManager インターフェイスへの参照を返します。
ServiceWorkerRegistration.scope 読取専用: サービスワーカー登録の一意の識別子を返します。これは、ServiceWorker を登録する文書と同じオリジンにある必要があります。
ServiceWorkerRegistration.sync 読取専用 Experimental: バックグラウンド同期プロセスを管理する SyncManager インターフェイスへの参照を返します。
ServiceWorkerRegistration.waiting 読取専用: 状態がインストール済み (installed) のサービスワーカーを返します。これは最初は null に設定されています。
ServiceWorkerRegistration.updateViaCache 読取専用: サービスワーカースクリプトを更新する際に使用するキャッシュ戦略を示す文字列を返します。 imports, all, none の何れかとなります。

インスタンスメソッド

親インターフェイスである EventTarget から継承したメソッドも実装しています。

ServiceWorkerRegistration.getNotifications(): Notification オブジェクトの配列に解決される Promise を返します。
ServiceWorkerRegistration.showNotification(): 要求したタイトルの通知を表示します。
ServiceWorkerRegistration.unregister(): サービスワーカー登録を解除し、Promise を返します。サービスワーカーは、登録が解除される前に進行中の操作を完了します。
ServiceWorkerRegistration.update(): サービスワーカーの更新されたバージョンを、キャッシュを調べずに、サーバーでチェックします。

イベント

updatefound: タイプが updatefound のイベントが発生するたびに呼び出される /ja/docs/Web/API/EventListener のプロパティ。 ServiceWorkerRegistration.installing プロパティが新しいサービスワーカーを取得するたびに発生します。

この例では、コードはまずブラウザーがサービスワーカーをサポートしているかどうかをチェックし、サポートしている場合はそれを登録します。次に、updatefound リスナーを追加します。このリスナーでは、サービスワーカー登録を使用して、サービスワーカーの状態のさらなる変更をリッスンします。サービスワーカーが最後に登録されてから変更されていない場合、updatefound イベントは発生しません。

if ("serviceWorker" in navigator) {
  navigator.serviceWorker
    .register("/sw.js")
    .then((registration) => {
      registration.addEventListener("updatefound", () => {
        // updatefound が発生した場合は、新しいサービスワーカーを
        // インストールしていることを意味します。
        const installingWorker = registration.installing;
        console.log(
          "新しいサービスワーカーをインストールしています:",
          installingWorker,
        );

        // インストール中のサービスワーカーの状態の変更を、
        // installingWorker.onstatechange を介して待ち受けできます
      });
    })
    .catch((error) => {
      console.error(`サービスワーカーの登録に失敗しました: ${error}`);
    });
} else {
  console.error("サービスワーカーに対応していません。");
}