---
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>
<p>{{Compat("api.Client.postMessage")}}</p>
</div>