Clients

Baseline

広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2018年4月以降、すべてのブラウザーで利用可能です。

完全な互換性情報を見る
もっと詳しく

メモ: この機能はサービスワーカー内でのみ利用可能です。

Clients インターフェイスは、Client オブジェクトへのアクセスを提供します。これは、サービスワーカー内で self.clients を介してアクセスします。

メソッド

Clients.get(): 指定された id に一致する Client の Promise を返します。
Clients.matchAll(): Client オブジェクトの配列の Promise を返します。 options 引数を使用すると、返されるクライアントの種類を制御できます。
Clients.openWindow(): 指定された URL で新しいブラウザーウィンドウを開き、新しい WindowClient の Promise を返します。
Clients.claim(): アクティブなサービスワーカーが自身の scope 内のすべてのクライアントの controller として自分自身を設定できるようにします。

例

次の例は、ユーザーが通知をクリックしたときに既存のチャットウィンドウを表示するか、新しいチャットウィンドウを作成します。

addEventListener("notificationclick", (event) => {
  event.waitUntil(
    (async () => {
      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;
        }
      }

      // 既存のチャットウィンドウが見つからなかった場合、
      // 新しいウィンドウを開きます。
      chatClient ??= await clients.openWindow("/chat/");

      // クライアントにメッセージを送ります。
      chatClient.postMessage("新しいチャットメッセージ！");
    })(),
  );
});