Opis zalet technologii Progressive Web App oraz tego jak ta technologia wpływa na sposób odbioru treści przez użytkowników. Wady i zalety wdrożeń PWA, przykłady największych wdrożeń, omówienie zasad działania technologii oraz jej przewag nad tradycyjnym modelem wyświetlania treści.

1. Jak Progressive Web App zmienia
zasady gry w ecommerce?
Andrzej Szylar
Global4Net

2. Dynamika rozwoju mobilnego ecommerce
W 2021 sprzedaż
w kanale mobile
osiągnie 72,9%
całkowitej sprzedaży
ecommerce.

3. Współczynnik konwersji jest prawie trzykrotnie niższy na
telefonach komórkowych niż komputerach.

4. Fenomen luki mobile
Mimo iż, użytkownicy spędzają dużo więcej czasu na stronie na urządzeniach mobilnych,
przy jednoczesnym dużo większym ruchu z tych urządzeń to stopa konwersji jest dużo mniejsza.

5. Przyczyny niskiej konwersji na mobile
• Wysoki stopień porzuceń koszyka
Mobile ma najwyższy stopień porzuceń koszyka
źródło: https://www.barilliance.com/cart-
abandonment-rate-statistics/
Trudności z:
• Używaniem telefonu jako narzędzia do
rozpoznania oferty i problemy z dodawaniem do
koszyka
• Wolne działanie strony
• Rozmiar ekranów na urządzeniach mobilnych
utrudnia zamawianie

6. Kilka faktów na temat mobile
Blisko 70% klientów deklaruje, że czas ładowania strony wpływa na ich chęć
zakupu.
źródło: https://unbounce.com/page-speed-report/
Ponad 53% użytkowników deklaruje że opuści stronę, jeżeli ta będzie się
ładowała dłużej niż 3 sekundy. Przy czym mediana czasu do pierwszej interakcji
(tzw. TTI) dla top 500 sprzedawców w Stanach Zjednoczonych wynosiła 4,9
sekundy.
Badanie przeprowadzone przez Akamai wskazuje, że 25% osób porzuca stronę,
jeżeli czas ładowania jest dłuższy niż 4 sekundy.
Alibaba zwiększyła konwersję o 76% dzięki PWA, Trivago zwiększyło konwersję o
97% po wprowadzeniu PWA wiosną 2017.

7. PWA – Progressive Web Application
1. Niezawodność – aplikacja ładuje się natychmiastowo nie pokazując
zwolnień nawet przy niepewnym łączu.
2. Szybkość interakcji – natychmiast reaguje na interakcję użytkownika
z płynnymi animacjami oraz płynnymi
przejściami (bez scroll-skoków)
3. Angażowanie – użytkownicy
odczuwają poruszanie się po aplikacji
tak, jakby to była aplikacja natywna
(zarówno dekstopowa jak i mobilna).

8. W jakich aspektach PWA jest lepsze
od natywnej aplikacji:
1.Responsywność - aplikacje PWA są z założenia zawsze responsywne, dopasowują się
do wielu urządzeń w zależności tylko od rozdzielczości, nie ma konieczności
utrzymywania aplikacji pod różne systemy np. Android / iOS
2. Aktualizacje – użytkownik nie musi świadomie aktualizować aplikacji, dopóki jest
online zawsze ma najnowszą wersję
3. Bezpieczeństwo – wymogiem aplikacji
ze strony urządzeń jest bezpieczne połączenie,
zawsze po HTTPS

9. W jakich aspektach PWA jest lepsze
od natywnej aplikacji:
4. Łatwość w znalezieniu – aplikacja jest zintegrowana ze stroną internetową, więc nie
ma konieczności szukania aplikacji np. w sklepie Google Play, czy iOS App Store.
5. Instalacja – jest bardzo prosta, wystarczy, że użytkownik zgodzi się na dodanie
aplikacji do menu.
6. Push – aplikacje PWA implementują
obsługę tzw. Notyfikacji Push, za pomocą
których możemy dostarczać użytkownikowi
określone informacje bez konieczności
odwiedzania przez niego naszej strony.

10. W jakich aspektach PWA jest lepsze
od webowej aplikacji:
W każdym. Jest to przyszłość praktycznie każdej internetowej aplikacji,
postęp jest tak samo duży jak po wprowadzeniu zapytań asynchronicznych
(Ajax) 13 lat temu, które obecnie są standardem.

12. Miesięczna liczba sesji: 666,50 mln
82%
AliExpress .com to brand oferujący produkty dla
międzynarodowych kupujących online. Handel mobilny
rośnie trzy razy szybciej niż handel elektroniczny. Firma
nie mogła zbudować wciągającego doświadczenia w
sieci, które było tak szybkie, jak ich aplikacja mobilna.
Przyjrzeli się sieci mobilnej jako sposobie na pozyskania
użytkownika innego niż użytkownik aplikacji mobilnej.
Nie wszyscy chcieli pobierać aplikację, a nakłonienie
użytkowników do jej zainstalowania było trudne i
kosztowne.
AliExpress postanowił więc zbudować PWA
kompatybilne z różnymi przeglądarkami, aby połączyć
najlepsze z ich aplikacji z szerokim zasięgiem sieci.
104% Więcej nowych użytkowników
we wszystkich przeglądarkach
Wzrost współczynnika
Konwersji na iOS
Więcej stron odwiedzanych na sesję
na użytkownika we wszystkich przeglądarkach
Zwiększenie czasu spędzonego
na sesji we wszystkich przeglądarkach
2x
74%

14. Ruch w miesiącu: 155,6 mln
14%
Alibaba.com to największa na świecie internetowa
platforma handlowa business to-business obsługująca
ponad 200 krajów i regionów.
Mobilna sieć internetowa jest podstawową platformą
sprzedaży Alibaba. Firma zawsze skupiała się na
projektowaniu i funkcjonalności, ale trudno było
zbudować wciągające doświadczenie dla kanału mobile.
Firma uznała, że ​​musi zrozumieć, w jaki sposób dwa
różne segmenty użytkowników korzystały z usługi w celu
zbudowania skutecznej obecności mobile. Segmenty
zawierały natywnych użytkowników aplikacji i
użytkowników sieci mobilnej, którzy współpracowali z ich
firmą. Po zaktualizowaniu swojej witryny do PWA firma
odnotowała ogromny wzrost całkowitej liczby konwersji
w przeglądarkach.
76%
wyższa konwersja
między przeglądarkami
wzrost aktywnych
użytkowników na iOS
wyższy współczynnik interakcji z ekranu
Dodaj do ekranu głównego
więcej aktywnych użytkowników
Miesięcznie na Androida
4x
30%

16. Ruch w miesiącu: 155,6 mln
97%
Trivago jest wiodącą wyszukiwarką usług hotelowych.
Użytkownicy częściej korzystają z usługi za
pośrednictwem urządzeń mobilnych niż na
komputerach stacjonarnych i laptopach. Przy czym nie
zawsze akceptują konieczność pobierania natywnej
aplikacji, aby dowiedzieć się, czy zapewnia ona usługę,
której potrzebują.
Trivago zdecydowało się wdrożyć PWA, które
umożliwia mobilnym stronom internetowym
zapewnienie funkcjonalności zbliżonej do natywnej
aplikacji, takiej jak dostęp offline, powiadomienia push
i skróty na ekranie głównym, a jednocześnie jest
dostępna za pośrednictwem zwykłej przeglądarki
mobilnej.
150% Wzrost
zaangażowania
Zwiększenie liczby kliknięć w ofertach
Hotelowych dla użytkowników PWA
Użytkownicy którzy wracają,
kontynuują przeglądanie witryny67%

17. PWA - nie tylko zagraniczne projekty

18. PWA - nie tylko zagraniczne projekty

19. Działanie standardowej webowej aplikacji:

20. Działanie
aplikacji headless
z wykorzystaniem
React:

21. Wykorzystanie
zasobów
procentowo
na jedno
zapytanie

22. Małe kalkulacje – czysty zysk backendowy:
Przyjmijmy, że większość ruchu odbywa się po katalogu (pomijając stronę główną,
która niemalże w całości powinna być w cache) oraz uśredniony czas odpowiedzi z
backendu katalogu to ok 1.5s
Jeżeli z katalogu ściągniemy całą część
odpowiedzialną za renderowanie, layouty
oraz sesję to uzyskamy odpowiedź
w czasie wynoszącym 20% obecnego czasu
– czyli w 300ms. I to w najgorszym przypadku.

23. Przejdźmy do frontendu
Obecnie po otrzymaniu odpowiedzi z backendu użytkownik musi czekać jeszcze na
wyrenderowanie się frontu, które trwa najdłużej. Uproszczając uruchomienie się frontu
składa się z następujących elementów:

24. 1. Wczytywanie / parsowanie informacji otrzymanych z
backendu
2. Skryptowanie – uruchamianie oraz parsowanie
skryptów
3. Renderowanie – generowanie do rysowania tego, co
powinno się wyświetlić, w tym wczytywanie styli,
analiza styli po skryptach, analiza rozmieszczenia w
layoucie
4. Rysowanie – faktycznie rysowanie użytkownikowi
zawartości obecnego fragmentu strony
5. Inne – np. trwające w tym czasie wywołania ze
skryptów
6. Przykładowy wykres aby procentowo rozlokować czas
poszczególnych elementów podczas pierwszych 7s
strony (tyle wystarczyło, aby strona mi się w pełni
załadowała)

25. Ile w tym czasie zajmują przykładowe skrypty,
które się wykonują?
1. Analytics - 25ms
2. Google Maps Api - 56ms
3. Skrypty dodatkowe - 382ms
4. Facebook - 1490ms
5. GTM - 61ms
6. Afiliacja 1 - 130ms
7. Afiliacja 2 - 56ms
8. Afiliacja 3 - 65ms
9. Hotjar - 45ms
10. Afiliacja 4 - 70ms
11. Afiliacja 5 - 35ms
12. Afiliacja 6 - 245ms
13. Conversion Google AD - 41ms
Łącznie: 2701ms = 2.7 sekundy

26. Różnica między
frontendem
Reactowym oraz
standardowym
– pierwsze
ładowanie

27. Różnica między
frontendem
Reactowym oraz
standardowym
– nawigacja

28. Małe, szybkie kalkulacje – frontend
1. Pierwsze ładowanie strony – będzie trwało w tym przypadku o skrypty dodatkowe
szybciej, w moim przypadku było to 55% szybciej. Jednakże odczuwalne
załadowanie strony nastąpi znacznie wcześniej, przez co użytkownik realnie
znacznie szybciej będzie mógł interaktować ze stroną.
2. Przechodzenie na kolejne podstrony
pozbywamy się wszystkiego,poza ok. 5%
rendering (w przypadku znacznej zmiany
podstrony). Po uzyskaniu odpowiedzi z
backendu użytkownikowi nowa zawartość
powinna się wyświetlić po ok. 100 ms.
W praktyce – prawdopodobnie szybciej.

29. Zysk użytkownika –
Podsumowanie kalkulacji – frontend + backend:
1. Jeżeli obecnie użytkownik, podobnie jak ja, widział stronę po
ok. 3 sekundach, a w pełni funkcjonalna była po 5.8
sekundach, to obecnie użytkownik będzie widział stronę i mógł
z nią interaktować po ok. 1s, a po 3s będzie w pełni
funkcjonalna.

30. Zysk użytkownika –
Podsumowanie kalkulacji – frontend + backend:
2. Z kolei kolejne kliknięcia będą z punktu widzenia użytkownika natychmiastowe
– o ile pozwala mu na to jego łącze internetowe. Odpowiedź z backendu powinna
zająć mniej niż 300 ms, a następnie wyrenderowanie
tego w najgorszym wypadku zajmie 100 ms.
Standardowa animacja ładowania trwa
300-400 ms, więc użytkownik będzie czuł,
jakby od razu po kliknięciu dane już tam były.
Nawet w przypadku słabego łącza będzie
widział płynne “przejście” na kolejną
podstronę z animacją ładowania,
bez przeładowywania całej strony.

31. 6 korzyści technicznych
1. Rozproszenie odpowiedzialności aplikacji sprawia, że np. awaria / restart MySQL nie
doprowadzi do błędu w aplikacji
2. Wolny / opóźniony MySQL nie wpłynie na przeglądanie katalogu
3. MySQL (podobnie jak inne bazy) nie
jest odpytywany przy czynnościach,
które go nie wymagają

32. 6 korzyści technicznych
4. Mamy kontrolę nad tym jakie dokładnie elementy systemu są w jakiej kondycji,
możemy sprawniej I szybciej reagować na nieprawidłowości, a użytkownicy w
większości przypadków nie stracą komfortu działania aplikacji
5. GraphQL – zaawansowane API redukujące ilość czasu potrzebną na implementację
nowych funkcjonalności (szczególnie na linii frontend-backend)
6. API w ustandaryzowanej formie ułatwi
stworzenie testów, które po wdrożeniu
projektu powinny stać się standardem

33. 9 korzyści z wdrożenia PWA
1. Możliwość “zainstalowania” aplikacji w telefonie
2. Możliwość wysyłania pushów do użytkownika np. z dzisiejszym hitem dnia
3. Websocket – znaczne przyspieszenie ładowania katalogu, możliwość oglądania w
czasie rzeczywistym stanu użytkownika jak np. w Google Analytics oraz np. wysyłania
do niego wiadomości (w tym ukrytej wiadomści z danymi – np. o aktualizacji ceny)
4. Aktywna historia – jeżeli użytkownik już raz znalazł się na danej podstronie, to nie
pobiera ponownie informacji na temat jej zawartości
5. Inteligentne doładowywanie – przewidywanie co użytkownik może chcieć w
następnej kolejności i załadowywanie mu zawartości jeszcze zanim zdąży kliknąć

34. 9 korzyści z wdrożenia PWA
6. Przeglądanie offline – użytkownik tracąc połączenie z internetem może się poruszać
po katalogu
7. Możliwość wykrycia słabego połączenia z internetem oraz w zależności od decyzji
biznesowych np. ładowanie słabszej jakości zdjęć, lub nie ładowanie zdjęć na listingu
(a np. dopiero po kliknięciu, lub dopiero na karcie produktu)
8. Wczytywanie tylko dedykowanych elementów interfejsu dla konkretnego
urządzenia / rozdzielczości
9. Dostępne są natywne funkcje telefonu do przyszłego użycia, np. lokalizacja (jesteś
koło naszego sklepu, trzymaj bon na zakupy), aparat (zdjęcie do reklamacji)