ServiceWorkerContainer: message イベント
安全なコンテキスト用: この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。
message
イベントは、サービスワーカーからメッセージを受信するために、サービスワーカーによって制御されるページで使用します。
このイベントはキャンセル不可で、バブリングしません。
構文
このイベント名を addEventListener()
などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
addEventListener("message", (event) => {});
onmessage = (event) => {};
イベント型
MessageEvent
です。 Event
を継承しています。
イベントプロパティ
このインターフェイスは親である Event
からプロパティを継承しています。
MessageEvent.data
読取専用-
メッセージ送信元によって送信されたデータです。
MessageEvent.origin
読取専用-
文字列で、メッセージ送信元のオリジンを表します。
MessageEvent.lastEventId
読取専用-
文字列で、このイベントの一意の ID を表します。
MessageEvent.source
読取専用-
MessageEventSource
(WindowProxy、MessagePort
、ServiceWorker
の何れかのオブジェクト)で、メッセージの送信元を表します。 MessageEvent.ports
読取専用-
MessagePort
オブジェクトの配列で、メッセージが送信されるチャンネルに関連するポートを表します(チャンネルメッセージングや、共有ワーカーにメッセージを送信する場合など、適切な場合)。
例
この例では、サービスワーカーは fetch
イベントからクライアントの ID を取得し、Client.postMessage
を使用してメッセージを送信します。
// サービスワーカー内
async function messageClient(clientId) {
const client = await clients.get(clientId);
client.postMessage("こんにちはクライアント!");
}
addEventListener("fetch", (event) => {
messageClient(event.clientId);
event.respondWith(() => {
// …
});
});
クライアントは message
イベントを待ち受けしてメッセージを受信できます。
// main.js
navigator.serviceWorker.addEventListener("message", (message) => {
console.log(message);
});
あるいは、クライアントは onmessage
イベントハンドラーでメッセージを受信することもできます。
// main.js
navigator.serviceWorker.onmessage = (message) => {
console.log(message);
};
仕様書
Specification |
---|
Service Workers # dom-serviceworkercontainer-onmessage |
ブラウザーの互換性
BCD tables only load in the browser