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 April 2018.

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

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

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

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

構文

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

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

onmessage = (event) => {};

イベント型

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

Event ExtendableEvent ExtendableMessageEvent

イベントプロパティ

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

ExtendableMessageEvent.data 読取専用

イベントのデータを返します。任意のデータ型にすることができます。messageerror イベントで配信された場合、プロパティは null になります。

ExtendableMessageEvent.origin 読取専用

メッセージを送信した Client のオリジンを返します。

ExtendableMessageEvent.lastEventId 読取専用

サーバー送信イベントにおいて、イベントソースの最後のイベント ID を表します。

ExtendableMessageEvent.source 読取専用

メッセージを送信した Client オブジェクトへの参照を返します。

ExtendableMessageEvent.ports 読取専用

関連するメッセージチャネルのポートを表す MessagePort オブジェクトを含む配列を返します。

例

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

js
// 制御されているページ内
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" イベントを待ち受けすることでメッセージを受け取ることができます。

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

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

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

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

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

仕様書

Specification
Service Workers
# eventdef-serviceworkerglobalscope-message
Service Workers
# dom-serviceworkerglobalscope-onmessage

ブラウザーの互換性

BCD tables only load in the browser

関連情報