Offline First - czyli jak zadbać o użytkowników ze słabym łączem internetowy (lub jego brakiem)?

Dbając o użytkowników, których łącza internetowe mogą być słabe (to często zdarza się na urządzeniach mobilnych) lub urządzenie może nie mieć żadnego połączenia z siecią Internet, należałoby rozważyć w jaki sposób powinna zachowywać się aplikacji w takiej sytuacji. Najprostszym sposobem, jest napisanie PWA tak, jakby nie miała połączenia z Internetem. Gdy stworzymy aplikację w trybie offline, będzie można z łatwością rozbudować ją o funkcje sieciowe, które dostarczą jej nowych możliwości podczas przełączenia w tryb online. Poniżej zebraliśmy kilka rozwiązań technicznych, które pomogą Wam wdrożyć sprawne PWA w przypadku braku połączenia z Internetem.

Słyszeliście już być może o takich sytuacjach: nadszedł czas, aby uruchomić aplikację. Po kilku dniach PWA otrzymuje same 1-gwiazdkowe recenzje. Powód? Użytkownicy docelowi nie chcą płacić za ciągłe połączenie 4G, a aplikacja z dużą ilością danych w chmurze zawsze wymaga połączenia z Internetem.

Użytkownicy chcą aplikacji, które łączą się z usługą w chmurze lub otrzymują informacje w czasie rzeczywistym. Niezależnie od tego, czy korzystamy z Google Maps aby dotrzeć do wybranego celu, czy WhatsApp do skontaktowania się ze znajomym, aby dowiedzieć się, gdzie są w danej chwili, użytkownicy takich aplikacji muszą być cały czas połączeni.

Mimo tego, że większość użytkowników jest stale podłączenia do sieci, nie oznacza, że ich połączenia są wystarczająco stabilne i szybkie. Reasumując: zakładając, że osoba korzystająca z naszej aplikacji ma stałe, szybkie i stabilne połączenie z Internetem jest jednym z kluczowych błędów rozwojowych dla PWA.

Aplikacje, które łączą się z usługą w chmurze (bez żadnych elementów w trybie offline), sprawiają, że pojawiają się różne błędy połączenia sieciowego, co efekcie sprawia, że otrzymujemy masowo zgłoszenia błędów.

Z perspektywy user experience, użytkownicy zazwyczaj oceniają aplikacje, które nie obsługują stanu offline, jako irytujące.

Korzystanie z aplikacji, które wspierane są przez offline first, generuje wiele korzyści:

• Nie musimy się martwić więcej o niewytłumaczalną utratę danych
• Aplikacja wydaje się działać przez cały czas, nawet bez połączenia z Internetem.
• Użytkownik czuje, że aplikacja działa płynnie.
• Aktualizacje i synchronizacje są wykonywane automatycznie w tle po ponownym nawiązaniu połączenia.

Zdajemy sobie sprawę, że najlepiej wizualizują to przykłady. Jednym z nich może być komunikator Whatsapp oraz wiadomości, które nadane w trybie offline są automatycznie przesyłane podczas ponownego połączenia. Wiele aplikacji udostępnia taką możliwość – możemy także zaplanować wydarzenia za pomocą Kalendarza Google bez połączenia z Internetem, a gdy ponownie będziemy online zaktualizuje się on w chmurze. Oczywiście możemy nadbudować naszą aplikację wersją offline, lecz najskuteczniejszym jest budowanie aplikacji na fundamencie offline-first – nie odwrotnie.

Jakie są proste sposoby przygotowania się do ewentualnego trybu offline? Poniżej omawiamy trzy skuteczne techniki postępowania w przypadku braku dostępu do sieci Internet.

Wyświetlanie właściwego UI dla stanu offline.

Komunikacja jest najistotniejsza, ponieważ powiadomienie na czas użytkownika o wykryciu braku dostępu do Internetu pomoże w zarządzaniu oczekiwaniami wobec aplikacji. Dobrą praktyką jest wyświetlanie na interfejsie odpowiedniego komunikatu (lub w wersji pop-up, jeśli jest to problem krytyczny). Poinformowany użytkownik o przyczynie nieoczekiwanego zachowania aplikacji nie będzie czuł, że jest to błąd po stronie dewelopera, a jego połączenia sieciowego.

Można przetestować to samodzielnie np. w systemie android na Facebooku:
Należy otworzyć aplikację podczas stabilnego połączenia internetowego.
Wyłączyć sieć (Wi-Fi i dane komórkowe – symulując przypadkowy stan offline).
Przeciągnąć aplikację w dół, aby ją odświeżyć.
Ponownie połączyć się ze stabilną siecią.
Kolejno nacisnąć 'Tap to Retry’, czyli odśwież aplikację.
Na większości strona na Facebooku wyświetlany jest komunikat „Can’t connect” lub przycisk „Tap to Retry”. Niektóre strony www mogą utknąć w stanie załadowania, powiadomienie strony głównej jest wystarczającym zabiegiem, aby skutecznie powiadomić użytkowników o sprawdzeniu połączenia internetowego.

Zazwyczaj statyczne informację po pobraniu przechowywane są lokalnie podczas pierwsze obciążenia (tj. grafika, zestaw danych czy konfiguracje). Dzięki temu, nawet jeśli jesteśmy pozbawieni stabilnego połączenia z Internetem, możemy oczekiwać dostępu do tych informacji z poziomu aplikacji.

Ten rodzaj danych zazwyczaj ulega zmianie bardzo rzadko. Informacje te zawsze są pobierane bezpośrednio z serwera podczas pierwszego uruchomienia aplikacji. Przyczyną jest zbyt duży rozmiar, który uniemożliwia dołączenie ich do pakietu instalacyjnego aplikacji.

Google Maps jest doskonałym przykładem wykorzystania statycznego schowka danych. Zakładając, że większość użytkowników korzystających z Google Maps zazwyczaj się przemieszcza, a ich połączenie internetowe może być niestabilne – aplikacja posiada wiele funkcji offline, które pozwalają na nawigację na mapie i rozbudowę do pewnego poziomu szczegółowości nawet w przypadku awarii połączenia lub braku dostępu do Internetu.

Dane mapy są tymczasowo przechowywane w naszym urządzeniu, a co więcej – mamy możliwość wstępnego zapisu części mapy ręcznie (“Zapisz mapę offline”). Pozwala to polegać na systemie GPS, aby móc zlokalizować swoją pozycję na takiej mapie w trybie offline.

Dane dynamiczne powinny być buforowane, a tym samym aktualizowane jak najczęściej – przeciwnie do opisywanego wcześniej buforowania statycznego. Co za tym idzie, aby móc pobrać najnowsze treści, konieczne jest stałe lub częste połączenie z Internetem.

Większość aplikacji z funkcją rejestracji przechowuje tymczasowo informacje użytkowniku w lokalnym schowku danych. Pomaga to uniknięcia wyświetlania pustego ekranu w trybie offline. Zapobiega to również zbyt dużemu obciążeniu za każdym razem, co zapewnia płynniejsze korzystanie z aplikacji.

Taka technika szeroko stosowana jest większości aplikacji mediów społecznościowych oraz w grach. Przykładowo wymienić wśród nich możemy Candy Crush Saga, Instagram, Twitter lub Facebook. Większość aplikacji społecznościowych, pozwala użytkownikom na dostęp do ograniczonych treści w trybie offline, takich jak ostatnie ładowanie newsfeedu.

Po raz kolejny, choć większość pierwszych aplikacji online zawiera funkcje offline na etapie postprodukcji, zawsze istnieją luki. Jeśli programiści mogą ostrożnie obsługiwać lokalny schowek danych w stanie offline przed zaprogramowaniem informacji o ładowaniu online, aplikacje mogą pracować wszędzie i o każdej porze.

Tworząc aplikację zawsze wybierz offline-first.

Internet jest coraz powszechniejszym medium – można go znaleźć prawie wszędzie, co kusi deweloperów do “wpakowania” do aplikacji coraz to nowych ulepszeń. Budując jednak aplikację, warto cofnąć się o krok i sprawić, by podstawy były jak najstabilniejsze i lepsze. Offline-first jest najlepszą praktyką, aby zapewnić płynne i stabilne user experience.
Nie gwarantujemy, że wprowadzenie offline-first da waszej PWA same 5-gwiazdkowe recenzje w sklepach, ale skutecznie niweluje jedną, wspólną przyczynę 1-gwiazdkowej recenzji. Stabilne i gładkie doświadczenie użytkownika z naszą aplikacją, może odróżniać nas od konkurencji i zwiększyć wskaźnik zatrzymań oraz poleceń.