aboutsummaryrefslogtreecommitdiff
path: root/files/ja/web/api/clients
diff options
context:
space:
mode:
Diffstat (limited to 'files/ja/web/api/clients')
-rw-r--r--files/ja/web/api/clients/claim/index.html74
-rw-r--r--files/ja/web/api/clients/get/index.html65
-rw-r--r--files/ja/web/api/clients/index.html99
-rw-r--r--files/ja/web/api/clients/matchall/index.html75
-rw-r--r--files/ja/web/api/clients/openwindow/index.html90
5 files changed, 403 insertions, 0 deletions
diff --git a/files/ja/web/api/clients/claim/index.html b/files/ja/web/api/clients/claim/index.html
new file mode 100644
index 0000000000..dbeaae291a
--- /dev/null
+++ b/files/ja/web/api/clients/claim/index.html
@@ -0,0 +1,74 @@
+---
+title: Clients.claim()
+slug: Web/API/Clients/claim
+tags:
+ - API
+ - Clients
+ - Method
+ - Reference
+ - Service Workers
+ - ServiceWorker
+ - claim
+translation_of: Web/API/Clients/claim
+---
+<p>{{APIRef("Service Worker Clients")}}</p>
+
+<p><span class="seoSummary">{{domxref("Clients")}} インターフェイスの <strong><code>claim()</code></strong> メソッドを使用すると、アクティブなサービスワーカーが自身のスコープ（{{domxref("ServiceWorkerRegistration.scope", "scope")}}）内のすべてのクライアントのコントローラー（{{domxref("ServiceWorkerContainer.controller", "controller")}}）として自分自身を設定できます。 これにより、このサービスワーカーによって制御されるようになるクライアントの {{domxref("ServiceWorkerContainer","navigator.serviceWorker")}} で <code>"controllerchange"</code> イベントがトリガーされます。</span></p>
+
+<p>サービスワーカーが最初に登録されると、ページは次に読み込まれるまでそれを使用しません。 <code>claim()</code> メソッドを使用すると、これらのページがすぐに制御されます。 これにより、サービスワーカーがネットワークを介して、または別のサービスワーカーを介して定期的に読み込まれるページを制御することに注意してください。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">await clients.claim();
+</pre>
+
+<h3 id="Parameters" name="Parameters">パラメーター</h3>
+
+<p>なし。</p>
+
+<h3 id="Return_value" name="Return_value">戻り値</h3>
+
+<p><code>undefined</code> に解決される {{jsxref("Promise")}}。</p>
+
+<h2 id="Example" name="Example">例</h2>
+
+<p>次の例では、サービスワーカーの <code>"activate"</code> イベントリスナー内で <code>claim()</code> を使用しているため、同じスコープに読み込まれたクライアントは、フェッチがこのサービスワーカーを通過する前に再読み込みする必要がありません。</p>
+
+<pre class="brush: js">self.addEventListener('activate', event =&gt; {
+  event.waitUntil(clients.claim());
+});</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', '#clients-claim', 'claim()')}}</td>
+ <td>{{Spec2('Service Workers')}}</td>
+ <td>初期定義</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div>
+
+
+<p>{{Compat("api.Clients.claim")}}</p>
+</div>
+
+<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://developers.google.com/web/fundamentals/instant-and-offline/service-worker/lifecycle">Service Worker のライフサイクル</a></li>
+ <li><a href="https://jakearchibald.github.io/isserviceworkerready/">ServiceWorker の準備はできていますか？</a>（英語）</li>
+ <li>{{jsxref("Promise", "Promises")}}</li>
+ <li>{{domxref("ServiceWorkerGlobalScope.skipWaiting()", "self.skipWaiting()")}} - サービスワーカーの待機フェーズをスキップする</li>
+</ul>
diff --git a/files/ja/web/api/clients/get/index.html b/files/ja/web/api/clients/get/index.html
new file mode 100644
index 0000000000..df31cdfc53
--- /dev/null
+++ b/files/ja/web/api/clients/get/index.html
@@ -0,0 +1,65 @@
+---
+title: Clients.get()
+slug: Web/API/Clients/get
+tags:
+ - API
+ - Clients
+ - Method
+ - Reference
+ - Service Workers
+ - get
+translation_of: Web/API/Clients/get
+---
+<div>{{APIRef("Service Workers API")}}</div>
+
+<p><span class="seoSummary">{{domxref("Clients")}} インターフェースの <strong><code>get()</code></strong> メソッドは、所与の <code>id</code> と一致するサービスワーカークライアントを取得し、{{jsxref("Promise")}} で返します。</span></p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">self.clients.get(<em>id</em>).then(function(<em>client</em>) {
+ // 返されたクライアントで何かをします
+});</pre>
+
+<h3 id="Parameters" name="Parameters">パラメーター</h3>
+
+<dl>
+ <dt><code>id</code></dt>
+ <dd>取得するクライアントの id を表す {{domxref("DOMString")}}。</dd>
+</dl>
+
+<h3 id="Return_value" name="Return_value">戻り値</h3>
+
+<dl>
+ <dd>{{domxref("Client")}} オブジェクトまたは <code>undefined</code> に解決される {{jsxref("Promise")}}。</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<pre class="brush: js">self.clients.get(id).then(function(client) {
+ self.clients.openWindow(client.url);
+});</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-clients-get', 'get()')}}</td>
+ <td>{{Spec2('Service Workers')}}</td>
+ <td>初期定義</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div>
+
+
+<p>{{Compat("api.Clients.get")}}</p>
+</div>
diff --git a/files/ja/web/api/clients/index.html b/files/ja/web/api/clients/index.html
new file mode 100644
index 0000000000..2bb3c9a388
--- /dev/null
+++ b/files/ja/web/api/clients/index.html
@@ -0,0 +1,99 @@
+---
+title: Clients
+slug: Web/API/Clients
+tags:
+ - API
+ - Clients
+ - Interface
+ - Reference
+ - Service Workers
+ - Service worker API
+ - ServiceWorker
+ - Workers
+translation_of: Web/API/Clients
+---
+<p>{{APIRef("Service Workers API")}}</p>
+
+<p><span class="seoSummary"><strong><code>Clients</code></strong> インターフェイスは、{{domxref("Client")}} オブジェクトへのアクセスを提供します。 これは、<a href="/ja/docs/Web/API/ServiceWorker_API">サービスワーカー</a>内で {{domxref("ServiceWorkerGlobalScope", "self")}}<code>.clients</code> を介してアクセスします。</span></p>
+
+<h2 id="Methods" name="Methods">メソッド</h2>
+
+<dl>
+ <dt>{{domxref("Clients.get()")}}</dt>
+ <dd>指定された {{domxref("Client.id", "id")}} に一致する {{domxref("Client")}} の {{jsxref("Promise")}} を返します。</dd>
+ <dt>{{domxref("Clients.matchAll()")}}</dt>
+ <dd>{{domxref("Client")}} オブジェクトの配列の {{jsxref("Promise")}} を返します。 options 引数を使用すると、返されるクライアントの種類を制御できます。</dd>
+ <dt>{{domxref("Clients.openWindow()")}}</dt>
+ <dd>指定された URL の新しいブラウザーウィンドウを開き、新しい {{domxref("WindowClient")}} の {{jsxref("Promise")}} を返します。</dd>
+ <dt>{{domxref("Clients.claim()")}}</dt>
+ <dd>アクティブなサービスワーカーが自身の {{domxref("ServiceWorkerRegistration.scope", "scope")}} 内のすべてのクライアントの {{domxref("ServiceWorkerContainer.controller", "controller")}} として自分自身を設定できるようにします。</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>次の例は、ユーザーが通知をクリックしたときに既存のチャットウィンドウを表示するか、新しいチャットウィンドウを作成します。</p>
+
+<pre class="brush: js">addEventListener('notificationclick', event =&gt; {
+  event.waitUntil(async function() {
+    const allClients = await clients.matchAll({
+      includeUncontrolled: true
+    });
+
+    let chatClient;
+
+    // チャットウィンドウが既に開いているかどうかを確認します。
+    for (const client of allClients) {
+      const url = new URL(client.url);
+
+      if (url.pathname == '/chat/') {
+        // よし、使ってみよう！
+        client.focus();
+        chatClient = client;
+        break;
+      }
+    }
+
+ // 既存のチャットウィンドウが見つからなかった場合、
+ // 新しいウィンドウを開きます。
+    if (!chatClient) {
+      chatClient = await clients.openWindow('/chat/');
+    }
+
+    // クライアントにメッセージを送ります。
+    chatClient.postMessage("新しいチャットメッセージ！");
+  }());
+});
+</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', '#clients', 'Clients')}}</td>
+ <td>{{Spec2('Service Workers')}}</td>
+ <td>初期定義</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div>
+
+
+<p>{{Compat("api.Clients")}}</p>
+</div>
+
+<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>{{jsxref("Promise")}}</li>
+</ul>
diff --git a/files/ja/web/api/clients/matchall/index.html b/files/ja/web/api/clients/matchall/index.html
new file mode 100644
index 0000000000..884ca3b3f5
--- /dev/null
+++ b/files/ja/web/api/clients/matchall/index.html
@@ -0,0 +1,75 @@
+---
+title: Clients.matchAll()
+slug: Web/API/Clients/matchAll
+tags:
+ - API
+ - Clients
+ - Method
+ - Reference
+ - Service Workers
+ - ServiceWorker
+translation_of: Web/API/Clients/matchAll
+---
+<div>{{APIRef("Service Workers API")}}</div>
+
+<p><span class="seoSummary">{{domxref("Clients")}} インターフェイスの <strong><code>matchAll()</code></strong> メソッドは、サービスワーカークライアント（{{domxref("Client")}}）オブジェクトのリストの {{jsxref("Promise")}} を返します。 関連するサービスワーカーのオリジンと同じオリジンを持つすべてのサービスワーカークライアントを返すには、<code>options</code> パラメーターを含めます。 オプションが含まれていない場合、メソッドは、サービスワーカーによって制御されるサービスワーカークライアントのみを返します。</span></p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">self.clients.matchAll(<em>options</em>).then(function(<em>clients</em>) {
+ // クライアントのリストで何かを行います
+});</pre>
+
+<h3 id="Parameters" name="Parameters">パラメーター</h3>
+
+<dl>
+ <dt><code>options</code> {{optional_inline}}</dt>
+ <dd>照合操作のオプションを設定できるオプションオブジェクト。 利用可能なオプションは次のとおりです。
+ <ul>
+ <li><code>includeUncontrolled</code>: {{jsxref("Boolean")}} — <code>true</code> に設定すると、照合操作は、現在のサービスワーカーと同じオリジンを共有するすべてのクライアントを返します。 それ以外の場合は、現在のサービスワーカーによって制御されているサービスワーカークライアントのみを返します。 デフォルトは <code>false</code> です。</li>
+ <li><code>type</code>: 一致させるクライアントの種類を設定します。 使用可能な値は、<code>"window"</code>、<code>"worker"</code>、<code>"sharedworker"</code>、<code>"all"</code> です。 デフォルトは <code>"all"</code> です。</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Return_value" name="Return_value">戻り値</h3>
+
+<dl>
+ <dd>{{domxref("Client")}} オブジェクトの配列に解決される {{jsxref("Promise")}}。 Chrome 46 / Firefox 54 以降では、このメソッドはクライアントを直近でフォーカスした順序で返し、仕様どおりに修正されます。</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<pre class="brush: js">clients.matchAll(options).then(function(clientList) {
+ for (var i = 0 ; i &lt; clientList.length ; i++) {
+ if (clientList[i].url === 'index.html') {
+ clients.openWindow(clientList[i]);
+ // または、一致するクライアントに関係する何かを行う
+ }
+ }
+});</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', '#clients-matchall', 'Clients: matchall')}}</td>
+ <td>{{Spec2('Service Workers')}}</td>
+ <td>初期定義</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div>
+
+
+<p>{{Compat("api.Clients.matchAll")}}</p>
+</div>
diff --git a/files/ja/web/api/clients/openwindow/index.html b/files/ja/web/api/clients/openwindow/index.html
new file mode 100644
index 0000000000..158e38970e
--- /dev/null
+++ b/files/ja/web/api/clients/openwindow/index.html
@@ -0,0 +1,90 @@
+---
+title: Clients.openWindow()
+slug: Web/API/Clients/openWindow
+tags:
+ - API
+ - Clients
+ - Method
+ - Reference
+ - Service Workers
+ - ServiceWorker
+ - openWindow
+translation_of: Web/API/Clients/openWindow
+---
+<div>{{APIRef("Service Workers API")}}</div>
+
+<p><span class="seoSummary">{{domxref("Clients")}} インターフェイスの <strong><code>openWindow()</code></strong> メソッドは、新しい最上位の閲覧コンテキストを作成し、所与の URL をロードします。 呼び出し元のスクリプトにポップアップを表示するパーミッションがない場合、<code>openWindow()</code> は <code>InvalidAccessError</code> をスローします。</span></p>
+
+<p>Firefox では、このメソッドは、通知クリックイベントの結果として呼び出された場合にのみ、ポップアップを表示できます。</p>
+
+<p>Android 版 Chrome では、メソッドは代わりに、以前にユーザーのホーム画面に追加された<a href="/ja/docs/Web/Progressive_web_apps">スタンドアロンのウェブアプリ</a>によって提供される既存の閲覧コンテキストで URL を開く場合があります。 最近では、これは Windows 版 Chrome でも機能します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">self.clients.openWindow(<em>url</em>).then(function(<em>windowClient</em>) {
+ // WindowClient で何かをします
+});</pre>
+
+<h3 id="Parameters" name="Parameters">パラメーター</h3>
+
+<dl>
+ <dt><code>url</code></dt>
+ <dd>ウィンドウで開くクライアントの URL を表す {{domxref("USVString")}}。 通常、この値は呼び出し元のスクリプトと同じオリジンからの URL でなければなりません。</dd>
+</dl>
+
+<h3 id="Return_value" name="Return_value">戻り値</h3>
+
+<dl>
+ <dd>URL がサービスワーカーと同じオリジンからのものである場合は {{domxref("WindowClient")}} オブジェクトに解決され、それ以外の場合は {{Glossary("null", "null 値")}}に解決される {{jsxref("Promise")}}。</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<pre class="brush: js">// 適切な場合は OS に通知を送ります
+if (self.Notification.permission === 'granted') {
+ const notificationObject = {
+ body: 'ここをクリックしてメッセージを表示してください。',
+ data: { url: self.location.origin + '/some/path' },
+ // data: { url: 'http://example.com' },
+ };
+ self.registration.showNotification('メッセージがあります！', notificationObject);
+}
+
+// 通知クリックイベントリスナー
+self.addEventListener('notificationclick', e =&gt; {
+ // 通知ポップアウトを閉じます
+ e.notification.close();
+ // すべての Window クライアントを取得します
+ e.waitUntil(clients.matchAll({ type: 'window' }).then(clientsArr =&gt; {
+ // 対象 URL に一致するウィンドウタブが既に存在する場合は、それにフォーカスします。
+ const hadWindowToFocus = clientsArr.some(windowClient =&gt; windowClient.url === e.notification.data.url ? (windowClient.focus(), true) : false);
+ // それ以外の場合は、適切な URL への新しいタブを開いてフォーカスします。
+ if (!hadWindowToFocus) clients.openWindow(e.notification.data.url).then(windowClient =&gt; windowClient ? windowClient.focus() : null);
+ }));
+});
+</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-clients-openwindow', 'Clients: openWindow')}}</td>
+ <td>{{Spec2('Service Workers')}}</td>
+ <td>初期定義</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div>
+
+
+<p>{{Compat("api.Clients.openWindow")}}</p>
+</div>
generated by cgit v1.2.3-54-g00ecf (git 2.39.0) at 2025-01-25 07:38:29 +0000