Clients
The Clients
interface provides access to Client
objects. Access it via
within a service worker.self
.clients
Instance methods
Clients.get()
Clients.matchAll()
-
Returns a
Promise
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 a
Promise
for the newWindowClient
. Clients.claim()
-
Allows an active service worker to set itself as the
controller
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.
js
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:
if (!chatClient) {
chatClient = await clients.openWindow("/chat/");
}
// Message the client:
chatClient.postMessage("New chat messages!");
})()
);
});
Specifications
Specification |
---|
Service Workers # clients-interface |
Browser compatibility
BCD tables only load in the browser