ServiceWorkerGlobalScope: message event

ServiceWorkerGlobalScope インターフェイスの message イベントは、着信メッセージを受信したときに発生します。制御されたページは、ServiceWorker.postMessage() メソッドを使用して、サービスワーカーにメッセージを送信できます。
サービスワーカーは、任意で、制御されたページに対応する Client.postMessage() を介して返信することができます。

バブリング	なし
キャンセル	不可
インターフェイス	`ExtendableMessageEvent`
イベントハンドラープロパティ	`onmessage`

例

以下の例では、ページが ServiceWorkerRegistration.active を介して ServiceWorker オブジェクトへのハンドルを取得し、その postMessage() 関数を呼び出します。

// 制御されているページ内
if (navigator.serviceWorker) {

  navigator.serviceWorker.register('service-worker.js');

  navigator.serviceWorker.addEventListener('message', event => {
    // event は MessageEvent オブジェクトです
    console.log(`The service worker sent me a message: ${event.data}`);
  });

  navigator.serviceWorker.ready.then( registration => {
    registration.active.postMessage("Hi service worker");
  });

}

次のように、サービスワーカーは、message イベントをリッスンしてメッセージを受信できます。

// サービスワーカー内
addEventListener('message', event => {
  // event は ExtendableMessageEvent オブジェクトです
  console.log(`The client sent me a message: ${event.data}`);

  event.source.postMessage("Hi client");
});

仕様

仕様	状態
Service Workers message の定義	草案

ブラウザーの互換性

BCD tables only load in the browser

ServiceWorkerGlobalScope: message event

例

仕様

ブラウザーの互換性

関連情報