Strona główna /

Progressive Web Apps (PWA)

Rzeczywistość mobile

Żyjemy w erze smartfonów. Nie tylko ułatwiają, ale i determinują one codzienne funkcjonowanie zarówno w prywatnej, jak i zawodowej sferze życia. Z ich pomocą z Internetu korzysta aż 71% użytkowników. Zdecydowana większość z nich na urządzeniach mobilnych polega nie mniej niż na desktopie czy tabletach. W parze z rosnącym znaczeniem i zaufaniem do technologii mobilnych idą rosnące wymagania w zakresie prędkości, bezpieczeństwa i ogólnej jakości usług. Pytanie o mobile w przestrzeni rozwiązań IT nie brzmi już CZY warto, lecz JAK optymalizować działanie stron i aplikacji mobilnych?

Nowy standard użyteczności

Elastycznym rozwiązaniem dla firm, które chcą podjąć tak postawione wyzwanie i osiągnąć sukces w sieci, są progresywne aplikacje internetowe, czyli PWA. To nowoczesny sposób budowana aplikacji obejmujący zbiór praktyk i technologii, których celem jest zwiększenie użyteczności. W praktyce oznacza to, że PWA łączy to co najlepsze w doświadczeniu użytkownika podczas korzystana z Internetu: działa w domyślnej przeglądarce internetowej, zachowując się jak natywna aplikacja na wszystkich urządzeniach mobilnych, a wszystko to zapewnia również w trybie offline.

W x-one PWA przyjęliśmy za nowy standard, który już niebawem stanie się tak oczywistym i nieodłącznym elementem projektowania, jak obecnie funkcjonujące pojęcie responsywności. Z powodzeniem wdrażamy go do realizacji różnorodnych projektów dla naszych klientów z wielu branż.

Nie bez przyczyny technologia PWA dorobiła się użytecznego akronimu, pozwalającego zrozumieć, dlaczego jest tak efektywna. Za Google określa się ją skrótem FIRE:

FAST

INTEGRATE

RELIABLE

ENGAGING

Must have PWA czyli
co wyróżnia standard PWA?

Działanie w trybie offline – to kluczowa wartość i wyróżnik PWA, gdyż w przypadku braku dostępu do sieci zapewnia ciągłość działania przeprowadzając synchronizację w tle. W tym celu posługuje się fragmentem kodu zwanym Service Workerem.

Bezpieczeństwo i prywatność połączenia – dzięki certyfikatowi HTTPS uwierzytelniającemu odwiedzane strony i zapewniającemu integralność przesyłanych danych, dodatkowo stanowiącemu wymóg działania service workerów.

Plik Web App Manifest, który w pliku tekstowym JSON definiuje informacje o aplikacji (takie jak nazwa, język, domyślna orientacja, czy ikona aplikacji, którą użytkownik może zapisać na ekranie głównym) niezbędne do jej pobrania i zaprezentowania w sposób zbliżony do aplikacji natywnej.

Szybkość – aplikacje PWA doskonale wpisują się w standard Mobile First, w którym szybkość ładowania stron mobilnych (w tym przypadku opartych na PWA) to kluczowy czynnik wpływający na jakość doświadczenia użytkownika. Prędkość działania sprzyja również indeksowaniu przez Google, a tym samym podnosi widoczność w wynikach wyszukiwania.

Automatyczne aktualizacje – zmiany publikowane są natychmiastowo poprzez umieszczenie plików na serwerze, tak jak w przypadku serwisów www. Użytkownicy zawsze dysponują więc najnowszą wersją bez konieczności pobierania aktualizacji ze sklepów, a wydawca zyskuje ścisłą i niezwłoczną kontrolę nad funkcjonowaniem aplikacji.

User experience – pełna responsywność oraz UX dorównujący aplikacjom natywnym.

Innowacyjne rozwiązania mobile dla biznesu

Dostarczając innowacyjne technologie pomagamy firmom przenieść się do rzeczywistości mobilnej: dostosować do aktualnych wymogów i wyjść naprzeciw nowoczesnym trendom. Praktyczna znajomość PWA pozwala nam na tworzenie rozwiązań dedykowanych, by precyzyjnie i kompleksowo realizować cele biznesowe naszych klientów.

Omnichannel

wdrożenie PWA to najlepsze wykorzystanie potencjału omnichannel. Dostarczając nowe, zintegrowane kanały sprzedaży i efektywne narzędzia komunikacji oferuje ujednolicone doświadczenia zakupowe.

Zaangażowanie

większe możliwości w zakresie zwiększania zaangażowania i lojalności klientów w porównaniu do konieczności instalowania kolejnych aplikacji natywnych. Komunikacja możliwa nawet w trybie offline, dzięki komunikatom push.

Zaufanie

spójne rozwiązania i komunikacja w różnych narzędziach sprzyja budowaniu wiarygodności marki.

Koszt

działanie w przeglądarce i na wielu platformach eliminuje konieczność wdrożenia rozwiązania osobno na różne urządzenia i obniża koszt realizacji projektu.

Optymalizacja

skrócenie czasu i zwiększenie efektywności obsługi procesów wewnętrznych, takich jak obsługa klientów, logistyka, produkcja, rozliczenia pracowników i wiele innych.

Konwersja

połączenie szybkości działania i zwiększenia zaangażowania użytkowników wpływa bezpośrednio na wzrost konwersji w dziedzinie e-commerce.

Szybkość działania aplikacji, a zachowania użytkowników

70

kupujących na urządzeniach mobilnych zrezygnuje z procesu zakupu w ciągu kilku sekund, jeśli uzna proces za niedostatecznie łatwy

8

100 milisekund może dzielić od poprawy liczby konwersji o 8%

5

100 milisekund może dzielić od poprawy zaangażowania użytkowników o 5%

Źródło: 55 the data company and Deloitte Digital: Milliseconds make Millions

Dla kogo PWA
e-commerce

Wymierne korzyści z zastosowania technologii odniosą organizacje planujące rozszerzenie lub koncentrację komunikacji z użytkownikami mobile oraz te firmy, które już notują duży ruch z urządzeń mobilnych. Stanowi ona odpowiedź na potrzeby stworzenia multi-platformowej aplikacji z funkcjonalnościami aplikacji natywnej, z której użytkownicy korzystać będą niezależnie od miejsca, w którym przebywają i urządzenia, którym posługują się w danej chwili.

Branże i przykłady obszarów funkcjonowania, którym dedykujemy innowacyjne rozwiązania na mobile to m.in.:

Firmy ubezpieczeniowe – prezentacja oferty i porównywanie warunków ubezpieczeń

Fundusze inwestycyjne – zarządzanie portfelami inwestycyjnymi

Banki – usługi bankowości mobilnej, prezentacja produktów i oferty oraz komunikacja z klientami

Firmy ubezpieczeniowe – prezentacja oferty i porównywanie warunków ubezpieczeń

Fundusze inwestycyjne – zarządzanie portfelami inwestycyjnymi

Banki – usługi bankowości mobilnej, prezentacja produktów i oferty oraz komunikacja z klientami

Narzędzia na miarę
e-commerce

W przestrzeni e-commerce implementacja standardu PWA to wyposażenie w użyteczne narzędzia i rozwiązania kluczowe dla zwiększenia konwersji. Od startupu po największe marki - użyteczność i potencjał PWA jest nie do przecenienia dzięki mierzalnym efektom implementowanych funkcjonalności.

Dostępność

dla użytkowników na wielu urządzeniach, również tych starszych, co zapewnia szybkie dotarcie do grup docelowych i przyczynia się bezpośrednio do zwiększenia liczby unikalnych użytkowników i odsłon.

Powiadomienia Push

i zastosowanie technologii OneSignal umożliwia wysyłanie powiadomień do użytkowników. Informacje o nowościach, promocjach, alerty i przypomnienia wysyłane są nawet gdy opuszczą stronę. W przypadku użytkowników mobilnych powiadomienia to pierwszy komunikat, który widzą na ekranie telefonu. Technologia ta zapewnia szeroki wybór form przekazu: od bannerów, personalizowanych e-maili czy pop-upów, do wiadomości sms. Dopełnieniem możliwości personalizacji oraz automatyzacji jest opcja raportowania w czasie rzeczywistym.

Geolokalizacja

czyli określenie lokalizacji użytkowników w oparciu o parametry pochodzące z GPS (szerokość i długość geograficzna oraz wysokość nad poziomem morza), która odbywa się w niezwykle dokładny sposób. Wykorzystanie dostępu do GPS otwiera możliwości precyzyjnego targetowania pod względem lokalizacji. Geotargetowaniem dla konkretnej grupy odbiorców można objąć reklamy, komunikaty i oferty. Dodatkowo na podstawie analizy geolokalizacyjnej możliwe jest zdefiniowanie ograniczenia dostępu w oparciu o lokalizację, co ma nieodzowne znaczenie w kwestii bezpieczeństwa.

Smart Search

którego podstawą jest autokorekta i autouzupełnianie fraz oraz filtrowanie i sortowanie wyników jest podstawą optymalizacji wyszukiwarek pod mobile, zwłaszcza w przypadku branż i sklepów, w których występuje dużo nazw własnych, trudnych lub obcego pochodzenia. Szybkość i wydajność to parametry kluczowe, tym bardziej dla sklepów o dużych bazach. Ponadto inteligentne wyszukiwanie wpiera silnik, który sugeruje poszerzoną ofertę produktową powiązaną z preferencjami użytkownika. Im mniejsze prawdopodobieństwo wyświetlenia wyniku „not found”, tym większe szanse na sprzedaż, jak również na skuteczną realizację strategii biznesowej i budowanie lojalności klientów.

Dlaczego warto?

200

Użytkownicy mobile spędzają 200 razy więcej czasu na zakupach online w porównaniu do użytkowników desktop.

53

53% użytkowników opuszcza stronę, która ładuje się dłużej niż 3 sekundy.

43

43% klientów sklepów online w pierwszej kolejności korzysta z wyszukiwarki.

50

Personalizowane powiadomienia push mają o 50% wyższy współczynnik klikalności niż wiadomości wysłane bez segmentacji użytkowników.

Źródło: https://www.algolia.com/blog/ecommerce/e-commerce-search-and-kpis-statistics, https://onesignal.com/blog/insights-from-118-billion-push-notifications-sent-through-onesignal/

PWA i architektura Headless
dla Mobile First Design

PWA jako naturalna konsekwencja wzrostu liczby internautów wykorzystujących urządzenia mobilne z powodzeniem realizuje podejście mobile first. Mobile first to skuteczność dotarcia do użytkownika mobilnego i wszelkie działania podporządkowane temu celowi. W myśl tej zasady zmodyfikowany na przestrzeni ostatnich miesięcy został sposób indeksowania stron przez Google, w którym określanie pozycji witryny następuje przede wszystkim na podstawie dostępności informacji dla użytkownika mobilnego. Podejście to znajduje wyraz również w sposobie projektowania, w którym priorytet stanowi optymalizacja pod mniejsze rozdzielczości odpowiednie dla wersji mobile, po to by zapewnić najlepszy możliwy UX uwzględniając ich specyfikę i możliwości. 

Wdrożenie elastycznej, modularnej architektury Headless sprzyja takiej metodyce projektowania. Umożliwia ona tworzenie wyspecjalizowanych wersji witryn na zasadzie tzw. progresywnego ulepszania projektu, w którym proces rozpoczyna się od ekranów urządzeń o najmniejszej rozdzielczości, a następnie stosownie do wzrostu rozdzielczości istniejące funkcjonalności są rozbudowywane i dodawane są nowe.

Według badań Gemius/PBI z sierpnia 2020, liczba internautów wykorzystujących urządzenia mobilne wyniosła 24,2 mln

Dlaczego headless? Ponieważ rozdziela front od backendu z API w formie pomostu pomiędzy nimi. Headless PWA to model, który otwiera nowe możliwości, nieskrępowane określonymi z góry technologiami wykorzystywanymi do przygotowania warstwy prezentacji, jak w przypadku klasycznych monolitycznych modeli. Takie silne i innowacyjne technologicznie połączenie pozwala nam tworzyć wydajne i dostępne dla użytkowników aplikacje. Wykorzystując narzędzia takie, jak np. Vue Storefront – platformę frontendową typu opensource dla headless commerce, wykorzystujemy w pełny i ekonomiczny sposób elastyczność i dynamiczność jaką oferuje rozwijającym się biznesom.

Aplikacja natywne

Tworzone całkowicie pod jedną platformę – jedna aplikacja bazuje na oddzielnym kodzie dla Android, iOS i pozostałych.

Konieczność pobrania z App Store/ Google Play, co skutkuje opłatami dla wydawców. Instalowana na urządzeniu aplikacja wymaga dokonywania czasochłonnych nieraz aktualizacji.

Tworzone całkowicie pod jedną platformę – jedna aplikacja bazuje na oddzielnym kodzie dla Android, iOS i pozostałych.

Aplikacja PWA

Dostępne i zoptymalizowane pod kątem funkcjonowania na różnych platformach oraz desktopie.

Brak konieczności instalacji. Automatyczne aktualizacje, niemal real-time. Można pobrać skrót do ekranu i od razu rozpocząć użytkowanie.

Dostępne i zoptymalizowane pod kątem funkcjonowania na różnych platformach oraz desktopie.

TWA dla zwolenników
aplikacji mobilnych

Technologią, która pomaga w pełni zagospodarować kanał mobile, tj. wyjść naprzeciw zarówno tym użytkownikom, którzy preferują korzystanie z aplikacji oraz tym którzy działają w przeglądarce, jest opracowana prze Google TWA  (Trusted Web Activities). TWA to w istocie nazwa komponentu, którego zadaniem jest konteneryzajca, czyli opakowanie stron internetowych w standardzie PWA po ty, by w formie aplikacji móc dodać je sklepu Google Play.  

  • Zasięg – możliwość dotarcia do użytkowników aplikacji mobilnych. Również w zakresie obszaru działań promocyjnych.
  • Lekkość – nie bez znaczenia dla szybkości pobierania i zajmowanych zasobów. Dzięki temu rzadziej usuwana z telefonów użytkowników.
  • Optymalizacja czasu i kosztu – wdrożenie nawet dla obszernego serwisu zajmuje zaledwie kilkanaście dni, pociąga za sobą mniejszy koszt niż w przypadku aplikacji natywnej oraz brak konieczności utrzymywania i rozwoju na platformach.

Prawie optymalne rozwiązanie,
czyli o ograniczeniach PWA

Poza aplikacjami PWA oraz często uznawanymi za najbardziej kontrastujące z nimi pod względem funkcjonowania, aplikacjami natywnymi, wyróżnia się m.in. aplikacje hybrydowe i cross-platformowe. Powstały one w efekcie odmiennych sposobów realizowania części frontendowej.  Mnogość technologii stosowanych przez programistów wynika z oczywistych specyficznych funkcjonalności, jak również ograniczeń, których wagę należy oszacować pod kątem realizacji projektu.  

  • Gorsze funkcjonowanie na iOS, a także mniejsze wsparcie dla urządzeń Apple

  • Ograniczenia w korzystaniu z opcji hardware’owych i systemowych (częściowo ograniczenia w tym zakresie sprawnie nadrabia responsywnością)

  • Większe zużycie baterii urządzenia oraz mniejsza wydajność (istotne głównie w kwestii gier)

Przykłady wdrożeń globalnie