Warto zrozumieć, jak wygląda korzystanie z aplikacji lub witryny w przypadku słabego lub niestabilnego połączenia, i odpowiednio zaprojektować aplikację. Możesz skorzystać z różnych narzędzi.
Test z niską przepustowością i wysokim opóźnieniem
Wzrasta odsetek osób, które korzystają z internetu na urządzeniach mobilnych. Nawet w domu wiele osób rezygnuje z dostępu do internetu szerokopasmowego w domu na rzecz mobilnego dostępu do internetu.
W tym kontekście warto wiedzieć, jak się czuje podczas korzystania z aplikacji lub witryny, gdy połączenie z siecią jest słabe lub zawodne. Dostępne są różne narzędzia, które mogą Ci pomóc zasymulować niskie pasmo i wysoką opóźnienie.
Emuluj ograniczanie wykorzystania sieci
Podczas tworzenia lub aktualizowania witryny musisz zapewnić odpowiednią wydajność w różnych warunkach połączenia. Możesz użyć kilku narzędzi.
Narzędzia przeglądarki
Narzędzie deweloperskie w Chrome umożliwia testowanie witryny przy różnych prędkościach przesyłania/pobierania i czasie dwukierunkowym, korzystając z wstępnie ustawionych wartości lub niestandardowych ustawień w panelu Sieć. Aby poznać podstawy, zapoznaj się z artykułem Pierwsze kroki z narzędziem Analiza wydajności sieci.
Narzędzia systemowe
Network Link Conditioner to panel ustawień dostępny na Macu, jeśli zainstalujesz narzędzia IO sprzętowe do Xcode:
Emulacja urządzenia
Emulator Androida pozwala symulować różne warunki sieci podczas uruchamiania aplikacji (w tym przeglądarek internetowych i hybrydowych aplikacji internetowych) na Androidzie:
W przypadku iPhone'a Network Link Conditioner może służyć do symulowania ograniczenia działania sieci (patrz wyżej).
Testowanie z różnych lokalizacji i sieci
Wydajność połączenia zależy od lokalizacji serwera oraz typu sieci.
WebPagetest to usługa internetowa, która umożliwia przeprowadzenie zestawu testów wydajności Twojej witryny przy użyciu różnych sieci i lokalizacji hosta. Możesz np. sprawdzić swoją witrynę z serwera w Indiach przez sieć 2G lub przez kabel w mieście w Stanach Zjednoczonych.
Wybierz lokalizację, a w ustawieniach zaawansowanych określ typ połączenia. Możesz nawet zautomatyzować testowanie za pomocą skryptów (np. do logowania się w witrynie) lub interfejsów REST API. Pomaga to uwzględnić testowanie łączności w procesach kompilacji lub rejestrowaniu wydajności.
Fiddler obsługuje globalne serwery proxy za pomocą GeoEdge, a jego reguły niestandardowe można wykorzystać do symulowania prędkości modemu:
Testowanie w sieci o ograniczonej przepustowości
Oprogramowanie i sprzętowe serwery proxy umożliwiają emulowanie problematycznych warunków w sieci komórkowej, takich jak ograniczanie przepustowości, opóźnienie pakietów i losowa utrata pakietów. Współdzielony serwer proxy lub uszkodzona sieć mogą umożliwić zespołowi deweloperów wdrożenie testowania sieci w rzeczywistych warunkach w ich procesie pracy.
Rozszerzony kontroler ruchu firmy Facebook (ATC) to zestaw aplikacji w licencjach BSD, które można wykorzystać do kształtowania ruchu i naśladowania niekorzystnych warunków sieciowych:
Facebook wprowadził nawet 2G Tuesdays, aby lepiej zrozumieć, jak użytkownicy korzystają z usługi w sieci 2G. We wtorki pracownicy otrzymują wyskakujące okienko z opcją symulacji połączenia 2G.
Serwer proxy HTTP/HTTPS Charles może służyć do dostosowania przepustowości i opóźnienia. To oprogramowanie komercyjne, ale jest dostępny bezpłatny okres próbny.
Więcej informacji o Charlesie znajdziesz na stronie codewithchris.com.
Obsługa niestabilnego połączenia i „lie-fi”
Co to jest lie-fi?
Termin lie-fi sięga co najmniej 2008 roku (kiedy telefony wyglądały tak tak) i odnosi się do łączności, która w rzeczywistości tak nie jest. Twoja przeglądarka zachowuje się tak, jakby miała połączenie, mimo że z jakiegoś powodu nie ma połączenia.
Nieprawidłowo zinterpretowane połączenie może spowodować problemy, ponieważ przeglądarka (lub JavaScript) będzie nadal próbować pobierać zasoby zamiast zrezygnować i wybrać rozsądne rozwiązanie alternatywne. Lie-Fi jest tak naprawdę gorsze niż bycie offline. Przynajmniej jeśli urządzenie jest offline, JavaScript może podjąć odpowiednie działania.
Lie-Fi może stać się jeszcze większym problemem, bo coraz więcej osób korzysta z urządzeń mobilnych i odchodzi od stałego łącza szerokopasmowego. Najnowsze dane ze spisu powszechnego w Stanach Zjednoczonych wskazują na odejście od korzystania z modemu łącza szerokopasmowego. Na wykresie poniżej widać, jak zmieniło się korzystanie z internetu mobilnego w domu w latach 2013–2015:
Użycie czasu oczekiwania do obsługi zanikających połączeń
W przeszłości do testowania okresowego braku połączenia używano nieoficjalnych metod wykorzystujących XHR, ale usługa workera umożliwia stosowanie bardziej niezawodnych metod ustawiania limitów czasu sieci. Można to osiągnąć za pomocą Workboxa i kilku linii kodu:
workboxSW.router.registerRoute(
'/path/to/image',
workboxSW.strategies.networkFirst({networkTimeoutSeconds: 3}),
);
Więcej informacji o Workbox znajdziesz w prezencie Jeffa Posnicka na konferencji Chrome Dev Summit Workbox: elastyczne biblioteki PWA.
Funkcja limitu czasu jest też opracowywana w przypadku interfejsu Fetch API, a interfejs Streams API powinien pomóc w optymalizacji dostarczania treści i unikaniu monolitycznych żądań. Więcej informacji o rozwiązywaniu problemów z połączeniami o niskiej jakości znajdziesz w artykule Wzmocnienie wczytywania strony.