Signatur
Beschreibung
Die schreibgeschützte Eigenschaft connection des WorkerNavigator-Interfaces ist das Gegenstück zu navigator.connection im Hauptthread. Über self.navigator.connection kommt man in Dedicated Workern, Shared Workern und Service Workern an ein NetworkInformation-Objekt. Es liefert unter anderem effectiveType ("slow-2g", "2g", "3g", "4g"), downlink (geschätzte Bandbreite in Mbit/s), rtt (geschätzte Umlaufzeit in ms) und saveData (ob der Nutzer den Datensparmodus eingeschaltet hat).
Besonders nützlich ist das in Service Workern: Dort lässt sich die Caching- oder Abrufstrategie an die Verbindungsqualität anpassen. Bei langsamer Verbindung oder aktivem Datensparmodus kann man zum Beispiel Bilder in niedriger Auflösung ausliefern, Prefetching auslassen oder Inhalte zuerst aus dem Cache holen.
Das NetworkInformation-Objekt erbt von EventTarget und löst das Ereignis change aus, sobald sich die Verbindungswerte ändern. Ein Worker kann also auf Netzwerkwechsel reagieren, ohne den Hauptthread zu fragen.
Die API ist experimentell und nicht standardisiert. Nutze sie nur zur schrittweisen Verbesserung (Progressive Enhancement) und prüfe immer vorher, ob sie vorhanden ist.
Rückgabewert
NetworkInformation-Objekt mit den aktuellen Verbindungsdaten. In Browsern ohne diese API ist die Eigenschaft nicht vorhanden, der Wert ist dann undefined.Beispiele
Verbindungsdaten in einem Web Worker auslesen
// worker.js
const conn = self.navigator.connection;
if (conn) {
self.postMessage({
typ: conn.effectiveType,
downlink: conn.downlink,
rtt: conn.rtt,
saveData: conn.saveData
});
} else {
self.postMessage({ typ: 'unbekannt' });
}
// main.js
const worker = new Worker('worker.js');
worker.addEventListener('message', (e) => console.log(e.data));Service Worker: Bildqualität an die Verbindung anpassen
// sw.js
const istLangsam = () => {
const conn = self.navigator.connection;
if (!conn) return false;
return conn.saveData || ['slow-2g', '2g'].includes(conn.effectiveType);
};
self.addEventListener('fetch', (event) => {
const url = new URL(event.request.url);
if (url.pathname.startsWith('/img/') && istLangsam()) {
// Auf die kleinere Bildvariante umleiten
const klein = url.pathname.replace('/img/', '/img/low/');
event.respondWith(fetch(klein));
}
});Auf Verbindungswechsel im Worker reagieren
// worker.js
const conn = self.navigator.connection;
const melden = () => {
console.log(`Verbindung: ${conn.effectiveType}, ${conn.downlink} Mbit/s`);
};
if (conn) {
melden();
conn.addEventListener('change', melden);
// Alternativ: conn.onchange = melden;
}// Wichtig · Fallstricke
- Browser-Unterstützung: Nur Chromium-Browser (Chrome, Edge, Opera, Samsung Internet). Firefox und Safari unterstützen die API nicht. Prüfe deshalb immer vorher mit
if ('connection' in self.navigator). - Werte sind Schätzungen:
downlinkundrttwerden aus Datenschutzgründen gerundet (rttauf 25 ms,downlinkauf 25 kbit/s) und nach oben begrenzt.effectiveTypebeschreibt die gemessene Qualität, nicht die echte Technik: Ein langsames WLAN kann als"3g"erscheinen. - Eigenschaft
type: Die Eigenschafttype(z. B."wifi","cellular") gibt es in Desktop-Browsern meist nicht. Sie ist nur auf einigen Mobilplattformen verfügbar. - Fingerprinting: Verbindungsdaten können beim Browser-Fingerprinting helfen. Deshalb schränken Browser die Werte ein, und manche Hersteller lehnen die API ganz ab.
- Die Online-Erkennung ersetzt die API nicht. Dafür gibt es
navigator.onLinesowie die Ereignisseonlineundoffline.