Clients

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨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("新しいチャットメッセージ！");
    })(),
  );
});