initial commit

6 files changed, 404 insertions, 0 deletions

diff --git a/files/ja/web/api/client/frametype/index.html b/files/ja/web/api/client/frametype/index.html
new file mode 100644
index 0000000000..c1fb5d1f6d
--- /dev/null
+++ b/files/ja/web/api/client/frametype/index.html
@@ -0,0 +1,50 @@
+---
+title: Client.frameType
+slug: Web/API/Client/frameType
+tags:
+  - API
+  - Client
+  - Property
+  - Reference
+  - Service Workers
+  - ServiceWorker
+  - frameType
+translation_of: Web/API/Client/frameType
+---
+<p>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</p>
+
+<p>{{domxref("Client")}} インターフェイスの <strong><code>frameType</code></strong> 読み取り専用プロパティは、現在の {{domxref("Client")}} の閲覧コンテキストの種類を示します。 この値は、<code>"auxiliary"</code>、<code>"top-level"</code>、<code>"nested"</code>、<code>"none"</code> のいずれかです。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: js">var <em>myFrameType</em> = <em>client</em>.frameType;</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<pre class="brush: js">未定
+</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', '#client-frametype', 'frameType')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>初期定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div>
+
+
+<p>{{Compat("api.Client.frameType")}}</p>
+</div>
diff --git a/files/ja/web/api/client/id/index.html b/files/ja/web/api/client/id/index.html
new file mode 100644
index 0000000000..f1eb5b03f1
--- /dev/null
+++ b/files/ja/web/api/client/id/index.html
@@ -0,0 +1,50 @@
+---
+title: Client.id
+slug: Web/API/Client/id
+tags:
+  - API
+  - Client
+  - Property
+  - Reference
+  - Service Workers
+  - ServiceWorker
+  - id
+translation_of: Web/API/Client/id
+---
+<p>{{APIRef("Service Workers API")}}</p>
+
+<p><span class="seoSummary">{{domxref("Client")}} インターフェイスの <strong><code>id</code></strong> 読み取り専用プロパティは、{{domxref("Client")}} オブジェクトの汎用一意識別子を返します。</span></p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: js">var <em>clientId</em> = <em>client</em>.id;</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<pre class="brush: js">未定
+</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', '#client-id', 'id')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>初期定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div>
+
+
+<p>{{Compat("api.Client.id")}}</p>
+</div>
diff --git a/files/ja/web/api/client/index.html b/files/ja/web/api/client/index.html
new file mode 100644
index 0000000000..c93d6ff9e7
--- /dev/null
+++ b/files/ja/web/api/client/index.html
@@ -0,0 +1,66 @@
+---
+title: Client
+slug: Web/API/Client
+tags:
+  - API
+  - Client
+  - Interface
+  - Reference
+  - Service Workers
+  - Service worker API
+  - ServiceWorkerClient
+  - ServiceWorkers
+translation_of: Web/API/Client
+---
+<p>{{APIRef("Service Workers API")}}</p>
+
+<p><span class="seoSummary"><strong><code>Client</code></strong> インターフェイスは、{{domxref("Worker")}} や {{domxref("SharedWorker")}} などの実行可能なコンテキストを表します。 {{domxref("Window")}} クライアントは、より具体的な {{domxref("WindowClient")}} によって表されます。 {{domxref("Clients.matchAll","Clients.matchAll()")}} や {{domxref("Clients.get","Clients.get()")}} などのメソッドから <code>Client</code>/<code>WindowClient</code> オブジェクトを取得できます。</span></p>
+
+<h2 id="Methods" name="Methods">メソッド</h2>
+
+<dl>
+ <dt>{{domxref("Client.postMessage()")}}</dt>
+ <dd>メッセージをクライアントに送信します。</dd>
+</dl>
+
+<h2 id="Properties" name="Properties">プロパティ</h2>
+
+<dl>
+ <dt>{{domxref("Client.id")}} {{readonlyInline}}</dt>
+ <dd>文字列としてのクライアントの汎用一意識別子。</dd>
+ <dt>{{domxref("Client.type")}} {{readonlyInline}}</dt>
+ <dd>文字列としてのクライアントの種類。 <code>"window"</code>、<code>"worker"</code>、<code>"sharedworker"</code> のいずれかです。</dd>
+ <dt>{{domxref("Client.url")}} {{readonlyInline}}</dt>
+ <dd>文字列としてのクライアントの URL。</dd>
+</dl>
+
+<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', '#client', 'Client')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>初期定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+
+
+<p>{{Compat("api.Client")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Service worker の使用</a></li>
+ <li><a href="https://jakearchibald.github.io/isserviceworkerready/">ServiceWorker の準備はできていますか？</a>（英語）</li>
+ <li><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a></li>
+</ul>
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>
diff --git a/files/ja/web/api/client/type/index.html b/files/ja/web/api/client/type/index.html
new file mode 100644
index 0000000000..74133f20b2
--- /dev/null
+++ b/files/ja/web/api/client/type/index.html
@@ -0,0 +1,75 @@
+---
+title: Client.type
+slug: Web/API/Client/type
+tags:
+  - API
+  - Client
+  - Property
+  - Reference
+  - Service Workers
+  - Type
+translation_of: Web/API/Client/type
+---
+<p>{{APIRef("Service Workers API")}}</p>
+
+<p><span class="seoSummary">{{domxref("Client")}} インターフェイスの <strong><code>type</code></strong> 読み取り専用プロパティは、サービスワーカーが制御しているクライアントの種類を示します。</span></p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">var <em>myClientType</em> = <em>client</em>.type;</pre>
+
+<h3 id="Value" name="Value">値</h3>
+
+<p>クライアントの種類を表す文字列。 値は次のいずれかです。</p>
+
+<ul>
+ <li><code>"window"</code></li>
+ <li><code>"worker"</code></li>
+ <li><code>"sharedworker"</code></li>
+</ul>
+
+<h2 id="Example" name="Example">例</h2>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="comment token">// サービスワーカークライアント（ドキュメントなど）</span>
+<span class="keyword token">function</span> <span class="function token">sendMessage</span><span class="punctuation token">(</span>message<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">return</span> <span class="keyword token">new</span> <span class="class-name token">Promise</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span>resolve<span class="punctuation token">,</span> reject<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="comment token">// これは ServiceWorker.postMessage バージョンであることに注意してください</span>
+    navigator<span class="punctuation token">.</span>serviceWorker<span class="punctuation token">.</span>controller<span class="punctuation token">.</span><span class="function token">postMessage</span><span class="punctuation token">(</span>message<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    window<span class="punctuation token">.</span>serviceWorker<span class="punctuation token">.</span>onMessage <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="function token">resolve</span><span class="punctuation token">(</span>e<span class="punctuation token">.</span>data<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="comment token">// 制御するサービスワーカー</span>
+self<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"message"</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="comment token">// e.source はクライアントオブジェクトです</span>
+  e<span class="punctuation token">.</span>source<span class="punctuation token">.</span><span class="function token">postMessage</span><span class="punctuation token">(</span><span class="string token">"こんにちは！ あなたのメッセージは: "</span> <span class="operator token">+</span> e<span class="punctuation token">.</span>data<span class="punctuation token">);
+  // type 値も投稿してクライアントに戻しましょう
+</span>  e<span class="punctuation token">.</span>source<span class="punctuation token">.</span><span class="function token">postMessage</span><span class="punctuation token">(e.source.type);</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></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', '#client-type', 'type')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>初期定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div>
+
+
+<p>{{Compat("api.Client.type")}}</p>
+</div>
diff --git a/files/ja/web/api/client/url/index.html b/files/ja/web/api/client/url/index.html
new file mode 100644
index 0000000000..91a3e30068
--- /dev/null
+++ b/files/ja/web/api/client/url/index.html
@@ -0,0 +1,69 @@
+---
+title: Client.url
+slug: Web/API/Client/url
+tags:
+  - API
+  - Client
+  - Property
+  - Reference
+  - Service Workers
+  - URL
+translation_of: Web/API/Client/url
+---
+<div>{{APIRef("Service Workers API")}}</div>
+
+<p><span class="seoSummary">{{domxref("Client")}} インターフェイスの <strong><code>url</code></strong> 読み取り専用プロパティは、現在のサービスワーカークライアントの URL を返します。</span></p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">var <em>clientUrl</em> = <em>client</em>.url;</pre>
+
+<h3 id="Value" name="Value">値</h3>
+
+<p>{{domxref("USVString")}}。</p>
+
+<h2 id="Example" name="Example">例</h2>
+
+<pre class="brush: js">self.addEventListener('notificationclick', function(event) {
+  console.log('On notification click: ', event.notification.tag);
+  event.notification.close();
+
+  // これは、クライアントが既に開いているかどうかを確認し、
+  // 開いている場合にフォーカスを合わせます
+  event.waitUntil(clients.matchAll({
+    type: 'window'
+  }).then(function(clientList) {
+    for (var i = 0; i &lt; clientList.length; i++) {
+      var client = clientList[i];
+      if (client.url == '/' &amp;&amp; 'focus' in client)
+        return client.focus();
+    }
+    if (clients.openWindow)
+      return clients.openWindow('/');
+  }));
+});</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', '#client-url', 'url')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>初期定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div>
+
+
+<p>{{Compat("api.Client.url")}}</p>
+</div>