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 {  // 現在のブラウザーはサービスワーカーに対応していない。  // おそらく、古すぎるか、保護されたコンテキストにない。}