Clients

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

メソッド

Clients.get()

指定された id に一致する Client の Promise を返します。

Clients.matchAll()

Client オブジェクトの配列の Promise を返します。 options 引数を使用すると、返されるクライアントの種類を制御できます。

Clients.openWindow()

指定された URL で新しいブラウザーウィンドウを開き、新しい WindowClient の Promise を返します。

Clients.claim()

アクティブなサービスワーカーが自身の scope 内のすべてのクライアントの controller として自分自身を設定できるようにします。

例

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

js
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;
        }
      }

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

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

仕様書

Specification
Service Workers
# clients-interface

ブラウザーの互換性

BCD tables only load in the browser

関連情報