このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

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

関連情報