Progressive Web App - zachwyca czy nie zachwyca?

Autor:
Paulina Jóźwik
Opublikowany:
20.3.2020
C

zym jest PWA? Podczas Imagine 2019 w Las Vegas James Zetlen określił PWA jako bardzo dobrze działającą stronę internetową. Jest to możliwe dzięki temu, że PWA używa nowoczesnych technologii, zapewniając użytkownikom doświadczenie porównywalne do korzystania z natywnych aplikacji mobilnych. Teoretycznie w tym miejscu można by skończyć wyjaśnienia na temat. W praktyce jednak nie jest to takie proste.

Czy technologia PWA jest czymś całkowiecie nowym? Tak naprawdę wspomniał o niej już w 2007 roku Steve Jobbs przy okazji zaprezentowania światu pierwszego modelu iPhone’a. Jobbs chciał, aby programiści budowali aplikacje na iPhone'a przy użyciu standardowych technologii internetowych. Aplikacje miały być używane przez przeglądarkę internetową Safari. Niestety nic z tego nie wyszło, a niebawem rozpoczęła się prawdziwa mania aplikacji natywnych. Natomiast termin „Progressive Web App” został wprowadzony w 2015 r. przez Frances Berriman i inżyniera Google Chrome Alexa Russella. Został użyty do opisania aplikacji internetowych, które wykorzystują nowe funkcje obsługiwane przez nowoczesne przeglądarki, takie jak service workers i web app manifests.

Jednak PWA jest to na tyle nowym rozwiązaniem w e-commerce, że jeszcze niewiele sklepów internetowych może pochwalić się wdrożeniami tej technologii.

Co kryje się za skrótem PWA?

  • Progressive – działa dla każdego użytkownika, niezależnie od wyboru przeglądarki, przy użyciu progressive enhancement principles.
  • Web – strony PWA są napisane w językach typowych dla Internetu, np. HTML, CSS, JavaScript
  • App – pracuje jak natywna aplikacja mobilna (lub desktopowa), ma spójny interfejs, takie samo doświadczenie użytkownika i funkcjonalność.

Co daje PWA użytkownikom? Przede wszystkim zapewnia lepszą użyteczność, dzięki połączeniu tego, co najlepsze w korzystaniu z Internetu przez przeglądarkę, jak i aplikację.

Progresive Web App is a very good website - Jemes Zetlen – PWA Studio Magento contributor

PWA zapewnia:

  • Łatwiejszy dostęp do strony bezpośrednio z wyszukiwarki – użytkownik nie musi pobierać aplikacji z Google Play czy App Store. Wystarczy jedno kliknięcie i strona zapisze się na telefonie użytkownika (w postaci ikonki). Co ważne, zapisana strona będzie zajmować o wiele mniej miejsca niż natywna aplikacja. Np. aplikacja natywna Twittera zajmuje 62,49 MB, natomiast Twitter w wersji PWA zajmuje jedynie 160 KB.
  • Wygodniejsze przeglądanie treści, wyszukiwanie informacji czy kupowanie na urządzeniu mobilnym – wszystko to dzieje się bez konieczności instalowania aplikacji.
  • Szybsze ładowanie strony (w porównaniu do stron internetowych, które nie wykorzystują tej technologii) i możliwość częściowego przeglądania zawartości strony w trybie offline.
  • Dostęp offline – dzięki użyciu tzw. service workers (plików JavaScript), w przypadku problemów z siecią, aplikacja nadal działa. Część zasobów aplikacji jest zapisywana w pamięci podręcznej urządzenia, dzięki czemu działają one szybciej i są zawsze dostępne..

Zalety PWA dla biznesu

Szybkość

To jedna z najbardziej ekscytujących funkcji PWA. Strony mobilne, które ładują się w dwie sekundy lub krócej mają 15% większy współczynnik konwersji niż przeciętna strona mobilna. Oznacza to, że użytkownicy opuszczają stronę, gdy ładuje się ona powyżej 2 sekund. Dlatego też zamienienie zwykłej strony mobilnej na stronę PWA przyniesie znaczące korzyści dla biznesu. Strony wykorzystujące tę technologię ładują się nawet tylko jedną sekundę. Istnieją przykłady na rynku e-commerce, które to potwierdzają. Na przykład sklep internetowy Jumia (Afryka), dzięki PWA zmniejszył o 50% wskaźnik odrzuceń na stronie. Natomiast gigant kosmetyczny Lancôme wzdrożył PWA w 2017 roku i odnotował 84% spadek czasu ładowania się strony.

Szybkość ładowania strony jest ważna, by zwiększać konwersję, ale też z perspektywy SEO. W styczniu 2018 r. Google oficjalnie ogłosiło, że prędkość ładowania strony w wersji mobilnej będzie kluczowym czynnikiem rozpatrywanym w kontekście widoczności witryn w organicznych wynikach wyszukiwania.

Zaangażowanie

Dzisiejszy użytkownik smartfona ma średnio ponad 80 aplikacji. Przy czym średnio dziennie wykorzystuje tylko 9 aplikacji. Najczęściej są to aplikacje mediów społecznościowych, gry, aplikacje muzyczne czy wideo. Tak naprawdę bardzo trudno zaangażować użytkownika do ponownego wejścia do natywnej aplikacji zakupowej. Dlatego też z perspektywy e-commerce PWA można okazać się bardzo przydatne, dzięki możliwości wykorzystania powiadomień push. Za ich pomocą sklep będzie dostarczać użytkownikom na bieżąco różnego typu informacje np. o statusie zamówienia, terminie dostawy czy promocjach. W ten sposób sklepy zyskają dodatkową możliwość angażowania użytkownika i zachęcenia go do kolejnych wizyt.

Potwierdzają to pierwsze case studies. Na przykład sklep internetowy eXtra z Arabii Saudyjskiej dzięki PWA i powiadomieniom push zwiększył zaangażowanie użytkowników 4-krotnie. Po zainstalowaniu PWA użytkownicy, którzy zgodzili się na powiadomienia, spędzali na stronie 2 razy więcej czasu. W efekcie marka zanotowała 100% wzrost sprzedaży pochodzących z web push notification.

Konwersja

Zwiększenie szybkości ładowania się strony i większe zaangażowanie użytkowników wpływają bezpośrednio na najważniejszą rzecz z perspektywy e-commerce, czyli na wzrost konwersji. Są już wdrożenia PWA, po których strony internetowe znacznie zwiększyły konwersję. Przykładem jest wyszukiwarka hoteli Trivago, w przypadku której aż pół miliona osób dodało PWA Trivago do swojego ekranu głównego. Strona zwiększyła zaangażowanie, a konwersja wzrosła o 97%. A co z e-commerce? Jednym z najczęściej wymienianych case studies w kontekście PWA i konwersj jest przypadek Aliexpress. Po wdrożeniu PWA ten sklep internetowy zanotował wzrost konwersji o 82% na iOS.

Czy PWA to rozwiązanie idealne?

Po pierwsze PWA jest stosunkowo nowym rozwiązaniem samo w sobie, a zwłaszcza w przypadku Magento. Może to powodować duże koszty wdrożenia. Ceny rosną zwłaszcza podczas tworzenia dedykowanych rozwiązań. Jednak Magento wyszło na przeciw zapotrzebowaniu na tę technologię i stworzyło zestaw narzędzi do budowania sklepów internetowych jako PWA, czyli PWA Studio. Narzędzie to pomaga programistom nauczyć się technik PWA, budowania interfejsów, tworzenia komponentów i rozszerzeń do ponownego wykorzystania lub sprzedaży na Magento Marketplace.

Wady PWA

  • Mniejszy dostęp do niektórych funkcji - PWA może łączyć się z kamerą, mikrofonem itp., ale w natywnych aplikacjach dostęp do tych funkcji jest większy. Pomimo tego, w typowych wdrożeniach sklepów internetowych, to co oferuje PWA będzie wystarczające.
  • Ograniczona funkcjonalność na urządzeniach IOS – niestety, technologia PWA nie jest jeszcze w pełni wdrożona na IOS.
  • Brak możliwości pobierania danych o użytkownikach – w przeciwieństwie do natywnych aplikacji mobilnych, strony PWA nie mają dostępu do danych osobowych użytkownika, takich jak: lista kontaktów, połączenia i wiadomości.

Ile kosztuje wdrożenie PWA?

Zbudowanie strony w oparciu o PWA jest znacznie tańsze niż tworzenie natywnej aplikacji, co pozwala na optymalizację kosztów. Firma, która potrzebuje natywnej aplikacji, będzie musiała ją stworzyć zarówno dla urządzeń z systemem Android, jak i iOS. Może to być bardzo kosztowne, bo do każdego z tych systemów potrzebny będzie osobny zespół programistów dla poszczególnych przeglądarek i aplikacji mobilnych. Do stworzenia PWA wystarczy jeden zespół i jedna technologia.

Zbudowanie PWA od początku kosztuje ok. $400k- $1m. Wdrożenie istniejących rozwiązań, takich jak PWA Studio, Vue Storefront, Deity, itp. to czas 300-600 roboczogodzin, więc szacowany całkowity koszt takiego projektu zaczynałby się od 15 tys. dolarów.

Jakie technologie są wykorzystywane w PWA?

  • frameworki i biblioteki języka JavaScript takie jak React.js, Vue.js czy Angular,
  • plik manifestu (definiuje akcenty przeglądarek mobilnych oraz desktopowych, takie jak kolor paska górnego i ikona strony),
  • Service Workers - umożliwiają działanie w tle przeglądarki oraz bez dostępu do sieci.

Weryfikacja zgodności z PWA odbywa się przez sprawdzenie punktów Progressive Web App Checklist (opublikowane przez Google) i przejście benchmarku narzędzia Google Lighthouse.

Na rynku pojawia się wiele rozwiązań PWA dla e-commerce. Ważną informacją jest to, że nie wszystkie z nich są takie same. Jaka jest różnica? Podejście do budowania PWA. Deweloperzy mogą tworzyć własne PWA od podstaw lub wykorzystywać do tego istniejące już struktury. Przykład? W pierwszym przypadku mogą korzystać z PWA Studio, które jest zbiorem narzędzi pozwalających deweloperom budować złożone Progressive Web Applications. Natomiast w drugim przypadku mogą uruchomić gotowe frameworki, takie jak Vue Storefront lub Deity, i połączyć się z backendem Magento poprzez API.

Wykorzystanie PWA w e-commerce

AliExpress

Zanim AliExpress zainwestowało w PWA, marka próbowała pozyskiwać konwersje przez stronę mobilną. Jednak nie przynosiło to satysfakcjonujących efektów. Strona internetowa nie zapewniała użytkownikom odpowiedniego doświadczenia na urządzeniach mobilnych.

Po wdrożeniu Progressive Web App AliExpress zwiększył współczynniki konwersji dla nowych użytkowników o 104%. Ta inwestycja spowodowała również wzrost współczynników konwersji w Safari o 82%. Co więcej, użytkownicy odwiedzają teraz dwukrotnie więcej stron na sesję, a czas spędzony na sesji wzrósł średnio o 74% we wszystkich przeglądarkach.

George

George to jedna z wiodących marek modowych w UK. Firma chciała dostarczać lepszą jakość zakupów na urządzeniach mobilnych, co udało się po wdrożeniu PWA. Zgodnie z najlepszymi praktykami PWA udało się skrócił czas ładowania strony o 3,8x razy. Firma odnotowała również 31% wzrost konwersji i 20% więcej odsłon na wizytę.

Ponadto marka wprowadziła powiadomienia „Dodaj do ekranu głównego”, które pojawia się użytkownikowi po wejściu na stronę. Dodanie powiadomienia przyspieszyło czasu obsługi klienta o 28%.

George PWA

LuxMart

LuxMart – kanadyjski producent luksusowych akcesoriów do telefonów i laptopów, borykał się z niską konwersją na urządzeniach mobilnych, przy czym 85% ruchu na stronie internetowej tej marki pochodziło właśnie z mobile. Aby poprawić mobilne doświadczenie klienta, należało wykorzystać rozwiązanie, które będzie zarówno bogate w funkcje, jak i wystarczająco szybkie, aby generować konwersje. Z tego powodu marka zdecydowała się na wykorzystanie PWA.

Efekty? Dzięki PWA podwoił współczynnik konwersji na urządzeniach mobilnych – konwersja wzrosła z 0,6% do 1,24%, a w niektórych dniach w miesiącu po wdrożeniu PWA wzrosła nawet do 3,1%.

Dołącz do ruchu PWA

Czy sklepy internetowe powinny inwestować w PWA? Warto zwrócić uwagę na to, że aplikacje natywne sklepów są głównie wykorzystywane przez najbardziej lojalnych i zaangażowanych klientów. Trudno oczekiwać od wszystkich użytkowników, że ściągną aplikację na telefon, np. podczas jednorazowych i przypadkowych zakupach. W tym przypadku sprawdzi się właśnie PWA, bo zapewni użytkownikom doświadczenie podobne do aplikacji, co przyczyni się do wzrostu konwersji.

Po drugie marki, konwersja na urządzeniach mobilnych wciąż jest niska i większość marek nie jest z niej zadowolona. Liczba użytkowników korzystających z Internetu mobilnie, wzrasta z roku na rok. Niestety nie idzie za tym zwiększenie konwersji, która zazwyczaj osiąga 1/3 wyników z desctopu. Zastosowanie technologii PWA może to zmienić. Dlatego też za specjalistami z Forrester Research można powiedzieć do właścicieli biznesów e-commerce: „Join The Progressive Web App Movement”.

Podobne wpisy

Zobacz wszystko
Kultura
17.1.2022

Od muzyka do programisty. Wywiad z cyklu <How IT works>

Wojtek — Senior Magento Frontend Developer — zmienił pracę z profesjonalnego muzyka na rzecz programowania. Jak odnalazł się w nowym zawodzie i branży?
Kultura
10.1.2022

Jak pracuje się jako Senior JavaScript Developer w Strix? 

Jak pracuje się jako JS Developer w Strix? Odpowiedź na to pytanie w rozmowie z Grzegorzem, który pracuje z nami już ponad 3 lata.
Kultura
22.12.2021

Dzielenie się wiedzą mamy w DNA. Nasze aktywności w 2021 roku

W Strix wierzymy, że wiedza ma moc, a powiedzenie sharing is carring, czyli „dzielenie się to dbanie o innych”, sprawdza się również w obszarze zawodowym. 
Kultura
21.12.2021

Wesołych Świąt! Wigilia firmowa 2021

Przed nami świąteczny czas - nie mogło więc zabraknąć spotkania Strixersów na firmowej wigilii. Były prezenty, długie rozmowy przerywane wybuchami śmiechu, a stoły uginały się od świątecznych frykasów.
Tech
14.12.2021

Praca z Magento dla PHP developerów. Hot or not? 

Dlaczego warto pracować z Magento? Czy praca z Magento ma przyszłość? Piszemy o korzyściach pracy z tym systemem dla PHP developerów.

Pracujmy razem

Jeśli chcesz przenieść sprzedaż do świata online, szukasz nowych pomysłów na strategię lub innowacyjnych technologii e-commerce - napisz do nas! Chętnie porozmawiamy o najlepszych rozwiązaniach dla Twojego biznesu.

kontakt