ServiceWorker

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2018.

安全なコンテキスト用: この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

ServiceWorker はサービスワーカー API のインターフェイスで、サービスワーカーへの参照を提供します。複数の閲覧コンテキスト（ページ、ワーカー、など）を、同じサービスワーカーに一意の ServiceWorker オブジェクトによって関連付けることができます。

ServiceWorker オブジェクトは ServiceWorkerRegistration.active プロパティと、 ServiceWorkerContainer.controller プロパティ — これはアクティブ化されたサービスワーカーであり、ページを制御するものです（サービスワーカーが正常に登録されたら、制御されたページは再読み込みされます） — のから利用可能です。

ServiceWorker インターフェイスへは、 install や activate 、そして fetch を含む機能的なイベントといった一連のライフサイクルイベントが送られます。ServiceWorker オブジェクトは、ライフサイクルに関係する状態 (ServiceWorker.state) を持っています。

EventTarget ServiceWorker

インスタンスプロパティ

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 の変化を待ち受け、その値を返しています。

js
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

関連