Adaptive Bereitstellung basierend auf der Netzwerkqualität

Je nach Netzwerk kann das Laden einer Website sehr unterschiedlich sein. . Bei einem schnellen Netzwerk läuft normalerweise alles reibungslos, wenn Sie unterwegs sind, Ihr Datentarif ist und die Verbindung schlecht ist mit einem Laptop mit langsamem WLAN in einem Café, ist das ganz anders.

Das können Sie vermeiden, indem Sie die Assets anpassen, die Sie den Nutzern je nach Verbindungsqualität. Dies ist jetzt möglich mit der Network Information API mit der Webanwendungen auf Informationen über das Netzwerk des Nutzers zugreifen können.

Unterstützte Browser

  • Chrome: 61. <ph type="x-smartling-placeholder">
  • Edge: 79. <ph type="x-smartling-placeholder">
  • Firefox: nicht unterstützt <ph type="x-smartling-placeholder">
  • Safari: wird nicht unterstützt. <ph type="x-smartling-placeholder">

Quelle

Nutzung

Sie können diese Netzwerkinformationen auf viele Arten nutzen, Erfahrung:

  • Sie können basierend auf dem das Netzwerk des Nutzers.
  • Entscheiden Sie, ob Ressourcen vorab geladen werden sollen.
  • Verschieben Sie Uploads und Downloads zurück, wenn Nutzer eine langsame Verbindung haben.
  • Offlinemodus aktivieren, wenn die Netzwerkqualität zum Laden der App nicht ausreicht und die Funktionen nutzen.
  • Nutzer darauf hinweisen, dass etwas (z. B. das Ansehen eines Videos) über das Mobilfunknetz Kosten verursachen kann Geld verdienen.
  • Verwenden Sie ihn in Ihren Analysen, um Daten zu den Netzwerkqualität.

Viele Anwendungen tun etwas Ähnliches. Zum Beispiel YouTube, Netflix und die meisten anderen Video- oder Videoanrufe die Auflösung während des Streamings anzupassen. Beim Laden von Gmail sehen Nutzer Link zu "Einfaches HTML laden (für langsame Verbindungen)".

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

Funktionsweise

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

Attribut Erklärung
downlink Die Bandbreitenschätzung in Megabit pro Sekunde.
effectiveType Der effektive Typ der Verbindung mit den möglichen Werten 'slow-2g', '2g', '3g' oder '4g' (umfasst 4G und höher). Wird anhand der Kombination aus Umlaufzeit und Downlink-Geschwindigkeit 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 Umlauflatenz der Verbindung in Millisekunden.
saveData Ein boolescher Wert, der definiert, ob der Nutzer einen Modus mit reduzierter Datennutzung angefordert hat.

Wenn Sie es in der Browserkonsole ausführen, sieht das so aus:

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

Die effectiveType-Werte sind auch über Client-Hints und ermöglichen es Ihnen, den Verbindungstyp des Browsers an Server zu übermitteln.

Mit dem Event-Listener onchange können Sie dynamische Anpassungen an Änderungen in Netzwerkqualität. Wenn Sie Uploads oder Downloads aufgrund einer schlechten Netzwerkverbindung verzögert haben Bedingungen erfüllt, können Sie sich darauf verlassen, dass der Event-Listener die Übertragung neu startet, erkennt bessere Netzwerkbedingungen. Außerdem können Sie damit Nutzer benachrichtigen, Änderungen der Netzwerkqualität. Wenn beispielsweise das WLAN-Signal unterbrochen wurde zu einem Mobilfunknetz verleitet, können versehentliche Datenübertragungen verhindert werden. 💸)

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

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

Fazit

Die potenziellen Vorteile der Network Information API sind groß, insbesondere bei in langsamen Netzwerken und in Anwendungen, die viel Bandbreite benötigen. Beste kann es als Progressive-Enhancement-Technik verwendet werden.