Network Information API
Hinweis: Dieses Feature ist verfügbar in Web Workers.
Die Network Information API bietet Informationen über die Verbindung des Systems in Bezug auf den allgemeinen Verbindungstyp (z.B. 'wifi', 'cellular' usw.). Diese Informationen können verwendet werden, um hochauflösende oder niedrigauflösende Inhalte basierend auf der Verbindung des Nutzers auszuwählen.
Die Schnittstelle besteht aus einem einzelnen NetworkInformation
-Objekt, dessen Instanz durch die Eigenschaft Navigator.connection
oder die Eigenschaft WorkerNavigator.connection
zurückgegeben wird.
Schnittstellen
NetworkInformation
-
Bietet Informationen über die Verbindung, die ein Gerät zur Kommunikation mit dem Netzwerk nutzt, und ermöglicht es Skripten, benachrichtigt zu werden, wenn sich der Verbindungstyp ändert. Das
NetworkInformation
-Interface kann nicht instanziiert werden. Stattdessen wird es über dasNavigator
-Interface oder dasWorkerNavigator
-Interface aufgerufen.
Erweiterungen zu anderen Schnittstellen
-
Gibt ein
NetworkInformation
-Objekt zurück, das Informationen über die Netzwerkverbindung eines Geräts enthält. -
Bietet ein
NetworkInformation
-Objekt, das Informationen über die Netzwerkverbindung eines Geräts enthält.
Beispiele
Verbindungstypänderungen erkennen
Dieses Beispiel beobachtet Änderungen an der Verbindung des Nutzers.
let type = navigator.connection.effectiveType;
function updateConnectionStatus() {
console.log(
`Connection type changed from ${type} to ${navigator.connection.effectiveType}`,
);
type = navigator.connection.effectiveType;
}
navigator.connection.addEventListener("change", updateConnectionStatus);
Große Ressourcen vorladen
Das connection
-Objekt ist nützlich für die Entscheidung, ob Ressourcen vorgeladen werden sollen, die große Mengen an Bandbreite oder Speicher beanspruchen. Dieses Beispiel würde kurz nach dem Laden der Seite aufgerufen, um nach einem Verbindungstyp zu prüfen, bei dem das Vorladen eines Videos möglicherweise nicht erwünscht ist. Wird eine mobile Verbindung festgestellt, wird das preloadVideo
-Flag auf false
gesetzt. Zur Vereinfachung und Klarheit testet dieses Beispiel nur einen Verbindungstyp. Ein Anwendungsfall in der Praxis würde wahrscheinlich eine Switch-Anweisung oder eine andere Methode verwenden, um alle möglichen Werte von NetworkInformation.type
zu prüfen. Unabhängig vom type
-Wert können Sie eine Schätzung der Verbindungsgeschwindigkeit über die Eigenschaft NetworkInformation.effectiveType
erhalten.
let preloadVideo = true;
const connection = navigator.connection;
if (connection) {
if (connection.effectiveType === "slow-2g") {
preloadVideo = false;
}
}
Spezifikationen
Specification |
---|
Network Information API |
Browser-Kompatibilität
api.NetworkInformation
BCD tables only load in the browser
api.Navigator.connection
BCD tables only load in the browser