diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/ja/web/api/extendablemessageevent | |
parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip |
initial commit
Diffstat (limited to 'files/ja/web/api/extendablemessageevent')
7 files changed, 574 insertions, 0 deletions
diff --git a/files/ja/web/api/extendablemessageevent/data/index.html b/files/ja/web/api/extendablemessageevent/data/index.html new file mode 100644 index 0000000000..6a4da9f2cc --- /dev/null +++ b/files/ja/web/api/extendablemessageevent/data/index.html @@ -0,0 +1,79 @@ +--- +title: ExtendableMessageEvent.data +slug: Web/API/ExtendableMessageEvent/data +tags: + - API + - ExtendableMessageEvent + - Property + - Reference + - Service Workers + - data +translation_of: Web/API/ExtendableMessageEvent/data +--- +<p>{{APIRef("Service Workers API")}}</p> + +<p>{{domxref("ExtendableMessageEvent")}} インターフェイスの <strong><code>data</code></strong> 読み取り専用プロパティは、イベントのデータを返します。 任意のデータ型を使用できます。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">var <em>myData</em> = <em>extendableMessageEvent</em>.data;</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>任意のデータ型。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>次のコードをサービスワーカー内で使用して、{{domxref("PushMessageData")}} を介して受信したデータを<a href="/ja/docs/Web/API/Channel_Messaging_API">チャンネルメッセージ</a>を介してメインコンテキストに送信することにより、プッシュメッセージに応答する場合、<code>onmessage</code> のイベントオブジェクトは <code>ExtendableMessageEvent</code> になります。</p> + +<pre class="brush: js notranslate">var port; + +self.addEventListener('push', function(e) { + var obj = e.data.json(); + + if(obj.action === 'subscribe' || obj.action === 'unsubscribe') { + port.postMessage(obj); + } else if(obj.action === 'init' || obj.action === 'chatMsg') { + port.postMessage(obj); + } +}); + +self.onmessage = function(e) { + console.log(e.data); + port = e.ports[0]; +} +</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('Service Workers', '#dom-extendablemessageevent-data', 'ExtendableMessageEvent.data')}}</td> + <td>{{Spec2('Service Workers')}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div> + + +<p>{{Compat("api.ExtendableMessageEvent.data")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Service_Worker_API/Using_Service_Workers">Service worker の使用</a></li> + <li><a class="external external-icon" href="https://github.com/mdn/sw-test">サービスワーカーの基本的なコード例</a>(英語)</li> + <li><a class="external external-icon" href="https://jakearchibald.github.io/isserviceworkerready/">ServiceWorker の準備はできていますか?</a>(英語)</li> + <li><a href="/ja/docs/Web/API/Channel_Messaging_API">Channel Messaging</a></li> +</ul> diff --git a/files/ja/web/api/extendablemessageevent/extendablemessageevent/index.html b/files/ja/web/api/extendablemessageevent/extendablemessageevent/index.html new file mode 100644 index 0000000000..e85ef28fcc --- /dev/null +++ b/files/ja/web/api/extendablemessageevent/extendablemessageevent/index.html @@ -0,0 +1,79 @@ +--- +title: ExtendableMessageEvent() +slug: Web/API/ExtendableMessageEvent/ExtendableMessageEvent +tags: + - API + - Constructor + - ExtendableMessageEvent + - Reference + - Service Workers +translation_of: Web/API/ExtendableMessageEvent/ExtendableMessageEvent +--- +<p>{{APIRef("Service Workers API")}}</p> + +<p><span class="seoSummary"><strong><code>ExtendableMessageEvent()</code></strong> コンストラクターは、新しい {{domxref("ExtendableMessageEvent")}} オブジェクトのインスタンスを作成します。</span></p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">var <em>extendableMessageEvent</em> = new ExtendableMessageEvent(<em>type</em>, <em>init</em>);</pre> + +<h3 id="Parameters" name="Parameters">パラメーター</h3> + +<dl> + <dt>type</dt> + <dd>作成されるメッセージイベントのタイプを定義する {{domxref("DOMString")}}。</dd> + <dt>init {{optional_inline}}</dt> + <dd>次のパラメータを含む初期化オブジェクト。 + <ul> + <li><code>data</code>: イベントのデータ — これはどのデータ型でもかまいません。</li> + <li><code>origin</code>: 対応するサービスワーカーの環境設定オブジェクトのオリジンを定義する {{domxref("DOMString")}}。</li> + <li><code>lastEventId</code>: イベントソースの最後のイベント ID を定義する {{domxref("DOMString")}}。</li> + <li><code>source</code>: メッセージを送信した {{domxref("Client")}}、{{domxref("ServiceWorker")}}、または {{domxref("MessagePort")}}。</li> + <li><code>ports</code>: メッセージを送信するチャネルに接続された {{domxref("MessagePort")}} オブジェクトを含む配列。</li> + </ul> + </dd> +</dl> + +<h2 id="Examples" name="Examples">例</h2> + +<pre class="brush: js notranslate">var init = { + data : 'hello message', + source : MessagePortReference, + ports : MessagePortListReference + } + +var myEME = new ExtendableMessageEvent('message', init);</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('Service Workers', '#dom-extendablemessageevent-extendablemessageevent', 'ExtendableMessageEvent()')}}</td> + <td>{{Spec2('Service Workers')}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div> + + +<p>{{Compat("api.ExtendableMessageEvent.ExtendableMessageEvent")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Service_Worker_API/Using_Service_Workers">Service worker の使用</a></li> + <li><a class="external external-icon" href="https://github.com/mdn/sw-test">サービスワーカーの基本的なコード例</a>(英語)</li> + <li><a class="external external-icon" href="https://jakearchibald.github.io/isserviceworkerready/">ServiceWorker の準備はできていますか?</a>(英語)</li> + <li><a href="/ja/docs/Web/API/Channel_Messaging_API">Channel Messaging</a></li> +</ul> diff --git a/files/ja/web/api/extendablemessageevent/index.html b/files/ja/web/api/extendablemessageevent/index.html new file mode 100644 index 0000000000..f42b886fe8 --- /dev/null +++ b/files/ja/web/api/extendablemessageevent/index.html @@ -0,0 +1,108 @@ +--- +title: ExtendableMessageEvent +slug: Web/API/ExtendableMessageEvent +tags: + - API + - ExtendableMessageEvent + - Interface + - Reference + - Service Workers +translation_of: Web/API/ExtendableMessageEvent +--- +<div>{{APIRef("Service Workers API")}}</div> + +<p><span class="seoSummary"><a href="/ja/docs/Web/API/Service_Worker_API">Service Worker API</a> の <strong><code>ExtendableMessageEvent</code></strong> インターフェイスは、(別のコンテキストからのメッセージを {{domxref("ServiceWorkerGlobalScope")}} で受信した時に)サービスワーカーで発生する {{event("message_(ServiceWorker)","message")}} イベントのイベントオブジェクトを表し、このようなイベントの存続期間を延長します。</span></p> + +<p>このインターフェイスは、{{domxref("ExtendableEvent")}} インターフェイスを継承しています。</p> + +<h2 id="Constructor" name="Constructor">コンストラクター</h2> + +<dl> + <dt>{{domxref("ExtendableMessageEvent.ExtendableMessageEvent","ExtendableMessageEvent()")}}</dt> + <dd>新しい <code>ExtendableMessageEvent</code> オブジェクトのインスタンスを作成します。</dd> +</dl> + +<h2 id="Properties" name="Properties">プロパティ</h2> + +<p><em>親の {{domxref("ExtendableEvent")}} からプロパティを継承します。</em></p> + +<dl> + <dt>{{domxref("ExtendableMessageEvent.data")}} {{readonlyinline}}</dt> + <dd>イベントのデータを返します。 任意のデータ型を使用できます。</dd> + <dt>{{domxref("ExtendableMessageEvent.origin")}} {{readonlyinline}}</dt> + <dd>メッセージを送信した {{domxref("Client")}} のオリジンを返します。</dd> + <dt>{{domxref("ExtendableMessageEvent.lastEventId")}} {{readonlyinline}}</dt> + <dd>サーバー送信イベント(<a href="/ja/docs/Web/API/Server-sent_events/Using_server-sent_events">server-sent events</a>)で、イベントソースの最後のイベント ID を表します。 これは空の文字列です。</dd> + <dt>{{domxref("ExtendableMessageEvent.source")}} {{readonlyinline}}</dt> + <dd>メッセージを送信した {{domxref("Client")}} オブジェクトへの参照を返します。</dd> + <dt>{{domxref("ExtendableMessageEvent.ports")}} {{readonlyinline}}</dt> + <dd>関連するメッセージチャンネルのポートを表す {{domxref("MessagePort")}} オブジェクトを含む配列を返します。</dd> +</dl> + +<h2 id="Methods" name="Methods">メソッド</h2> + +<p><em>親の {{domxref("ExtendableEvent")}} からメソッドを継承します。</em></p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>以下の例では、ページが {{domxref("ServiceWorkerRegistration.active")}} を介して {{domxref("ServiceWorker")}} オブジェクトへのハンドルを取得し、その <code>postMessage()</code> 関数を呼び出します。</p> + +<pre class="brush: js notranslate">// 制御されているページ内 +if (navigator.serviceWorker) { + + navigator.serviceWorker.register('service-worker.js'); + + navigator.serviceWorker.addEventListener('message', event => { + // event は MessageEvent オブジェクトです + console.log(`The service worker sent me a message: ${event.data}`); + }); + + navigator.serviceWorker.ready.then( registration => { + registration.active.postMessage("Hi service worker"); + }); + +}</pre> + +<p>次のように、サービスワーカーは、<code>message</code> イベントをリッスンしてメッセージを受信できます。</p> + +<pre class="brush: js notranslate">// サービスワーカー内 +addEventListener('message', event => { + // event は ExtendableMessageEvent オブジェクトです + console.log(`The client sent me a message: ${event.data}`); + + event.source.postMessage("Hi client"); +});</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('Service Workers', '#extendablemessageevent', 'ExtendableMessageEvent')}}</td> + <td>{{Spec2('Service Workers')}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div> + + +<p>{{Compat("api.ExtendableMessageEvent")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Service_Worker_API/Using_Service_Workers">Service worker の使用</a></li> + <li><a class="external external-icon" href="https://github.com/mdn/sw-test">サービスワーカーの基本的なコード例</a>(英語)</li> + <li><a class="external external-icon" href="https://jakearchibald.github.io/isserviceworkerready/">ServiceWorker の準備はできていますか?</a>(英語)</li> + <li><a href="/ja/docs/Web/API/Channel_Messaging_API">Channel Messaging</a></li> +</ul> diff --git a/files/ja/web/api/extendablemessageevent/lasteventid/index.html b/files/ja/web/api/extendablemessageevent/lasteventid/index.html new file mode 100644 index 0000000000..280795d018 --- /dev/null +++ b/files/ja/web/api/extendablemessageevent/lasteventid/index.html @@ -0,0 +1,72 @@ +--- +title: ExtendableMessageEvent.lastEventId +slug: Web/API/ExtendableMessageEvent/lastEventId +translation_of: Web/API/ExtendableMessageEvent/lastEventId +--- +<p>{{APIRef("Service Workers API")}}</p> + +<p>{{domxref("ExtendableMessageEvent")}} インターフェイスの <strong><code>lastEventID</code></strong> 読み取り専用プロパティは、サーバー送信イベント(<a href="/ja/docs/Web/API/Server-sent_events/Using_server-sent_events">server-sent events</a>)で、イベントソースの最後のイベント ID を表します。 これは空の文字列です。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">var <em>myLastEventId</em> = <em>extendableMessageEvent</em>.lastEventId;</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>{{domxref("DOMString")}}。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>次のコードをサービスワーカー内で使用して、{{domxref("PushMessageData")}} を介して受信したデータを<a href="/ja/docs/Web/API/Channel_Messaging_API">チャンネルメッセージ</a>を介してメインコンテキストに送信することにより、プッシュメッセージに応答する場合、<code>onmessage</code> のイベントオブジェクトは <code>ExtendableMessageEvent</code> になります。</p> + +<pre class="brush: js notranslate">var port; + +self.addEventListener('push', function(e) { + var obj = e.data.json(); + + if(obj.action === 'subscribe' || obj.action === 'unsubscribe') { + port.postMessage(obj); + } else if(obj.action === 'init' || obj.action === 'chatMsg') { + port.postMessage(obj); + } +}); + +self.onmessage = function(e) { + console.log(e.lastEventId); + port = e.ports[0]; +} +</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('Service Workers', '#dom-extendablemessageevent-lasteventid', 'ExtendableMessageEvent.lastEventId')}}</td> + <td>{{Spec2('Service Workers')}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div> + + +<p>{{Compat("api.ExtendableMessageEvent.lastEventId")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Service_Worker_API/Using_Service_Workers">Service worker の使用</a></li> + <li><a class="external external-icon" href="https://github.com/mdn/sw-test">サービスワーカーの基本的なコード例</a>(英語)</li> + <li><a class="external external-icon" href="https://jakearchibald.github.io/isserviceworkerready/">ServiceWorker の準備はできていますか?</a>(英語)</li> + <li><a href="/ja/docs/Web/API/Channel_Messaging_API">Channel Messaging</a></li> +</ul> diff --git a/files/ja/web/api/extendablemessageevent/origin/index.html b/files/ja/web/api/extendablemessageevent/origin/index.html new file mode 100644 index 0000000000..56b0803353 --- /dev/null +++ b/files/ja/web/api/extendablemessageevent/origin/index.html @@ -0,0 +1,79 @@ +--- +title: ExtendableMessageEvent.origin +slug: Web/API/ExtendableMessageEvent/origin +tags: + - API + - ExtendableMessageEvent + - Property + - Reference + - Service Workers + - origin +translation_of: Web/API/ExtendableMessageEvent/origin +--- +<p>{{APIRef("Service Workers API")}}</p> + +<p>{{domxref("ExtendableMessageEvent")}} インターフェイスの <strong><code>origin</code></strong> 読み取り専用プロパティは、メッセージを送信した {{domxref("Client")}} のオリジンを返します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">var <em>myOrigin</em> = <em>extendableMessageEvent</em>.origin;</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>{{domxref("USVString")}}。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>次のコードをサービスワーカー内で使用して、{{domxref("PushMessageData")}} を介して受信したデータを<a href="/ja/docs/Web/API/Channel_Messaging_API">チャンネルメッセージ</a>を介してメインコンテキストに送信することにより、プッシュメッセージに応答する場合、<code>onmessage</code> のイベントオブジェクトは <code>ExtendableMessageEvent</code> になります。</p> + +<pre class="brush: js notranslate">var port; + +self.addEventListener('push', function(e) { + var obj = e.data.json(); + + if(obj.action === 'subscribe' || obj.action === 'unsubscribe') { + port.postMessage(obj); + } else if(obj.action === 'init' || obj.action === 'chatMsg') { + port.postMessage(obj); + } +}); + +self.onmessage = function(e) { + console.log(e.origin); + port = e.ports[0]; +} +</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('Service Workers', '#dom-extendablemessageevent-origin', 'ExtendableMessageEvent.origin')}}</td> + <td>{{Spec2('Service Workers')}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div> + + +<p>{{Compat("api.ExtendableMessageEvent.origin")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Service_Worker_API/Using_Service_Workers">Service worker の使用</a></li> + <li><a class="external external-icon" href="https://github.com/mdn/sw-test">サービスワーカーの基本的なコード例</a>(英語)</li> + <li><a class="external external-icon" href="https://jakearchibald.github.io/isserviceworkerready/">ServiceWorker の準備はできていますか?</a>(英語)</li> + <li><a href="/ja/docs/Web/API/Channel_Messaging_API">Channel Messaging</a></li> +</ul> diff --git a/files/ja/web/api/extendablemessageevent/ports/index.html b/files/ja/web/api/extendablemessageevent/ports/index.html new file mode 100644 index 0000000000..3b67d01e96 --- /dev/null +++ b/files/ja/web/api/extendablemessageevent/ports/index.html @@ -0,0 +1,78 @@ +--- +title: ExtendableMessageEvent.ports +slug: Web/API/ExtendableMessageEvent/ports +tags: + - API + - ExtendableMessageEvent + - Property + - Reference + - Service Workers + - ports +translation_of: Web/API/ExtendableMessageEvent/ports +--- +<p>{{APIRef("Service Workers API")}}</p> + +<p>{{domxref("ExtendableMessageEvent")}} インターフェイスの <strong><code>ports</code></strong> 読み取り専用プロパティは、関連するメッセージチャンネル(メッセージが送信されるチャンネル)のポートを表す {{domxref("MessagePort")}} オブジェクトを含む配列を返します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">var <em>myPorts</em> = <em>extendableMessageEvent</em>.ports;</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>{{domxref("MessagePort")}} オブジェクトの配列。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>次のコードをサービスワーカー内で使用して、{{domxref("PushMessageData")}} を介して受信したデータを<a href="/ja/docs/Web/API/Channel_Messaging_API">チャンネルメッセージ</a>を介してメインコンテキストに送信することにより、プッシュメッセージに応答する場合、<code>onmessage</code> のイベントオブジェクトは <code>ExtendableMessageEvent</code> になります。</p> + +<pre class="brush: js notranslate">var port; + +self.addEventListener('push', function(e) { + var obj = e.data.json(); + + if(obj.action === 'subscribe' || obj.action === 'unsubscribe') { + port.postMessage(obj); + } else if(obj.action === 'init' || obj.action === 'chatMsg') { + port.postMessage(obj); + } +}); + +self.onmessage = function(e) { + port = e.ports[0]; +} +</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('Service Workers', '#dom-extendablemessageevent-ports', 'ExtendableMessageEvent.ports')}}</td> + <td>{{Spec2('Service Workers')}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div> + + +<p>{{Compat("api.ExtendableMessageEvent.ports")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Service_Worker_API/Using_Service_Workers">Service worker の使用</a></li> + <li><a class="external external-icon" href="https://github.com/mdn/sw-test">サービスワーカーの基本的なコード例</a>(英語)</li> + <li><a class="external external-icon" href="https://jakearchibald.github.io/isserviceworkerready/">ServiceWorker の準備はできていますか?</a>(英語)</li> + <li><a href="/ja/docs/Web/API/Channel_Messaging_API">Channel Messaging</a></li> +</ul> diff --git a/files/ja/web/api/extendablemessageevent/source/index.html b/files/ja/web/api/extendablemessageevent/source/index.html new file mode 100644 index 0000000000..2b822601e1 --- /dev/null +++ b/files/ja/web/api/extendablemessageevent/source/index.html @@ -0,0 +1,79 @@ +--- +title: ExtendableMessageEvent.source +slug: Web/API/ExtendableMessageEvent/source +tags: + - API + - ExtendableMessageEvent + - Property + - Reference + - Service Workers + - source +translation_of: Web/API/ExtendableMessageEvent/source +--- +<p>{{APIRef("Service Workers API")}}</p> + +<p>{{domxref("ExtendableMessageEvent")}} インターフェイスの <strong><code>source</code></strong> 読み取り専用プロパティは、メッセージの送信元の {{domxref("Client")}} オブジェクトへの参照を返します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">var <em>mySource</em> = <em>extendableMessageEvent</em>.source;</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>{{domxref("Client")}}、{{domxref("ServiceWorker")}}、または {{domxref("MessagePort")}} オブジェクト。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>次のコードをサービスワーカー内で使用して、{{domxref("PushMessageData")}} を介して受信したデータを<a href="/ja/docs/Web/API/Channel_Messaging_API">チャンネルメッセージ</a>を介してメインコンテキストに送信することにより、プッシュメッセージに応答する場合、<code>onmessage</code> のイベントオブジェクトは <code>ExtendableMessageEvent</code> になります。</p> + +<pre class="brush: js notranslate">var port; + +self.addEventListener('push', function(e) { + var obj = e.data.json(); + + if(obj.action === 'subscribe' || obj.action === 'unsubscribe') { + port.postMessage(obj); + } else if(obj.action === 'init' || obj.action === 'chatMsg') { + port.postMessage(obj); + } +}); + +self.onmessage = function(e) { + console.log(e.source); + port = e.ports[0]; +} +</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('Service Workers', '#dom-extendablemessageevent-source', 'ExtendableMessageEvent.source')}}</td> + <td>{{Spec2('Service Workers')}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div> + + +<p>{{Compat("api.ExtendableMessageEvent.source")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Service_Worker_API/Using_Service_Workers">Service worker の使用</a></li> + <li><a class="external external-icon" href="https://github.com/mdn/sw-test">サービスワーカーの基本的なコード例</a>(英語)</li> + <li><a class="external external-icon" href="https://jakearchibald.github.io/isserviceworkerready/">ServiceWorker の準備はできていますか? </a>(英語)</li> + <li><a href="/ja/docs/Web/API/Channel_Messaging_API">Channel Messaging</a></li> +</ul> |