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ń)”.
![Link umożliwiający wczytanie podstawowej wersji HTML Gmaila, gdy użytkownicy mają wolne połączenia.](https://web.dev/static/articles/adaptive-serving-based-on-network-quality/image/a-link-load-basic-html-v-cc25c3a82b2cb.png?authuser=3&hl=pl)
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ą,