Wczytywanie strony może wyglądać zupełnie inaczej w zależności od warunków sieciowych. Gdy korzystasz z szybkiej sieci, zwykle wszystko działa płynnie, ale gdy jesteś w drodze, masz ograniczony abonament na transmisję danych i masz problem z połączeniem internetowym, czy masz laptopa z wolną siecią Wi-Fi w kawiarni, to zupełnie inna historia.
Aby sobie z tym radzić, możesz dostosowywać zasoby, które wyświetlasz użytkownikom, w zależności od 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.
Wykorzystanie
Informacje te możesz wykorzystać na wiele sposobów, aby zwiększyć wygodę użytkowników:
- Przełączaj między wyświetlaniem treści w wysokiej i niskiej rozdzielczości w zależności od sieci użytkownika.
- Zdecyduj, czy chcesz wstępnie wczytać zasoby.
- Odrocz przesyłanie i pobieranie, gdy użytkownicy mają wolne połączenie.
- Włącz tryb offline, jeśli jakość sieci nie jest wystarczająca do załadowania aplikacji i korzystania z funkcji.
- Ostrzegaj użytkowników, że zrobienie czegoś (np. obejrzenie filmu) przez sieć komórkową może wiązać się z kosztami.
- Używaj jej w statystykach, aby zbierać dane o jakości sieci użytkowników.
Wiele aplikacji robi już podobne działania. Na przykład YouTube, Netflix i większość innych usług wideo (lub rozmów wideo) automatycznie dostosowuje rozdzielczość podczas strumieniowego przesyłania danych. Podczas ładowania Gmaila użytkownik udostępnia link „załaduj podstawowy kod HTML (na potrzeby wolniejszych połączeń)”.
Jak to działa
Obiekt navigator.connection zawiera informacje o połączeniu klienta. Jej właściwości zostały objaśnione w poniższej tabeli.
| 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' (dotyczy 4g i wyższych). Określana na podstawie połączenia czasu przesyłania w obie strony i szybkości pobierania. Na przykład szybkie łącze pobierania w połączeniu z długim czasem oczekiwania będzie mieć mniejszą wartość efektywnego typu ze względu na czas oczekiwania. |
onchange |
Moduł obsługi zdarzeń uruchamiany, gdy zmienią się informacje o połączeniu. |
rtt |
Szacowany czas oczekiwania na połączenie w obie strony (w milisekundach). |
saveData |
Wartość logiczna określająca, czy użytkownik zażądał ograniczenia użycia danych. |
Tak to wygląda po uruchomieniu w konsoli przeglądarki:
Wartości effectiveType są też dostępne w Wskazówkach dla klienta i umożliwiają przekazywanie informacji o typie połączenia przeglądarki z serwerami.
Detektor zdarzeń onchange umożliwia dynamiczne dostosowywanie się do zmian w jakości sieci. Jeśli przesyłanie lub pobieranie zostało opóźnione z powodu słabych warunków sieciowych, możesz skonfigurować detektor zdarzeń, aby ponownie uruchomić przesyłanie, gdy wykryje lepsze warunki sieci. Możesz go też używać do powiadamiania użytkowników o zmianach jakości sieci. Jeśli na przykład użytkownik utraci sygnał Wi-Fi i zostanie utracony do sieci komórkowej, może to uchronić go przed przypadkowym transferem danych (i opłatami 💸).
Detektor zdarzeń onchange możesz używać tak samo jak dowolnego innego detektora zdarzeń:
navigator.connection.addEventListener('change', doSomethingOnChange);
Podsumowanie
Potencjalne korzyści z używania interfejsu Network Information API są ogromne, zwłaszcza w przypadku użytkowników korzystających z wolniejszych sieci i aplikacji wymagających dużej przepustowości. A najlepsze, że można ją stosować jako technikę progresywną,