Das Laden einer Website kann je nach Netzwerkbedingungen sehr unterschiedlich ablaufen. Mit einem schnellen Netzwerk ist in der Regel alles reibungslos. Wenn Sie jedoch mit einem begrenzten Datentarif und einer schlechten Verbindung unterwegs sind oder mit einem Laptop bei einem langsamen Café-WLAN feststecken, ist das eine andere Situation.
Eine Möglichkeit, dies zu umgehen, besteht darin, die Assets, die Sie Nutzern zur Verfügung stellen, je nach Qualität ihrer Verbindung anzupassen. Dies ist jetzt mit der Network Information API möglich, mit der Webanwendungen auf Informationen über das Netzwerk des Nutzers zugreifen können.
Nutzung
Es gibt viele Möglichkeiten, wie Sie diese Netzwerkinformationen zur Verbesserung der Nutzererfahrung nutzen können:
- Je nach Netzwerk des Nutzers zwischen der Bereitstellung von HD- und Low-Definition-Inhalten wechseln
- Entscheiden Sie, ob Ressourcen vorab geladen werden sollen.
- Sie können Uploads und Downloads aufschieben, wenn Nutzer nur eine langsame Verbindung haben.
- Aktivieren Sie den Offlinemodus, wenn die Netzwerkqualität nicht ausreicht, um die App zu laden und die Funktionen zu nutzen.
- Warnen Sie Nutzer, dass Aktionen (z. B. das Ansehen von Videos) über das Mobilfunknetz Kosten verursachen können.
- Du kannst es für Analysen verwenden, um Daten zur Netzwerkqualität deiner Nutzer zu erfassen.
Viele Anwendungen tun bereits etwas Ähnliches. Beispielsweise wird die Auflösung beim Streaming von YouTube, Netflix und den meisten anderen Video- oder Videoanrufdiensten automatisch angepasst. Beim Laden von Gmail wird Nutzern ein Link zum Laden von einfachem HTML-Code (für langsame Verbindungen) angezeigt.
Funktionsweise
Das Objekt navigator.connection enthält Informationen zur Verbindung eines Clients. Seine Eigenschaften werden in der folgenden Tabelle erläutert.
| Property | Erklärung |
|---|---|
downlink |
Die geschätzte Bandbreite in Megabit pro Sekunde. |
effectiveType |
Der effektive Typ der Verbindung mit den möglichen Werten 'slow-2g', '2g', '3g' oder '4g' (deckt ab 4G ab). Er wird anhand der Kombination aus Umlaufzeit und Downlink-Geschwindigkeit bestimmt. So haben beispielsweise ein schneller Downlink in Kombination mit einer hohen Latenz aufgrund der Latenz einen niedrigeren „effectiveType“. |
onchange |
Event-Handler, der ausgelöst wird, wenn sich Verbindungsinformationen ändern. |
rtt |
Die geschätzte Umlauflatenz der Verbindung in Millisekunden. |
saveData |
Ein boolescher Wert, der angibt, ob der Nutzer einen Modus für reduzierte Datennutzung angefordert hat. |
Wenn Sie das Skript in der Konsole des Browsers ausführen, sieht das so aus:
Die effectiveType-Werte sind auch über Client-Hinweise verfügbar und ermöglichen es Ihnen, den Verbindungstyp des Browsers an Server zu übermitteln.
Mit dem Event-Listener onchange können Sie sich dynamisch an Änderungen der Netzwerkqualität anpassen. Wenn Sie Uploads oder Downloads aufgrund schlechter Netzwerkbedingungen zurückstellen, können Sie sich darauf verlassen, dass der Event-Listener die Übertragung neu startet, wenn er bessere Netzwerkbedingungen erkennt. Sie können damit auch Nutzer benachrichtigen, wenn sich die Netzwerkqualität ändert. Wenn beispielsweise das WLAN-Signal unterbrochen wurde und die Verbindung zu einem Mobilfunknetz unterbrochen wurde, kann dies versehentliche Datenübertragungen (und Gebühren 📊 reduzieren).
Verwenden Sie den Event-Listener onchange wie jeden anderen Event-Listener:
navigator.connection.addEventListener('change', doSomethingOnChange);
Fazit
Die Network Information API bietet potenziell große Vorteile, insbesondere für Nutzer mit langsamen Netzwerken und Anwendungen, die viel Bandbreite benötigen. Das Beste daran ist, dass es als Progressive-Enhancement-Technik verwendet werden kann.