Adaptacyjne wyświetlanie na podstawie jakości sieci

Milica Mihajlija

Wczytywanie witryny może przebiegać różnie w zależności od warunków sieci. Gdy korzystasz z szybkiej sieci, wszystko zwykle działa bez zarzutu, ale gdy jesteś w ruchu, masz ograniczony pakiet danych i niestabilne połączenie lub siedzisz w kawiarni i korzystasz z wolnego Wi-Fi, sytuacja wygląda inaczej.

Jednym ze sposobów na rozwiązanie tego problemu jest dostosowanie komponentów wyświetlanych użytkownikom na podstawie jakości ich połączenia. Jest to teraz możliwe dzięki interfejsowi Network Information API, który umożliwia aplikacjom internetowym dostęp do informacji o sieci użytkownika.

Obsługa przeglądarek

  • Chrome: 61.
  • Edge: 79.
  • Firefox: nieobsługiwane.
  • Safari: nieobsługiwane.

Źródło

Wykorzystanie

Te informacje o sieci można wykorzystać na wiele sposobów, by zwiększyć wygodę użytkowników:

  • Przełączanie się między treściami w wysokiej i niskiej rozdzielczości w zależności od sieci użytkownika.
  • Zdecyduj, czy chcesz wstępnie wczytywać zasoby.
  • Opóźniaj przesyłanie i pobieranie, gdy użytkownicy mają wolne połączenie.
  • Jeśli jakość sieci nie jest wystarczająca, aby załadować aplikację i korzystać z funkcji, włącz tryb offline.
  • Ostrzec użytkowników, że korzystanie z funkcji (np. oglądanie filmów) w sieci komórkowej może wiązać się z kosztami.
  • Używaj go w statystykach, aby zbierać dane o jakości sieci użytkowników.

Wiele aplikacji już to robi. Na przykład YouTube, Netflix i większość innych usług wideo (lub wideokonferencyjnych) automatycznie dostosowuje rozdzielczość podczas przesyłania strumieniowego. Podczas ładowania Gmaila użytkownicy zobaczą link „wczytuj podstawowy HTML (jeśli masz wolne połączenie)”.

link umożliwiający wczytanie podstawowej wersji HTML Gmaila, gdy użytkownicy korzystają z wolnego połączenia;

Jak to działa

Obiekt navigator.connection zawiera informacje o połączeniu klienta. Właściwości tego obiektu zostały opisane w tabeli poniżej.

Właściwość Wyjaśnienie
downlink Szacowana przepustowość w megabitach na sekundę.
effectiveType Efektywny typ połączenia z możliwymi wartościami 'slow-2g', '2g', '3g' lub '4g' (obejmuje 4 g i więcej). Określana na podstawie kombinacji czasu dwukierunkowego i szybkości pobierania. Na przykład szybki downlink w połączeniu z wysokim opóźnieniem będzie miał niższą wartość effectiveType ze względu na opóźnienie.
onchange Obsługa zdarzenia, która jest wywoływana, gdy zmieniają się informacje o połączeniu.
rtt Szacunkowe opóźnienie połączenia w obie strony (w milisekundach).
saveData Wartość logiczna określająca, czy użytkownik poprosił o tryb zmniejszonego zużycia danych.

Oto jak to wygląda, gdy uruchomisz to w konsoli przeglądarki:

Konsole Narzędzi deweloperskich w Chrome z wartościami właściwości obiektu navigator.connection

Wartości effectiveType są też dostępne we wskazówkach dla klienta i umożliwiają przekazanie do serwerów informacji o typie połączenia przeglądarki.

Detektor zdarzeń onchange umożliwia dynamiczne dostosowywanie się do zmian jakości sieci. Jeśli przesyłanie lub pobieranie zostało opóźnione ze względu na słabe warunki sieci, możesz polegać na detektorze zdarzeń, że ponownie uruchomi przesyłanie, gdy wykryje lepsze warunki sieci. Możesz też użyć go, aby powiadamiać użytkowników o zmianie jakości sieci. Jeśli na przykład utraci on sygnał Wi-Fi i zostanie utracony do sieci komórkowej, może to zapobiec przypadkowemu przesyłaniu danych (i naliczeniu opłat 💸).

Używaj detektora zdarzeń onchange tak samo jak każdego innego detektora zdarzeń:

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

Podsumowanie

Potencjalne korzyści interfejsu Network Information API są duże, zwłaszcza w przypadku użytkowników korzystających z powolnych sieci i aplikacji wymagających dużej przepustowości. Co więcej, można go używać jako techniki stopniowego ulepszania.