From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../message_event/index.html | 91 ++++++++++++++++++++++ 1 file changed, 91 insertions(+) create mode 100644 files/ja/web/api/serviceworkercontainer/message_event/index.html (limited to 'files/ja/web/api/serviceworkercontainer/message_event') diff --git a/files/ja/web/api/serviceworkercontainer/message_event/index.html b/files/ja/web/api/serviceworkercontainer/message_event/index.html new file mode 100644 index 0000000000..34fa83fc71 --- /dev/null +++ b/files/ja/web/api/serviceworkercontainer/message_event/index.html @@ -0,0 +1,91 @@ +--- +title: 'ServiceWorkerContainer: message イベント' +slug: Web/API/ServiceWorkerContainer/message_event +tags: + - API + - Event + - Reference + - Service Workers + - ServiceWorkerContainer +translation_of: Web/API/ServiceWorkerContainer/message_event +--- +
{{APIRef}}
+ +

message イベントは、サービスワーカーからメッセージを受信するために、サービスワーカーによって制御されるページで使用します。

+ + + + + + + + + + + + + + + + + + + + +
バブリングなし
キャンセル不可
インターフェイス{{domxref("MessageEvent")}}
イベントハンドラープロパティonmessage
+ +

例

+ +

この例では、サービスワーカーは 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 イベントをリッスンしてメッセージを受信できます。

+ +
// 制御されているページ
+navigator.serviceWorker.addEventListener('message', (message) => {
+    console.log(message);
+});
+ +

仕様

+ + + + + + + + + + + + +
仕様状態
{{SpecName('Service Workers', '#dom-serviceworkercontainer-onmessage', 'message')}}{{Spec2('Service Workers')}}
+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("api.ServiceWorkerContainer.message_event")}}

+
+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf