Clients

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2018.

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

メソッド

Clients.get()

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

Clients.matchAll()

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

Clients.openWindow()

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

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

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Clients
claim
get
matchAll
options.includeUncontrolled parameter
openWindow

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
See implementation notes.
Has more compatibility info.

関連情報