Signatur
Beschreibung
Die Eigenschaft type des NetworkInformation-Interfaces gibt an, über welche Art von Verbindung das Gerät mit dem Netzwerk kommuniziert. Zugreifen kann man über navigator.connection.type. Das geht auch in Web Workern über self.navigator.connection.
Mögliche Werte sind:
"bluetooth","cellular","ethernet","wifi","wimax": die jeweilige Verbindungsart"mixed": mehrere Verbindungsarten gleichzeitig"none": keine Verbindung"other": ein bekannter Typ, der aber keinem der anderen Werte entspricht"unknown": Der Browser kennt den Typ nicht.
Die Eigenschaft ist nützlich, wenn eine Anwendung ihr Verhalten an die Verbindung anpassen soll. Typische Fälle: große Downloads oder automatische Video-Wiedergabe nur im WLAN, eine Warnung vor Mobilfunk-Kosten oder das Verschieben von Hintergrund-Synchronisierungen. Ändert sich der Typ, löst das NetworkInformation-Objekt das Ereignis change aus.
Wichtig: type beschreibt nur die Art der Verbindung, nicht ihre Qualität. Auch ein WLAN kann langsam oder hinter einem mobilen Hotspot kostenpflichtig sein. Wenn es um die Qualität geht, sind effectiveType, downlink, rtt und saveData meist aussagekräftiger.
Rückgabewert
undefined.Beispiele
Verbindungstyp mit Feature-Erkennung auslesen
const getConnectionType = () => {
const connection = navigator.connection;
// Nicht jeder Browser kennt navigator.connection oder type
if (!connection || typeof connection.type === 'undefined') {
return 'nicht verfügbar';
}
return connection.type;
};
console.log(`Verbindungstyp: ${getConnectionType()}`);Auf Wechsel des Verbindungstyps reagieren
const connection = navigator.connection;
const handleChange = () => {
console.log(`Neuer Verbindungstyp: ${connection.type}`);
if (connection.type === 'none') {
document.body.classList.add('offline');
} else {
document.body.classList.remove('offline');
}
};
if (connection && 'type' in connection) {
connection.addEventListener('change', handleChange);
// Später, z. B. beim Abbau einer Komponente:
// connection.removeEventListener('change', handleChange);
}Große Downloads nur im WLAN oder per Ethernet automatisch starten
const isUnmeteredConnection = () => {
const type = navigator.connection?.type;
// Unbekannt oder nicht unterstützt: vorsichtshalber als kostenpflichtig werten
return type === 'wifi' || type === 'ethernet';
};
const preloadVideo = async (url) => {
if (!isUnmeteredConnection()) {
console.log('Mobilfunk oder unbekannt: Vorabladen übersprungen.');
return null;
}
const response = await fetch(url);
const blob = await response.blob();
console.log(`Vorab geladen: ${(blob.size / 1024 / 1024).toFixed(1)} MB`);
return URL.createObjectURL(blob);
};
preloadVideo('/media/intro-1080p.mp4');// Wichtig · Fallstricke
Browser-Unterstützung: type ist experimentell und praktisch nur in Chromium-Browsern auf Android verfügbar. Desktop-Chrome und Edge haben zwar navigator.connection, aber ohne type. Firefox und Safari kennen die Network Information API gar nicht. Prüfen Sie deshalb immer mit Feature-Erkennung, z. B. navigator.connection?.type, und sehen Sie ein sinnvolles Standardverhalten vor.
Kein Maß für Geschwindigkeit oder Kosten: "wifi" kann ein mobiler Hotspot mit begrenztem Datenvolumen sein, "cellular" kann schnelles 5G sein. Für Entscheidungen zur Qualität kombinieren Sie type mit effectiveType, saveData oder downlink.
Werte wie "unknown" und "other": Diese Werte kommen tatsächlich vor. Behandeln Sie sie im Zweifel wie eine kostenpflichtige Verbindung.
Datenschutz: Der Verbindungstyp trägt zum Browser-Fingerprinting bei. Das ist ein Grund, warum Mozilla und Apple die API nicht umsetzen. Verlassen Sie sich nicht darauf, dass sie künftig breiter verfügbar wird.
Offline-Erkennung: Um festzustellen, ob überhaupt eine Verbindung besteht, sind navigator.onLine und die Ereignisse online/offline deutlich breiter unterstützt als die Prüfung auf type === "none".