Signatur
Beschreibung
Die Eigenschaft Client.id gibt einen String mit der eindeutigen Kennung eines Clients zurück, also eines Fensters, Tabs, Workers oder Shared Workers, der von einem Service Worker kontrolliert wird oder in seinem Gültigkeitsbereich liegt. Die Kennung bleibt über die gesamte Lebensdauer des Clients gleich und wird vom Browser vergeben.
Gebraucht wird id vor allem dann, wenn ein Service Worker einen bestimmten Client gezielt ansprechen will: Mit clients.get(id) holt man das passende Client-Objekt zurück, zum Beispiel über FetchEvent.clientId oder FetchEvent.resultingClientId in einem fetch-Handler. So kann man Antworten, Statusmeldungen oder Synchronisationsdaten gezielt an den Tab schicken, der eine Anfrage ausgelöst hat.
Weil die Kennung stabil ist, eignet sie sich auch als Schlüssel in einer Map, um Daten für einzelne Clients im Service Worker abzulegen, etwa den Fortschritt eines Uploads oder den Zustand einer Sitzung.
Rückgabewert
"7a1c3e2f-…"). Schreibgeschützt.Beispiele
Alle kontrollierten Fenster mit ihrer ID auflisten
// sw.js
self.addEventListener('message', async (event) => {
if (event.data === 'list-clients') {
const allClients = await self.clients.matchAll({ type: 'window' });
for (const client of allClients) {
console.log(client.id, client.url);
}
}
});Dem anfragenden Tab gezielt antworten (FetchEvent.clientId)
// sw.js
self.addEventListener('fetch', (event) => {
if (!event.request.url.endsWith('/api/daten')) return;
event.respondWith((async () => {
const response = await fetch(event.request);
// clientId ist leer, wenn es sich um eine Navigation handelt
if (event.clientId) {
const client = await self.clients.get(event.clientId);
client?.postMessage({ typ: 'geladen', clientId: client.id });
}
return response;
})());
});Zustand pro Client in einer Map speichern
// sw.js
const zustand = new Map();
self.addEventListener('message', (event) => {
const quelle = event.source; // Client-Objekt
const bisher = zustand.get(quelle.id) ?? 0;
zustand.set(quelle.id, bisher + 1);
quelle.postMessage(`Nachricht Nr. ${bisher + 1} von ${quelle.id}`);
});// Wichtig · Fallstricke
- Nur im Service Worker verfügbar:
Client-Objekte gibt es ausschließlich im Service-Worker-Kontext (überclients.matchAll(),clients.get()oderevent.source). Eine Seite kann ihre eigene Client-ID nicht direkt abfragen und muss sie sich bei Bedarf vom Service Worker schicken lassen. - Nicht dauerhaft gültig: Die ID gehört zu einem einzelnen Dokument oder Worker. Nach einem Neuladen oder einer Navigation entsteht ein neuer Client mit einer neuen ID. Deshalb sollte man IDs nicht dauerhaft speichern, etwa in IndexedDB. Einträge für geschlossene Clients in einer
Mapsollte man regelmäßig entfernen, sonst wächst der Speicher immer weiter. - Leere ID bei Navigationen: Bei Navigationsanfragen ist
FetchEvent.clientIdein leerer String. Den künftigen Client liefert dannFetchEvent.resultingClientId. clients.get(id)gibtundefinedzurück, wenn der Client nicht mehr existiert. Dieser Fall sollte immer abgefangen werden.- Die Kennung verrät keine Nutzerdaten. Man sollte sich aber nicht auf ein bestimmtes Format verlassen, sondern sie nur als undurchsichtigen String verwenden.