ServiceWorkerGlobalScope: message event

例

以下の例では、ページが 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 worker の使用
• サービスワーカーの基本的なコード例（英語）
• ServiceWorker の準備はできていますか？（英語）
• Web worker の使用