ServiceWorkerContainer

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.

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

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

ServiceWorkerContainer はサービスワーカー API のインターフェイスで、ネットワークエコシステムの全体的な単位として、サービスワーカーを表すオブジェクトを提供します。これは、サービスワーカーの登録、登録解除、更新のための機能や、サービスワーカーの状態とそれらの登録状況にアクセスするための機能を備えています。

ここで最も重要なことは、サービスワーカーを登録するための ServiceWorkerContainer.register() メソッドと、現在のページがアクティブに制御されているかどうかを判断するための ServiceWorkerContainer.controller プロパティを公開していることです。

ServiceWorkerContainer オブジェクトは、ウィンドウスコープでは Navigator.serviceWorker で、ワーカーでは WorkerNavigator.serviceWorker を使用して公開されています（対応している場合。ブラウザーの互換性を確認してください）。

インスタンスプロパティ

ServiceWorkerContainer.controller 読取専用: 現在のページを制御するアクティブなサービスワーカーを表す ServiceWorker オブジェクトです。このページにアクティブまたは起動中のサービスワーカーがない場合は null を返します。
ServiceWorkerContainer.ready 読取専用: プロミス（Promise）を返します。これは現在のページに関連付けられている ServiceWorkerRegistration で解決します。ただし、アクティブなサービスワーカーがある場合のみです。これは、サービスワーカーがアクティブになるまでコードの実行を遅らせる方法を提供します。

インスタンスメソッド

ServiceWorkerContainer.getRegistration(): 指定された文書 URL とスコープが一致する ServiceWorkerRegistration オブジェクトを取得します。このメソッドは、ServiceWorkerRegistration または undefined に解決される Promise を返します。
ServiceWorkerContainer.getRegistrations(): この ServiceWorkerContainer に関するすべての ServiceWorkerRegistration オブジェクトを配列で返します。このメソッドは、ServiceWorkerRegistration の配列に解決される Promise を返します。
ServiceWorkerContainer.register(): 指定された scriptURL の ServiceWorkerRegistration を作成または更新します。
ServiceWorkerContainer.startMessages(): サービスワーカーからその制御下のページに配信されるメッセージの流れ（例えば、Client.postMessage() を介して送信されます）を明示的に開始します。これは、ページのコンテンツの読み込みが完了する前であっても、送信されたメッセージに早く反応するために使用できます。

イベント

controllerchange: 文書に関連する ServiceWorkerRegistration が新しいアクティブ（active）ワーカーを取得すると発生します。
message: 着信メッセージを ServiceWorkerContainer オブジェクトが受信したときに発生します（例えば、MessagePort.postMessage() 呼び出しを介して）。
messageerror: 受信したメッセージが ServiceWorkerContainer オブジェクトによって（例えば MessagePort.postMessage() の呼び出しを通じて）解釈できない場合に発生します。

例

以下の例では、まずブラウザーがサービスワーカーをサポートしているかどうかを確認します。サポートしている場合、コードはサービスワーカーを登録し、ページがサービスワーカーによってアクティブに制御されているかどうかを判断します。そうでない場合は、サービスワーカーが制御できるように、ページを再読み込みするようユーザーに求めます。コードは、登録失敗も報告します。

if ("serviceWorker" in navigator) {
  // デフォルトのスコープを使用して、
  // サイトのルートでホストされるサービスワーカーを登録します。
  navigator.serviceWorker
    .register("/sw.js")
    .then((registration) => {
      console.log("サービスワーカー登録成功:", registration);

      // この時点で、オプションで registration に何かを行うことができます。
      // https://developer.mozilla.org/ja/docs/Web/API/ServiceWorkerRegistration を参照してください
    })
    .catch((error) => {
      console.error(`サービスワーカー登録失敗: ${error}`);
    });

  // 登録状況に関係なく、
  // 現在のページが既存のサービスワーカーによって制御されているかどうか、
  // およびそのコントローラーがいつ変更されたかについての情報も表示しましょう。

  // まず、現在サービスワーカーが制御されているかどうか、
  // 1 回限りのチェックを行います。
  if (navigator.serviceWorker.controller) {
    console.log(
      "このページは現在サービスワーカーによって制御されています:",
      navigator.serviceWorker.controller,
    );
  }

  // 次に、ハンドラーを登録して、新しいまたは更新された
  // サービスワーカーが制御を取得するタイミングを検出します。
  navigator.serviceWorker.oncontrollerchange = () => {
    console.log(
      "このページは次のものが制御しています。",
      navigator.serviceWorker.controller,
    );
  };
} else {
  console.log("サービスワーカーに対応していません。");
}