From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/api/client/postmessage/index.html | 94 ++++++++++++++++++++++++++ 1 file changed, 94 insertions(+) create mode 100644 files/ja/web/api/client/postmessage/index.html (limited to 'files/ja/web/api/client/postmessage') diff --git a/files/ja/web/api/client/postmessage/index.html b/files/ja/web/api/client/postmessage/index.html new file mode 100644 index 0000000000..a4b4556f7b --- /dev/null +++ b/files/ja/web/api/client/postmessage/index.html @@ -0,0 +1,94 @@ +--- +title: Client.postMessage() +slug: Web/API/Client/postMessage +tags: + - API + - Client + - Method + - Reference + - Service Workers + - Service worker API + - ServiceWorker + - postMessage +translation_of: Web/API/Client/postMessage +--- +

{{APIRef("Service Worker API")}}

+ +

postMessage() は {{domxref("Client")}} インターフェイスのメソッドで、サービスワーカーがクライアント ({{domxref("Window")}}, {{domxref("Worker")}}, {{domxref("SharedWorker")}}) にメッセージを送信することができます。 メッセージは、 {{domxref("ServiceWorkerContainer", "navigator.serviceWorker")}} の "message" イベントで受信されます。

+ +

構文

+ +
client.postMessage(message[, transfer]);
+client.postMessage(message[, { transfer }]);
+
+ +

引数

+ +
+
message
+
クライアントに送信するメッセージです。これは、任意の複製可能な構造化型にすることができます。
+
transfer {{optional_inline}}
+
メッセージとともに転送されるオブジェクトのシーケンスです。 これらのオブジェクトの所有権は宛先側に与えられ、送信側では使用できなくなります。
+
+ +

返値

+ +

undefined。

+ +

例

+ +

サービスワーカーからクライアントへのメッセージの送信

+ +
addEventListener('fetch', event => {
+  event.waitUntil(async function() {
+    // クライアントにアクセスできない場合は、早期に終了します。
+    // 例えば、クロスオリジンの場合。
+    if (!event.clientId) return;
+
+    // クライアントを取得します。
+    const client = await clients.get(event.clientId);
+    // クライアントを取得できない場合は、早期に終了します。
+    // 例えば、閉じている場合。
+    if (!client) return;
+
+    // クライアントにメッセージを送信します。
+    client.postMessage({
+      msg: "私はあなたからフェッチされましたよ！",
+      url: event.request.url
+    });
+
+  }());
+});
+ +

そのメッセージの受け取り

+ +
navigator.serviceWorker.addEventListener('message', event => {
+  console.log(event.data.msg, event.data.url);
+});
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('Service Workers', '#dom-client-postmessage-message-options', 'postMessage()')}}{{Spec2('Service Workers')}}初回定義
+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("api.Client.postMessage")}}

+
-- cgit v1.2.3-54-g00ecf