ServiceWorkerGlobalScope: message イベント

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2018年4月⁩.

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

メモ: この機能はサービスワーカー内でのみ利用可能です。

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

このイベントはキャンセル不可で、バブリングしません。

構文

このイベント名を addEventListener() 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

addEventListener("message", (event) => {});

onmessage = (event) => {};

イベント型

ExtendableMessageEvent です。 ExtendableEvent を継承しています。

イベントプロパティ

親である ExtendableEvent からプロパティを継承しています。

ExtendableMessageEvent.data 読取専用: イベントのデータを返します。任意のデータ型にすることができます。messageerror イベントで配信された場合、プロパティは null になります。
ExtendableMessageEvent.origin 読取専用: メッセージを送信した Client のオリジンを返します。
ExtendableMessageEvent.lastEventId 読取専用: サーバー送信イベントにおいて、イベントソースの最後のイベント ID を表します。
ExtendableMessageEvent.source 読取専用: メッセージを送信した Client オブジェクトへの参照を返します。
ExtendableMessageEvent.ports 読取専用: 関連するメッセージチャネルのポートを表す MessagePort オブジェクトを含む配列を返します。

例

以下の例では、ページが 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");
});

また、スクリプトは onmessage を使用してメッセージを待ち受けすることもできます。

// service-worker.js
self.onmessage = (event) => {
  // event は ExtendableMessageEvent オブジェクトです
  console.log(`The client sent me a message: ${event.data}`);

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