Network Information API

Hinweis: Diese Funktion ist in Web Workers verfügbar.

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 Schreibgeschützt

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
NetworkInformation
change event
downlink
downlinkMax
Experimental
effectiveType
rtt
saveData
type
Experimental
typechange event
DeprecatedNon-standard
Available in workers

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
Non-standard. Check cross-browser support before using.
Deprecated. Not for use in new websites.
See implementation notes.

api.Navigator.connection

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Node.js
connection

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.

Siehe auch