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⁩.

Note: This feature is only available inService Workers.

TheClients interface provides access toClient objects. Access it viaself.clients within aservice worker.

Instance methods

Clients.get(): Returns aPromise for aClient matching a givenid.
Clients.matchAll(): Returns aPromise for an array ofClient objects. An options argument allows you to control the types of clients returned.
Clients.openWindow(): Opens a new browser window for a given URL and returns aPromise for the newWindowClient.
Clients.claim(): Allows an active service worker to set itself as thecontroller for all clients within itsscope.

Examples

The following example shows an existing chat window or creates a new one when the user clicks a notification.

addEventListener("notificationclick", (event) => {  event.waitUntil(    (async () => {      const allClients = await clients.matchAll({        includeUncontrolled: true,      });      let chatClient;      // Let's see if we already have a chat window open:      for (const client of allClients) {        const url = new URL(client.url);        if (url.pathname === "/chat/") {          // Excellent, let's use it!          client.focus();          chatClient = client;          break;        }      }      // If we didn't find an existing chat window,      // open a new one:      chatClient ??= await clients.openWindow("/chat/");      // Message the client:      chatClient.postMessage("New chat messages!");    })(),  );});