ServiceWorker
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) でのみ利用できます。
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 Nightly # serviceworker-interface |
ブラウザーの互換性
Enable JavaScript to view this browser compatibility table.