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 das Navigator-Interface oder das WorkerNavigator-Interface aufgerufen.

Erweiterungen zu anderen Schnittstellen

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

WorkerNavigator.connection Nur lesbar

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.

js
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.

js
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

Siehe auch