1 files changed, 94 insertions, 0 deletions
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
+---
+<p>{{APIRef("Service Worker API")}}</p>
+
+<p><span class="seoSummary"><strong><code>postMessage()</code></strong> は {{domxref("Client")}} インターフェイスのメソッドで、サービスワーカーがクライアント ({{domxref("Window")}}, {{domxref("Worker")}}, {{domxref("SharedWorker")}}) にメッセージを送信することができます。 メッセージは、 {{domxref("ServiceWorkerContainer", "navigator.serviceWorker")}} の "<code>message</code>" イベントで受信されます。</span></p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate"><var>client</var>.postMessage(<var>message</var>[, <var>transfer</var>]);
+<var>client</var>.postMessage(<var>message</var>[, { transfer }]);
+</pre>
+
+<h3 id="Parameters" name="Parameters">引数</h3>
+
+<dl>
+ <dt><code><var>message</var></code></dt>
+ <dd>クライアントに送信するメッセージです。これは、任意の<a href="/ja/docs/Web/API/Web_Workers_API/Structured_clone_algorithm">複製可能な構造化型</a>にすることができます。</dd>
+ <dt><code><var>transfer</var></code> {{optional_inline}}</dt>
+ <dd>メッセージとともに<a href="/ja/docs/Web/API/Transferable">転送</a>されるオブジェクトのシーケンスです。 これらのオブジェクトの所有権は宛先側に与えられ、送信側では使用できなくなります。</dd>
+</dl>
+
+<h3 id="Return_value" name="Return_value">返値</h3>
+
+<p><code>undefined</code>。</p>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>サービスワーカーからクライアントへのメッセージの送信</p>
+
+<pre class="brush: js notranslate">addEventListener('fetch', event =&gt; {
+  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
+    });
+
+  }());
+});</pre>
+
+<p>そのメッセージの受け取り</p>
+
+<pre class="brush: js notranslate">navigator.serviceWorker.addEventListener('message', event =&gt; {
+  console.log(event.data.msg, event.data.url);
+});</pre>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">状態</th>
+   <th scope="col">備考</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Service Workers', '#dom-client-postmessage-message-options', 'postMessage()')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div>
+<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
+
+<p>{{Compat("api.Client.postMessage")}}</p>
+</div>