Adaptive Bereitstellung basierend auf der Netzwerkqualität

Milica Mihajlija

Das Laden einer Website kann je nach Netzwerkbedingungen sehr unterschiedlich sein. Wenn Sie mit einem schnellen Netzwerk verbunden sind, funktioniert alles reibungslos. Wenn Sie jedoch unterwegs sind, nur ein begrenztes Datenvolumen haben und eine mäßige Verbindung nutzen oder mit einem Laptop das langsame WLAN eines Cafés nutzen, sieht das ganz anders aus.

Eine Möglichkeit, dies zu vermeiden, besteht darin, die Assets, die Sie Nutzern bereitstellen, auf Grundlage der Qualität ihrer Verbindung anzupassen. Dies ist jetzt mit der Network Information API möglich, über die Webanwendungen auf Informationen zum Nutzernetzwerk zugreifen können.

Unterstützte Browser

  • Chrome: 61.
  • Edge: 79.
  • Firefox: Nicht unterstützt.
  • Safari: wird nicht unterstützt.

Quelle

Nutzung

Es gibt viele Möglichkeiten, wie Sie diese Netzwerkinformationen nutzen können, um die Nutzerfreundlichkeit zu verbessern:

  • Je nach Netzwerk des Nutzers zwischen der Bereitstellung von Inhalten in hoher und niedriger Auflösung wechseln.
  • Legen Sie fest, ob Ressourcen vorab geladen werden sollen.
  • Uploads und Downloads bei einer langsamen Internetverbindung verschieben
  • Aktivieren Sie den Offlinemodus, wenn die Netzwerkqualität nicht gut genug ist, um die App zu laden und die Funktionen zu verwenden.
  • Nutzer werden gewarnt, dass die Nutzung bestimmter Funktionen (z. B. das Ansehen von Videos) über das Mobilfunknetz kostenpflichtig sein kann.
  • Sie können sie in Ihren Analysen verwenden, um Daten zur Netzwerkqualität Ihrer Nutzer zu erheben.

Viele Anwendungen tun etwas Ähnliches. Beispielsweise passen YouTube, Netflix und die meisten anderen Videodienste (oder Videoanrufe) die Auflösung beim Streaming automatisch an. Während Gmail geladen wird, wird Nutzern der Link „Einfache HTML-Ansicht laden (für langsame Verbindungen)“ angezeigt.

Ein Link zum Laden der einfachen HTML-Version von Gmail bei langsamen Verbindungen

Funktionsweise

Das navigator.connection-Objekt enthält Informationen zur Verbindung eines Clients. Die Eigenschaften werden in der nachfolgenden Tabelle erläutert.

Attribut Erklärung
downlink Die geschätzte Bandbreite in Megabit pro Sekunde.
effectiveType Der effektive Verbindungstyp mit den möglichen Werten 'slow-2g', '2g', '3g' oder '4g' (umfasst 4G und höher). Wird anhand der Kombination aus Rücklaufzeit und Downlinkgeschwindigkeit ermittelt. Ein schneller Downlink in Kombination mit hoher Latenz hat beispielsweise aufgrund der Latenz einen niedrigeren effectiveType.
onchange Ein Ereignis-Handler, der ausgelöst wird, wenn sich Verbindungsinformationen ändern.
rtt Die geschätzte Umlaufzeit der Verbindung in Millisekunden.
saveData Ein boolescher Wert, der angibt, ob der Nutzer einen Modus mit reduzierter Datennutzung angefordert hat.

So sieht das aus, wenn Sie es in der Konsole des Browsers ausführen:

Chrome-Entwicklertools-Konsole mit den Werten der Eigenschaften des Objekts „navigator.connection“

Die effectiveType-Werte sind auch über Client-Hinweise verfügbar. Damit können Sie den Verbindungstyp des Browsers an die Server weitergeben.

Mit dem onchange-Ereignis-Listener kannst du dich dynamisch an Änderungen der Netzwerkqualität anpassen. Wenn Sie Uploads oder Downloads aufgrund schlechter Netzwerkbedingungen verzögert haben, können Sie sich darauf verlassen, dass der Event-Listener die Übertragung neu startet, wenn bessere Netzwerkbedingungen erkannt werden. Außerdem können Sie damit Nutzer benachrichtigen, wenn sich die Netzwerkqualität ändert. Wenn sie beispielsweise ihr WLAN-Signal verloren haben und auf ein Mobilfunknetz übertragen wurden, können versehentliche Datenübertragungen (und Gebühren) verhindert werden. 💸

Verwenden Sie den onchange-Ereignis-Listener wie jeden anderen Ereignis-Listener:

navigator.connection.addEventListener('change', doSomethingOnChange);

Fazit

Die potenziellen Vorteile der Network Information API sind groß, insbesondere für Nutzer in langsamen Netzwerken und Anwendungen, die viel Bandbreite erfordern. Das Beste daran ist, dass es als Progressive-Enhancement-Technik verwendet werden kann.