DieNetwork Information API bietet Informationen über die Verbindung des Systems in Bezug auf den allgemeinen Verbindungstyp (z.B. 'wifi', 'cellular', etc.). Dies kann verwendet werden, um basierend auf der Verbindung des Benutzers hochauflösende oder niedrigauflösende Inhalte auszuwählen.

Die Schnittstelle besteht aus einem einzigenNetworkInformation-Objekt, welches durch dieNavigator.connection-Eigenschaft oder dieWorkerNavigator.connection-Eigenschaft zurückgegeben wird.

Schnittstellen

NetworkInformation

Bietet Informationen über die Verbindung, die ein Gerät zur Kommunikation mit dem Netzwerk verwendet, und ermöglicht es Skripten, benachrichtigt zu werden, wenn sich der Verbindungstyp ändert. DieNetworkInformation-Schnittstelle kann nicht instanziiert werden. Sie wird stattdessen über dieNavigator-Schnittstelle oder dieWorkerNavigator-Schnittstelle aufgerufen.

Erweiterungen zu anderen Schnittstellen

Navigator.connectionSchreibgeschützt

Gibt einNetworkInformation-Objekt zurück, das Informationen über die Netzwerkverbindung eines Geräts enthält.

WorkerNavigator.connectionSchreibgeschützt

Bietet einNetworkInformation-Objekt, das Informationen über die Netzwerkverbindung eines Geräts enthält.

Beispiele

Verbindungänderungen erkennen

Dieses Beispiel überwacht Änderungen an der Verbindung des Benutzers.

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 Verbindungsobjekt ist nützlich, um zu entscheiden, ob Ressourcen vorab geladen werden sollen, die viel Bandbreite oder Speicher benötigen. Dieses Beispiel würde kurz nach dem Laden der Seite aufgerufen werden, um eine Verbindung zu überprüfen, bei der das Vorladen eines Videos möglicherweise nicht wünschenswert ist. Wenn eine Mobilfunkverbindung erkannt wird, wird diepreloadVideo-Flag auffalse gesetzt. Zur Vereinfachung und Klarheit testet dieses Beispiel nur für einen Verbindungstyp. Ein realer Anwendungsfall würde wahrscheinlich eine Switch-Anweisung oder eine andere Methode verwenden, um alle möglichen Werte vonNetworkInformation.type zu überprüfen. Unabhängig vomtype-Wert können Sie eine Schätzung der Verbindungsgeschwindigkeit über dieNetworkInformation.effectiveType-Eigenschaft erhalten.

let preloadVideo = true;const connection = navigator.connection;if (connection) {  if (connection.effectiveType === "slow-2g") {    preloadVideo = false;  }}

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Online- und Offline-Ereignisse