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 の定義
草案

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
message event
実験的
Chrome 完全対応 40Edge 完全対応 ≤79Firefox 完全対応 44
補足
完全対応 44
補足
補足 Extended Support Releases (ESR) before Firefox 78 ESR do not support service workers and the Push API.
IE 未対応 なしOpera 完全対応 24Safari 完全対応 11.1WebView Android 完全対応 40Chrome Android 完全対応 40Firefox Android 完全対応 44Opera Android 完全対応 24Safari iOS 完全対応 11.3Samsung Internet Android 完全対応 4.0

凡例

完全対応  
完全対応
未対応  
未対応
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。

関連情報