Network Information API

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.

Navigator.connection Schreibgeschützt

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

WorkerNavigator.connection Schreibgeschützt

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

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);

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;
  }
}

• Online- und Offline-Ereignisse