Signatur
Beschreibung
FetchEvent.clientId ist eine schreibgeschützte Zeichenkette. Sie enthält die ID des Client-Objekts, das die abgefangene Anfrage gestartet hat. Ein Client ist ein Dokument (Fenster, Tab, iframe) oder ein Worker, den der Service Worker steuert. Mit der ID holst du über clients.get(event.clientId) das passende Client-Objekt und kannst dann z. B. per postMessage() gezielt mit genau diesem Tab kommunizieren.
Das ist praktisch, wenn der Service Worker einem Tab etwas mitteilen soll, das zu dessen Anfrage gehört. Beispiele: ein Hinweis „Antwort kam aus dem Cache“, Fortschrittsmeldungen oder Statistiken pro Tab. Du kannst die ID auch als Schlüssel nutzen, um Zustände pro Client zu speichern.
Bei Navigationsanfragen (event.request.mode === 'navigate') ist clientId ein leerer String. Das neue Dokument existiert zu diesem Zeitpunkt noch nicht. Für solche Fälle gibt es FetchEvent.resultingClientId, die ID des Clients, der durch die Navigation entsteht. Außerdem gibt es FetchEvent.replacesClientId, die ID des Clients, der ersetzt wird.
Rückgabewert
''), z. B. bei Navigationsanfragen.Beispiele
Client-ID jeder Anfrage protokollieren
// sw.js
self.addEventListener('fetch', (event) => {
const { clientId, request } = event;
console.log(`Anfrage ${request.url} von Client: ${clientId || '(keiner, Navigation)'}`);
});Dem anfragenden Tab mitteilen, dass die Antwort aus dem Cache kam
// sw.js
self.addEventListener('fetch', (event) => {
event.respondWith((async () => {
const cached = await caches.match(event.request);
if (cached) {
// Nachricht asynchron senden, Event solange am Leben halten
event.waitUntil((async () => {
if (!event.clientId) return;
const client = await clients.get(event.clientId);
client?.postMessage({ type: 'CACHE_HIT', url: event.request.url });
})());
return cached;
}
return fetch(event.request);
})());
});
// main.js (Seite)
navigator.serviceWorker.addEventListener('message', (e) => {
if (e.data.type === 'CACHE_HIT') console.log('Aus Cache:', e.data.url);
});Navigationen über resultingClientId abfangen
// sw.js
self.addEventListener('fetch', (event) => {
const id = event.clientId || event.resultingClientId;
if (event.request.mode === 'navigate') {
console.log('clientId:', JSON.stringify(event.clientId));
console.log('resultingClientId:', event.resultingClientId);
}
// id kann jetzt z. B. als Schlüssel für Statistiken dienen
});// Wichtig · Fallstricke
- Leerer String bei Navigationen: Bei Seitennavigationen ist
clientIdimmer''. Nutze dannresultingClientId. Unterstützung fürresultingClientIdgibt es in Chrome 72+, Firefox und Safari 16+. clients.get()kannundefinedliefern: Das passiert, wenn der Tab inzwischen geschlossen wurde oder der Client (noch) nicht existiert. Prüfe das Ergebnis, bevor dupostMessage()aufrufst.- Asynchrone Arbeit absichern:
event.respondWith()musst du synchron im Handler aufrufen. Zusätzliche asynchrone Aufgaben, etwa Nachrichten an den Client, gehören inevent.waitUntil(), sonst kann der Browser den Service Worker vorzeitig beenden. - Die ID ist ein nicht vorhersagbarer, browserinterner String (meist eine UUID). Sie ist kein stabiles Merkmal über Seitenneuladungen hinweg: Jedes Neuladen erzeugt einen neuen Client mit neuer ID.
- Die Eigenschaft gibt es nur im Service-Worker-Kontext und nur über HTTPS oder
localhost. Die veraltete EigenschaftFetchEvent.clientwurde entfernt und sollte nicht mehr verwendet werden.