ServiceWorker
安全なコンテキスト用: この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。
ServiceWorker
はサービスワーカー API のインターフェイスで、サービスワーカーへの参照を提供します。複数の閲覧コンテキスト(ページ、ワーカー、など)を、同じサービスワーカーに一意の ServiceWorker
オブジェクトによって関連付けることができます。
ServiceWorker
オブジェクトは ServiceWorkerRegistration.active
プロパティと、 ServiceWorkerContainer.controller
プロパティ — これはアクティブ化されたサービスワーカーであり、ページを制御するものです(サービスワーカーが正常に登録されたら、制御されたページは再読み込みされます) — のから利用可能です。
ServiceWorker
インターフェイスへは、 install
や activate
、そして fetch
を含む機能的なイベントといった一連のライフサイクルイベントが送られます。ServiceWorker
オブジェクトは、ライフサイクルに関係する状態 (ServiceWorker.state
) を持っています。
インスタンスプロパティ
ServiceWorker
インターフェイスは、親となる EventTarget
からプロパティを継承しています。
ServiceWorker.scriptURL
読取専用-
ServiceWorkerRegistration
の一部と定義されている、ServiceWorker
のスクリプト URL がシリアライズされたもの返します。この URL はそのServiceWorker
を登録している文書と同一オリジン上でなければなりません。 ServiceWorker.state
読取専用-
この サービスワーカーの状態を返します。
parsed
、installing
、installed
、activating
、activated
、redundant
のいずれかの値を返します。
メソッド
ServiceWorker
インターフェイスは、親となる EventTarget
からメソッドを継承しています。
ServiceWorker.postMessage()
-
メッセージをこのサービスワーカーへ送信します。このメッセージは、あらゆる構造化クローン可能な JavaScript オブジェクトにすることができます。このメッセージは、サービスワーカーのグローバルスコープの
message
イベントを使用して送信されます。
イベント
statechange
-
ServiceWorker.state
が変化したときに発生します。 error
-
ServiceWorker
オブジェクトの内部でエラーが発生したときに発行されます。
例
このコードスニペットは、サービスワーカーの登録イベントサンプル(ライブデモ)に掲載されています。このコードは、ServiceWorker.state
の変化を待ち受け、その値を返しています。
if ("serviceWorker" in navigator) {
navigator.serviceWorker
.register("service-worker.js", {
scope: "./",
})
.then((registration) => {
let serviceWorker;
if (registration.installing) {
serviceWorker = registration.installing;
document.querySelector("#kind").textContent = "installing";
} else if (registration.waiting) {
serviceWorker = registration.waiting;
document.querySelector("#kind").textContent = "waiting";
} else if (registration.active) {
serviceWorker = registration.active;
document.querySelector("#kind").textContent = "active";
}
if (serviceWorker) {
// logState(serviceWorker.state);
serviceWorker.addEventListener("statechange", (e) => {
// logState(e.target.state);
});
}
})
.catch((error) => {
// 登録時に何か問題が発生した。service-worker.js ファイルが利用できないか、
// 構文エラーが含まれている可能性がある。
});
} else {
// 現在のブラウザーはサービスワーカーに対応していない。
// おそらく、古すぎるか、安全なコンテキストにない。
}
仕様書
Specification |
---|
Service Workers # serviceworker-interface |
ブラウザーの互換性
BCD tables only load in the browser