Progressive Web Apps – co to, dlaczego, jak?

W tym artykule wyjaśnimy czym jest i jak działa Progressive Web App, jakie ma możliwości i ograniczenia oraz w jakich zastosowaniach się sprawdzi, a w jakich niekoniecznie.

Czym właściwie jest Progressive Web App?

Zacznijmy od definicji – Progressive Web App (PWA) to aplikacja webowa zaprojektowana z myślą o zapewnieniu jak najlepszego doświadczenia użytkownika na urządzeniach mobilnych – zbliżonego do aplikacji natywnych. Do głównych cech aplikacji progresywnych należą:

• niezawodność – mają działać niezależnie od jakości połączenia z Internetem. Nawet w przypadku problemów z dostępem do sieci, aplikacja nie pokaże ekranu braku połączenia np. znanego z Chrome dinozaura. Jest to możliwe dzięki tzw. Service Workers, które pełnią rolę pośredników pomiędzy aplikacją progresywną, Internetem a pamięcią podręczną (w uproszczeniu). Dzięki nim, pewne części aplikacji zapisywane są w pamięci podręcznej urządzenia, tak aby uruchamiały się szybciej i były dostępne, w przypadku braku połączenia sieciowego.
• szybkość – aplikacje zoptymalizowane są w taki sposób, aby ograniczyć do minimum ilość pobieranych danych, tak aby strona ładowała się jak najszybciej, nawet przy połączeniu niskiej jakości. Według badań przeprowadzonych przez Google, 53% użytkowników rezygnuje z przeglądania strony, jeśli ładuje się ona dłużej niż 3 sekundy.
• angażowanie – PWA mogą być instalowane na ekranie urządzenia mobilnego bez konieczności pobierania ich ze sklepu z aplikacjami. Na urządzeniach z Androidem po wejściu na stronę w standardzie PWA wyświetla się belka z możliwością dodania aplikacji do ekranu telefonu. Ze względu na bardzo mały rozmiar, cały proces trwa kilka sekund. Progressive Web Apps, tak jak aplikacje natywne, wyświetlają się na całym ekranie urządzenia mobilnego (bez paska adresu w przeglądarce) i wysyłają powiadomienia push. Wymienione funkcje realizowane są dzięki tzw. Web App Manifest, który określa nazwę aplikacji, kolory motywów oraz ikonę na pulpicie. Za powiadomienia push odpowiedzialne są natomiast usługi Service Workers i Web Push Notifications.

Google opracował listę wymagań jakie musi spełnić strona, aby można było ją uznać za PWA:

• dane są serwowane za pomocą bezpiecznego protokołu HTTPS,
• jest responsywna – dostosowuje się do rozdzielczości urządzenia, na którym jest wyświetlana,
• wyświetla w trybie offline przynajmniej stronę główną,
• ma możliwość dodania ikony do ekranu głównego urządzenia mobilnego,
• staje się interaktywna w mniej niż 10 sekund przy połączeniu 3G,
• jest zoptymalizowana pod kątem działania na różnych przeglądarkach (Chrome, Edge, Firefox, Safari),
• nie sprawia wrażenia, że “nic się nie dzieje” w trakcie oczekiwania na załadowanie strony – tak jak w aplikacjach natywnych powinna wyświetlać ikonę ładowania kolejnego ekranu,
• posiada oddzielny adres URL dla każdej z podstron (w celu łatwego udostępniania treści).

Lista, w oryginale, zawiera więcej dobrych praktyk, które mają zapewnić użytkownikowi jak najlepsze doświadczenie (zakłada jednak, że nie wszystkie przeglądarki internetowe obsługują je na tym samym poziomie). W tym miejscu warto wspomnieć o genezie słowa “progressive”. Odnosi się ono do idei PWA, którą jest zapewnienie podstawowych korzyści na wszystkich systemach i przeglądarkach mobilnych, natomiast jeżeli przeglądarka obsługuje więcej funkcji oferowanych przez Progressive Web App doświadczenie jest stopniowo (progresywnie) rozszerzane.

Dziękujemy 90 000 fanom na LinkedInie. Jesteś tam z nami?

Obserwuj

W jakich zastosowaniach się sprawdzą

Progressive Web Apps nie wymagają pisania oddzielnego kodu na poszczególne platformy mobilne. Ich aktualizacja również jest bardzo łatwa, ponieważ wydawcy nie muszą przechodzić procesu weryfikacji na każdej z platform, a użytkownik nie musi pobierać aktualizacji ze sklepu. Cały proces odbywa się wyłącznie po stronie serwerowej i nie ma powiązania ze sklepami App Store czy Google Play, jak ma to miejsce w przypadku aplikacji natywnych. Użytkownik przy kolejnym uruchomieniu aplikacji otrzyma jej najnowszą wersję.

#PolecajkiNM cz. 4: narzędzia pracy jutra, człowiek vs. AI, Mapa Trendów 2024, ranking blogów e-commerce 2024

Progressive Web Apps posiadają również pewne ograniczenia w dostępie do zaawansowanych funkcji telefonu i danych (o ograniczeniach szerzej napisaliśmy w dalszej części artykułu). Dlatego PWA najlepiej sprawdzą się w przypadku serwisów wymagających częstych zmian, używanych okazjonalnie lub takich, które nie wykorzystują zaawansowanych funkcji urządzenia mobilnego.

Branże (wraz z przykładami), które z powodzeniem mogą zmienić stronę mobilną w PWA:

Mamy newsletter, który rozwija marketing w Polsce. A Ty czytasz?

Rozwijaj się

1. E-commerce – w sklepach internetowych każda poprawa użyteczności czy szybkości ma wpływ na konwersję. Aplikacje natywne gwarantują konwersję na poziomie stron www wyświetlanych na desktopie, lecz na stronach mobilnych ten wskaźnik jest kilkukrotnie niższy. Zastąpienie strony mobilnej przez PWA może przynieść zatem znaczące zyski. Dobrym przykładem jest serwis Alibaba, który po wprowadzeniu aplikacji progresywnej zwiększył o 76% wskaźniki celów konwersji, a ilość aktywnych użytkowników miesięcznie wzrosła o 14% na iOS i 30% na Androidzie.
2. Media – portale informacyjne nie wymagają dostępu do zaawansowanych funkcji urządzeń mobilnych. Największa wartością dla użytkownika jest szybki dostęp do interesujących treści. The Washington Post po wprowadzeniu PWA poprawił czas ładowania treści o 88% w porównaniu do tradycyjnej strony mobilnej. Natomiast Forbes zmniejszył czas ładowania strony z 3-12 do 0,8 sekundy. Oprócz tego wprowadził nowy format reklam, zaprojektowanych w celu szybszego ładowania na urządzeniach mobilnych. Przykładem z lokalnego podwórka jest nowa strona Onetu uruchomiona w czerwcu.
3. Marketplace – serwisy oferujące przewozy, dostarczanie jedzenia, bookowanie hoteli, lotów czy zamawianie biletów. Korzystamy z nich nieregularnie, w związku z czym niekoniecznie chcemy pobierać oddzielną aplikację do każdej z tych czynności. Przykładem wykorzystania PWA jest Wego – serwis do bookowania tanich lotów i hoteli. Po wprowadzeniu aplikacji progresywnej czas pełnego załadowania strony zmniejszył się z 12 do 1,6 sekundy dla nowych użytkowników, a dla powracających nawet poniżej 1 sekundy. Współczynnik odrzuceń spadł o 20%, a konwersja wzrosła o 95% w porównaniu z poprzednią stroną mobilną. Uber także wprowadził PWA, lecz nie podzielił się jeszcze statystykami.
4. Biznesy, których targetem są kraje rozwijające się – w krajach afrykańskich czy azjatyckich, gdzie w wielu miejscach połączenie z Internetem jest ograniczone, bardzo ważne jest jak najniższe zużycie danych. W tym przypadku dobrze sprawdzą się PWA, które minimalizują ilość pobieranych zasobów. Doskonałym przykładem jest Jumia Travel – platforma do rezerwacji hoteli, której głównymi rynkami są kraje afrykańskie. Firma zdołała pięciokrotnie zmniejszyć ilość pobieranych danych, zwiększyć konwersję o 33% oraz obniżyć współczynnik odrzuceń o 50%.

Ograniczenia Progressive Web Apps

Wspomniane wcześniej ograniczenia w dostępie do zaawansowanych funkcji telefonu powodują, że PWA nie są w stanie w pełni zastąpić aplikacji natywnych wykorzystujących np. moduły komunikacji NFC czy Bluetooth. W efekcie tego nie sprawdzą się one w rozwiązaniach z zakresu Internetu Rzeczy (IoT), wykorzystujących beacony, czy integrujących się z urządzeniami takimi jak smartwatche.

Jest także coś o czym nie mówi się często, a jest niewątpliwie ważnym czynnikiem wpływającym na decyzję o stworzeniu aplikacji mobilnej. Aplikacje natywne mają dostęp do danych, do których przeglądarka, a zatem aplikacja progresywna nie ma dostępu tj. naszego numeru telefonu, książki kontaktów, kalendarza i innych, jeśli tylko użytkownik wyrazi zgodę. Daje to duże możliwości jeszcze lepszego poznania naszych klientów, a co za tym idzie serwowania im spersonalizowanych komunikatów marketingowych.

W kwestii ograniczeń należy wspomnieć również o braku wsparcia dla PWA w systemie iOS. Safari nie obsługuje jeszcze Service Workers, zatem strony nie mogą być ładowane z pamięci podręcznej w przypadku problemów z dostępem do sieci, nie są obsługiwane powiadomienia push, a po wejściu na stronę nie pojawia się belka z możliwością dodania aplikacji do ekranu smartfona (choć Safari posiada możliwość stworzenia skrótu na ekranie głównym w wachlarzu funkcji dodatkowych). Pomimo braku tych funkcji wyniki PWA na iOS są zdecydowanie lepsze niż w przypadku stron mobilnych. Ostatnie doniesienia (potwierdzone przez pracowników wysokiego szczebla Apple) mówią jednak o rozpoczęciu prac nad implementacją obsługi Service Workers w systemie iOS.

Podsumowanie

Standard Progressive Web App jest przyszłością korzystania z Internetu na urządzeniach mobilnych. Ze względu na szybkość, niezawodność i możliwości angażowania użytkowników zdecydowanie warto zastąpić obecną stronę mobilną aplikacją progresywną. Wyniki uzyskiwane przez firmy, które wdrożyły już tę technologię pokazują, że jest to również opłacalna decyzja. Łatwość instalacji PWA może sprawić, że przekonamy do jej pobrania użytkowników, którzy z jakichś powodów (np. braku miejsca w pamięci telefonu) nie byli skłonni do pobrania aplikacji natywnej.

Jest też druga strona medalu, po której możemy postawić takie wartości jak dobry look&feel aplikacji, jej wysoki współczynnik płynności i wrażenia użytkownika pojawiające się w trakcie korzystania z niej. Tutaj zdecydowanym numerem jeden wciąż są rozwiązania natywne – najlepiej współpracujące z architekturą systemów mobilnych. Rozwiązania webowe, nawet te najwyższej jakości, wciąż mają pewne braki. Nie zmienia to jednak faktu, że są doskonałym rozwiązaniem przejściowym (w niektórych branżach wydaje się że nawet docelowym), szczególnie jeśli biznes opiera się głównie o konsumpcję treści za pośrednictwem web/mobile-web i nie wymaga obsługi zaawansowanych rozwiązań, czy wykorzystania niedostępnych dla przeglądarki funkcji urządzeń mobilnych.