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 nun möglich mit der Network Information API mit der Webanwendungen auf Informationen über das Netzwerk des Nutzers zugreifen können.
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)".
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:
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 Verbesserung eingesetzt werden.