Progressive Web App - zachwyca czy nie zachwyca?

Progressive Web App to przyszłość projektowania stron internetowych. Dzięki PWA użytkownicy w prosty sposób mogą zainstalować stronę internetową sklepu na swoich telefonach. To duża zmiana dla e-commerce. Zmiana, która odpowiada na potrzebę dostarczania klientom jak najlepszych doświadczeń podczas mobilnych zakupów. Czy dla sklepów internetowych to już odpowiedni moment, by inwestować w PWA?

PWA w skrócie

Czym 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.

NATIVE APPSPROGRESSIVE WEB APPS
Aplikacje natywne są stworzone specjalnie dla jednej platformy PWA jest aplikacją, która działa w przeglądarce i zachowuje się jak natywna aplikacja.
Oddzielna baza kodu dla każdej platformy, takich jak Android, iOSNie ma potrzeby oddzielnej bazy kodu, nie ma potrzeby instalacji z Google Play albo App Store
Świetne doświadczenie użytkownika dzięki dostępowi do natywnego hardware Najwyższa jakość obsługi dzięki nowoczesnym standardom sieciowym
Wymaga większego budżetu do napisania kodu specjalnie dla danej platformyRelatywnie tańsza od natywnej aplikacji, ponieważ działa na wielu platformach z jednym kodem
Potrzeba ściągnięcia z app store“Add to Home Screen” - uruchamia się bezpośrednio w przeglądarce
Wymaga więcej miejscaUżycie niewielkiej ilości miejsca
Większe zużycie danychPracuje dobrze przy wolnym łączu i offline

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”.