Ważne jest, aby zrozumieć, jak wygląda korzystanie z aplikacji lub witryny, gdy połączenie jest słabe lub niestabilne, i odpowiednio je zaprojektować. Możesz skorzystać z różnych narzędzi.
Testowanie przy niskiej przepustowości i dużym opóźnieniu
Coraz więcej osób korzysta z internetu na urządzeniach mobilnych. Nawet w domu wiele osób rezygnuje ze stałego łącza szerokopasmowego na rzecz internetu mobilnego.
W tym kontekście ważne jest, aby zrozumieć, jak wygląda korzystanie z aplikacji lub witryny, gdy połączenie jest słabe lub niestabilne. Różne narzędzia programowe mogą pomóc w emulowaniu i symulowaniu niskiej przepustowości i wysokiego opóźnienia.
Emulowanie ograniczania wykorzystania sieci
Podczas tworzenia lub aktualizowania witryny musisz zapewnić odpowiednią wydajność w różnych warunkach połączenia. Możesz skorzystać z kilku narzędzi.
Narzędzia przeglądarki
Narzędzia deweloperskie w Chrome umożliwiają testowanie witryny przy różnych szybkościach przesyłania i pobierania oraz czasach błądzenia przy użyciu gotowych lub niestandardowych ustawień z panelu Sieć. Aby poznać podstawy, przeczytaj artykuł Pierwsze kroki z analizą wydajności sieci.
Narzędzia systemowe
Network Link Conditioner to panel preferencji dostępny na Macu po zainstalowaniu Hardware IO Tools dla Xcode:
Emulacja urządzenia
Android Emulator umożliwia symulowanie różnych warunków sieciowych podczas uruchamiania aplikacji (w tym przeglądarek i hybrydowych aplikacji internetowych) na Androidzie:
W przypadku iPhone'a do symulowania gorszych warunków sieciowych można użyć narzędzia Network Link Conditioner (patrz wyżej).
Testowanie z różnych lokalizacji i sieci
Wydajność połączenia zależy od lokalizacji serwera i typu sieci.
WebPagetest to usługa online, która umożliwia przeprowadzenie zestawu testów wydajności witryny przy użyciu różnych sieci i lokalizacji hostów. Możesz na przykład przetestować swoją witrynę na serwerze w Indiach w sieci 2G lub przez połączenie kablowe z miasta w Stanach Zjednoczonych.
Wybierz lokalizację, a w ustawieniach zaawansowanych – typ połączenia. Możesz nawet zautomatyzować testowanie za pomocą skryptów (np. do logowania się w witrynie) lub interfejsów API REST. Ułatwia to uwzględnianie testów połączenia w procesach kompilacji lub logowaniu wydajności.
Fiddler obsługuje globalne proxy przez GeoEdge, a jego niestandardowe reguły mogą służyć do symulowania szybkości modemu:
Testowanie w sieci o niskiej jakości
Serwery proxy oprogramowania i sprzętu umożliwiają emulowanie problematycznych warunków sieci komórkowej, takich jak ograniczanie przepustowości, opóźnienie pakietów i losowa utrata pakietów. Udostępniony serwer proxy lub sieć o obniżonej wydajności mogą umożliwić zespołowi deweloperów uwzględnienie w procesie testowania sieci w rzeczywistych warunkach.
Augmented Traffic Control (ATC) Facebooka to zestaw aplikacji na licencji BSD, których można używać do kształtowania ruchu i emulowania niekorzystnych warunków sieciowych:
Facebook wprowadził nawet wtorki 2G, aby zrozumieć, jak użytkownicy sieci 2G korzystają z jego usług. We wtorki pracownicy widzą wyskakujące okienko, które umożliwia im symulowanie połączenia 2G.
Do dostosowania przepustowości i czasu oczekiwania możesz użyć serwera proxy HTTP/HTTPS Charles. Charles to oprogramowanie komercyjne, ale dostępna jest jego bezpłatna wersja próbna.
Więcej informacji o aplikacji Charles znajdziesz na stronie codewithchris.com.
Obsługa niestabilnego połączenia i „lie-fi”
Czym jest „lie-fi”?
Termin lie-fi pochodzi co najmniej z 2008 roku (gdy telefony wyglądały tak) i odnosi się do połączenia, które nie jest tym, czym się wydaje. Przeglądarka zachowuje się tak, jakby miała połączenie, mimo że z jakiegoś powodu go nie ma.
Błędna interpretacja połączenia może prowadzić do pogorszenia wrażeń użytkownika, ponieważ przeglądarka (lub JavaScript) będzie próbowała pobrać zasoby, zamiast zrezygnować i wybrać odpowiednią opcję zastępczą. Lie-fi może być gorsze niż brak połączenia. Jeśli urządzenie jest offline, JavaScript może podjąć odpowiednie działania.
Problem z „lie-fi” będzie się prawdopodobnie nasilał, ponieważ coraz więcej osób przechodzi na urządzenia mobilne i rezygnuje ze stałego połączenia szerokopasmowego. Najnowsze dane ze spisu powszechnego w USA wskazują na odchodzenie od stałego łącza szerokopasmowego. Poniższy wykres przedstawia korzystanie z internetu mobilnego w domu w 2015 roku w porównaniu z 2013 rokiem:
Używanie limitów czasu do obsługi połączeń przerywanych
W przeszłości do testowania połączeń przerywanych używano metod hakerskich z wykorzystaniem XHR, ale skrypt service worker umożliwia stosowanie bardziej niezawodnych metod ustawiania limitów czasu sieci. Można to osiągnąć za pomocą Workbox, używając tylko kilku wierszy kodu:
workboxSW.router.registerRoute(
'/path/to/image',
workboxSW.strategies.networkFirst({networkTimeoutSeconds: 3}),
);
Więcej informacji o Workbox znajdziesz w wystąpieniu Jeffa Posnicka na Chrome Dev Summit: Workbox: Flexible PWA Libraries.
Funkcja limitu czasu jest też rozwijana w przypadku interfejsu Fetch API, a interfejs Streams API powinien pomóc w optymalizacji dostarczania treści i unikaniu monolitycznych żądań. Jake Archibald podaje więcej szczegółów na temat radzenia sobie z problemami z siecią w artykule Supercharging page load (Przyspieszanie wczytywania strony).