ServiceWorkerContainer

ServiceWorkerContainer.controller 読取専用

ServiceWorker オブジェクトの状態が activating または activated の場合、それを返します（ServiceWorkerRegistration.active によって返されるのと同じオブジェクト）。 このプロパティは、強制リフレッシュのリクエスト中（Shift + リフレッシュ）、またはアクティブワーカーがない場合は null を返します。

ServiceWorkerContainer.ready 読取専用

サービスワーカーがアクティブになるまでコードの実行を遅らせる方法を提供します。 決して拒否せず、現在のページに関連付けられている ServiceWorkerRegistration に ServiceWorkerRegistration.active ワーカーが存在するようになるまで無期限に待機する Promise を返します。 その条件が満たされると、ServiceWorkerRegistration で解決されます。

controllerchange

文書に関連する ServiceWorkerRegistration が新しいアクティブ（active）ワーカーを取得すると発生します。
ServiceWorkerContainer.oncontrollerchange プロパティからも利用できます。

error

 関連するサービスワーカーでエラーが発生するたびに発生します。
ServiceWorkerContainer.onerror プロパティからも利用できます。

message

着信メッセージを ServiceWorkerContainer オブジェクトが受信したときに発生します（例えば、MessagePort.postMessage() 呼び出しを介して）。
ServiceWorkerContainer.onmessage プロパティからも利用できます。

ServiceWorkerContainer.register()

指定された scriptURL の ServiceWorkerRegistration を作成または更新します。

ServiceWorkerContainer.getRegistration()

指定された文書 URL とスコープが一致する ServiceWorkerRegistration オブジェクトを取得します。 このメソッドは、ServiceWorkerRegistration または undefined に解決される Promise を返します。

ServiceWorkerContainer.getRegistrations()

ServiceWorkerContainer に関するすべての ServiceWorkerRegistration オブジェクトを配列で返します。 このメソッドは、ServiceWorkerRegistration の配列に解決される Promise を返します。

ServiceWorkerContainer.startMessages()

サービスワーカーからその制御下のページにディスパッチされるメッセージの流れを明示的に開始します（例えば、Client.postMessage() を介して送信されます）。 これは、ページのコンテンツの読み込みが完了する前であっても、送信されたメッセージに早く反応するために使用できます。

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

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

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

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

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

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

• Service worker の使用
• サービスワーカーの基本的なコード例（英語）
• ServiceWorker の準備はできていますか？（英語）
• Promise
• Web worker の使用