ServiceWorkerContainer
ServiceWorkerContainer
はサービスワーカー APIのインターフェイスで、ネットワークエコシステムの全体的な単位として、サービスワーカーを表すオブジェクトを提供します。 サービスワーカーは、サービスワーカーの登録、登録解除、更新のための機能や、サービスワーカーの状態とそれらの登録状況にアクセスするための機能を備えています。
ここで最も重要なことは、サービスワーカーを登録するための ServiceWorkerContainer.register()
メソッドと、現在のページがアクティブに制御されているかどうかを判断するための ServiceWorkerContainer.controller
プロパティを公開していることです。
インスタンスプロパティ
ServiceWorkerContainer.controller
読取専用-
ServiceWorker
オブジェクトの状態がactivating
またはactivated
の場合、それを返します(ServiceWorkerRegistration.active
によって返されるのと同じオブジェクトです)。このプロパティは、強制再読み込みのリクエスト中(Shift + 再読み込み)、またはアクティブワーカーがない場合はnull
を返します。 ServiceWorkerContainer.ready
読取専用-
サービスワーカーがアクティブになるまでコードの実行を遅らせる方法を提供します。 決して拒否せず、現在のページに関連付けられている
ServiceWorkerRegistration
にServiceWorkerRegistration.active
ワーカーが存在するようになるまで無期限に待機するPromise
を返します。 その条件が満たされると、ServiceWorkerRegistration
で解決されます。
イベント
controllerchange
-
文書に関連する
ServiceWorkerRegistration
が新しいアクティブ(active
)ワーカーを取得すると発生します。 error
非推奨 Non-standard-
関連するサービスワーカーでエラーが発生するたびに発生します。
message
-
着信メッセージを
ServiceWorkerContainer
オブジェクトが受信したときに発生します(例えば、MessagePort.postMessage()
呼び出しを介して)。
インスタンスメソッド
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((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("サービスワーカーに対応していません。");
}
仕様書
Specification |
---|
Service Workers # serviceworkercontainer-interface |
ブラウザーの互換性
BCD tables only load in the browser