{{APIRef("Service Workers API")}}
Service Worker API の ServiceWorkerContainer インターフェイスは、ネットワークエコシステムの全体的な単位として、サービスワーカーを表すオブジェクトを提供します。 サービスワーカーは、サービスワーカーの登録、登録解除、更新のための機能や、サービスワーカーの状態とそれらの登録状況にアクセスするための機能を備えています。
ここで最も重要なことは、サービスワーカーを登録するための {{domxref("ServiceWorkerContainer.register", "ServiceWorkerContainer.register()")}} メソッドと、現在のページがアクティブに制御されているかどうかを判断するための {{domxref("ServiceWorkerContainer.controller")}} プロパティを公開していることです。
activating または activated の場合、それを返します（{{domxref("ServiceWorkerRegistration.active")}} によって返されるのと同じオブジェクト）。 このプロパティは、強制リフレッシュのリクエスト中（Shift + リフレッシュ）、またはアクティブワーカーがない場合は null を返します。controllerchangeerrormessagescriptURL の {{domxref("ServiceWorkerRegistration")}} を作成または更新します。undefined に解決される {{jsxref("Promise")}} を返します。ServiceWorkerContainer に関するすべての {{domxref("ServiceWorkerRegistration")}} オブジェクトを配列で返します。 このメソッドは、{{domxref("ServiceWorkerRegistration")}} の配列に解決される {{jsxref("Promise")}} を返します。以下の例では、まずブラウザーがサービスワーカーをサポートしているかどうかを確認します。 サポートしている場合、コードはサービスワーカーを登録し、ページがサービスワーカーによってアクティブに制御されているかどうかを判断します。 そうでない場合は、サービスワーカーが制御できるように、ページを再読み込みするようユーザーに求めます。 コードは、登録失敗も報告します。
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('サービスワーカーをサポートしていません。');
}
| 仕様 | 状態 | コメント |
|---|---|---|
| {{SpecName('Service Workers', '#serviceworkercontainer', 'ServiceWorkerContainer')}} | {{Spec2('Service Workers')}} | 初期定義 |
{{Compat("api.ServiceWorkerContainer")}}