Signatur
Beschreibung
Die schreibgeschützte Eigenschaft type der Schnittstelle Client gibt an, welche Art von Ausführungskontext ein Client ist, den ein Service Worker kennt oder steuert. Möglich sind die Zeichenketten "window" (ein Dokument, also ein Tab, Fenster oder iframe), "worker" (ein dedizierter Worker) und "sharedworker" (ein SharedWorker).
Gebraucht wird die Eigenschaft vor allem im Service Worker, wenn man über clients.matchAll() eine Liste von Clients erhält und je nach Typ anders reagieren möchte. Nur Clients vom Typ "window" sind zum Beispiel WindowClient-Instanzen und bieten Methoden wie focus() oder navigate().
Wichtig ist der Unterschied zur Option type von clients.matchAll(): Dort filtert man schon bei der Abfrage (Standardwert "window", zusätzlich ist "all" erlaubt). Client.type nimmt dagegen niemals den Wert "all" an, sondern liefert immer den konkreten Typ eines einzelnen Clients.
Rückgabewert
Beispiele
Alle Clients nach Typ auflisten
// sw.js – im Service Worker
self.addEventListener('message', async (event) => {
const alle = await self.clients.matchAll({ type: 'all', includeUncontrolled: true });
for (const client of alle) {
console.log(client.type, client.url);
}
});Bei Notification-Klick nur Fenster fokussieren
// sw.js
self.addEventListener('notificationclick', (event) => {
event.notification.close();
event.waitUntil((async () => {
const clientListe = await self.clients.matchAll({ type: 'all' });
// Nur WindowClients besitzen focus()
const fenster = clientListe.find((c) => c.type === 'window');
if (fenster) {
return fenster.focus();
}
return self.clients.openWindow('/posteingang');
})());
});Nachrichten gezielt an Worker-Clients senden
// sw.js
const anWorkerSenden = async (daten) => {
const clientListe = await self.clients.matchAll({ type: 'all' });
const worker = clientListe.filter(
(c) => c.type === 'worker' || c.type === 'sharedworker'
);
worker.forEach((w) => w.postMessage({ typ: 'cache-aktualisiert', daten }));
return worker.length;
};
self.addEventListener('activate', (event) => {
event.waitUntil(anWorkerSenden({ version: 2 }).then((n) => {
console.log(`${n} Worker benachrichtigt`);
}));
});// Wichtig · Fallstricke
- Standardfilter beachten:
clients.matchAll()liefert ohne Option nur Clients vom Typ"window". Worker tauchen erst mit{ type: 'all' }oder{ type: 'worker' }auf. - Methoden hängen vom Typ ab:
focus(),navigate(),visibilityStateundfocusedgibt es nur beiWindowClient. Prüfe daher vor dem Aufruf, obtype === 'window'ist. - Nur im Service Worker:
Client-Objekte bekommt man ausschließlich im Service-Worker-Kontext, also überself.clientsoderevent.source. Dafür ist ein sicherer Kontext (HTTPS oder localhost) nötig. - Kompatibilität: Alle aktuellen Browser unterstützen die Eigenschaft. SharedWorker-Clients kommen aber nur in Browsern vor, die SharedWorker unterstützen. Auf manchen mobilen Plattformen fehlt diese Unterstützung oder ist eingeschränkt.