Magento PWA – co musisz wiedzieć?

Obecnie 77% polskich internautów robi zakupy przez Internet, a aż 75% z nich wykorzystuje do tego urządzenia mobilne. Takie dane znajdziesz w raporcie E-Commerce w Polsce 2022 przygotowanym przez Gemius we współpracy z IAB Polska. Jeśli te dane nie przekonają Cię, że powinieneś poświęcić czas i pieniądze na odpowiednie przygotowanie wersji mobilnej swojego sklepu, to nic tego nie zrobi. 

Smartfony na stałe zagościły już w naszych kieszeniach i coraz częściej używane są również do robienia zakupów online. Już dawno zapewnienie klientom bezbłędnego doświadczenia mobile przestało być ukłonem w ich stronę, a stało się koniecznością.

Stworzenie przyjaznego user experience wersji mobilnej Twojego e-Commerce jest zadaniem trudnym. Już na samym początku stajesz przed ważnym wyborem: responsywna strona internetowa czy dedykowana aplikacja natywna? Jest jednak jeszcze trzecia opcja – Progressive Web App, która łączy najlepsze cechy obu tych wariantów. My omawiamy tu konkretnie Magento PWA, jako że jest to technologia, w której się specjalizujemy.

Czym jest PWA?

Technologia PWA nie jest żadnym systemem, czy językiem programowania, to podejście do tworzenia aplikacji webowych, które ma na celu podniesienie komfortu użytkowania strony internetowej, czy  e-Commerce’u. 

PWA (Progressive Web Apps) to wypromowany przez Google zbiór reguł projektowania aplikacji webowej, który sprawia, że jest ona przyjazna dla użytkowników urządzeń mobilnych i w praktyce przypomina używanie natywnej aplikacji Android lub iOS. 

Aplikacja PWA – 3 główne filary

Żeby witrynę mobilną można było określić jako strona PWA musi ona spełniać parę wymogów. Przede wszystkim powinna ona:

Wykorzystywać możliwości urządzeń mobilnych

Podobnie jak aplikacje natywne, PWA daje możliwość większego zaangażowania użytkownika niż zwykła strona internetowa. Powiadomienia push, funkcje geolokalizacji, czy wykorzystanie aparatu smartfona do np. przymierzenia okularów przeciwsłonecznych to tylko kilka z możliwości jakie daje aplikacja PWA.

Niegdyś te funkcje dostępne były tylko dla aplikacji natywnych, teraz dzięki coraz to nowszym konektorom API możliwości aplikacji webowych stają się coraz większe. 

Być niezawodna w każdych warunkach

Bez względu na jakość połączenia internetowego lub nawet jego brak aplikacja PWA powinna działać bez opóźnień. Szybkie ładowanie strony, jasny komunikat o dokonaniu akcji (np. kliknięciu w button), czy płynne animacje to podstawowe cechy aplikacji webowej. Co ważne strona PWA musi uruchomić się nawet jeśli smartfon nie ma połączenia z Internetem, chociażby wyświetlając komunikat o zaistniałym problemie.

Być możliwa do zainstalowania na ekranie urządzenia mobilnego

To chyba najbardziej charakterystyczna cecha strony PWA. Aplikację webową zainstalujesz na swoim urządzeniu, bez konieczności pobierania jej z App Store czy Google Play. To świetna funkcja, która daje ogromne możliwości angażowania użytkowników i zwiększa współczynnik użytkowników powracających.

Szczegółową checklistę aplikacji PWA przygotowaną przez Google znajdziesz tutaj.

PWA – aplikacja, która rozwinie Twój biznes

Aplikacja webowa to nie tylko nowinka technologiczna, czy krótkotrwały trend, który cieszy wyłącznie Gen Z. To też świetne rozwiązanie, które (dobrze wdrożone) może mieć bardzo pozytywny wpływ na wyniki finansowe Twojego e-Commerce.

Tworząc mobilną wersję swojego sklepu internetowego, musisz zastanowić się, jakie oczekiwania mają Twoi klienci. Tylko odpowiadając na nie we właściwy sposób, zminimalizujesz współczynnik odrzuceń i zmaksymalizujesz liczbę dokonywanych zamówień. 

W jaki sposób jednak technologia PWA może pomóc Ci osiągnąć Twoje cele biznesowe? 

Szybkie ładowanie strony PWA = większa liczba odsłon

Wdrażając aplikację webową zgodnie ze wszystkimi postulatami Google masz gwarancję, że będzie ona działać sprawnie, a przede wszystkim szybko. Czas ładowania strony jest niezmiernie istotny z punktu widzenia użytkowników. Według danych zebranych przez WebsiteBuilderExpert 1 na 4 użytkowników opuści witrynę, jeśli będzie się ona ładować powyżej 4 sekund. To oznacza, że Twoja witryna ma maksymalnie 4 sekundy na to, by zatrzymać użytkownika. Jeśli czas ładowania Twojego e-Commerce będzie dłuższy, możesz liczyć się z tym, że właśnie tracisz potencjalnych klientów. 

Progressive Web App rozwiązuje ten problem, zapewniając szybkie działanie Twojego sklepu internetowego. 

Instalacja strony PWA na ekranie smartfona = częściej powracający użytkownicy

Ogromną zaletą aplikacji webowych jest to, że zainstalowane na telefonie, czy tablecie są widoczne dla użytkownika przy każdym uruchomieniu danego ekranu. To oznacza, że potencjalny klient ma kontakt z marką za każdym razem gdy przechodzi na dany pulpit mobilny. Już samo pobranie aplikacji PWA sugeruje, że użytkownik jest bardziej zaangażowany i w przyszłości planuje ponownie odwiedzić daną stronę. 

Instalacja strony PWA na ekranie smartfona użytkownika daje Ci również możliwość wykorzystania tego urządzenia do zbudowania większej lojalności i zaangażowania użytkownika, np. wykorzystując geolokalizację do wysłania powiadomienia push z ofertą specjalną do obioru w najbliższym punkcie stacjonarnym. 

Nie wymaga instalacji = większa liczba aktywnych użytkowników

Konieczność pobrania aplikacji natywnej z AppStore czy Google Play to jedna z wad tego rodzaju witryn internetowych. Instalacja to dodatkowy krok, który użytkownik musi przejść, żeby dokonać zakupu w wersji mobilnej Twojego sklepu. Nie działa on jednak na korzyść Twojego współczynnika konwersji, a wręcz przeciwnie. Im dłuższa ścieżka zakupowa klienta, tym mniejsze prawdopodobieństwo, że dokona on zakupu w Twoim e-Commerce. O skracaniu ścieżek konwersji pisaliśmy na naszym blogu przy okazji omawiania sposobów optymalizacji CRO. 

Strona PWA pozwala Ci zminimalizować ten problem. Brak konieczności jej instalacji na urządzeniu mobilnym użytkownika, całkowicie eliminuje ten krok na jego ścieżce zakupowej. Warto też zwrócić uwagę, że nasze smartfony przepełnione są aplikacjami, których nie używamy. Według danych zebranych przez BloggersIdeas typowy użytkownik mobilny ma na swoim smartfonie zainstalowanych aż 80 aplikacji. Miesięcznie korzysta jednak jedynie z 30. Oznacza to, że ponad 62% aplikacji nie jest używanych nawet raz w miesiącu. Czy warto więc poświęcać ogromne sumy pieniędzy na stworzenie dedykowanej aplikacji natywnej dla Twojego e-Commerce?

Tryb offline aplikacji PWA = dłuższy czas spędzony w Twoim e-Commerce

W przypadku utraty zasięgu lub drastycznego spadku prędkości Internetu, Progressive Web App zapisuje w pamięci podręcznej dane, pozwalające na korzystanie z podstawowych funkcji aplikacji, mimo braku połączenia z siecią. Takie rozwiązanie działa na korzyść Twojego biznesu. Jeśli użytkownik strony PWA podczas robienia zakupów w Twoim e-Commerce chwilowo straci zasięg, ale będzie mógł dalej przeglądać kilka kolejnych produktów, czy dodać aktualnie oglądany artykuł do wishlisty, jest duże prawdopodobieństwo, że nie uciekanie od razu do konkurencji, tylko nadal będzie korzystał z dostępnych funkcji aplikacji. Czyż to nie świetny sposób na obniżenie współczynnika odrzuceń i porzuconych koszyków?

Powiadomienia push = bardziej zaangażowani użytkownicy

Ogromną zaletą aplikacji natywnych jest możliwość wyświetlania użytkownikom powiadomień w momencie, w którym nie korzystają z Twojego e-Commerce. Nie jest to jednak funkcja zarezerwowana tylko dla aplikacji pobieranych z AppStore, czy Google Play. Twoja strona PWA może również korzystać z tej opcji. Powiadomienia push to świetny sposób na poinformowanie Twoich klientów o ofertach specjalnych, czy nowych kolekcjach. Dzięki temu w łatwy sposób możesz ściągnąć użytkowników do swojego sklepu internetowego i zwiększyć swoją sprzedaż.

PROGRESSIVE Web App = łatwiejsze skalowanie biznesu

Dzięki temu, że Twoja strona PWA z definicji jest progresywna, możesz w łatwy sposób wprowadzać w niej zmiany. Użytkownik nie będzie musiał aktualizować aplikacji pobierając update z poziomu AppStore czy Google Play. Wszelkie wprowadzone przez Ciebie modyfikacje będą dla niego widoczne podczas kolejnych odwiedzin Twojego e-Commerce. To oznacza, że najnowsze funkcje, które wdrażasz do swojego e-Commerce w celu zwiększenia przychodu Twojej firmie, są dostępne dla każdego użytkownika. 

Jedna wersja sklepu = oszczędność czasu i pieniędzy

Jeśli Twój e-Commerce korzysta z technologii PWA, zamiast wprowadzać zmiany osobno w sklepie internetowym oraz aplikacjach na iPhone’y i Androidy, robisz to tylko w jednym kodzie. Oszczędzasz w ten sposób czas swojego zespołu programistów, a co za tym idzie koszt związany z wdrożeniem tych nowych rozwiązań. Tak samo sprawa wygląda ze stworzeniem sklepu od podstaw. Budując aplikację PWA nie musisz wdrażać 3 osobnych projektów. Tworzysz jedno rozwiązanie, które obsługuje wszystkie urządzenia. Świetny sposób na ułatwienie sobie życia i optymalizację kosztów przedsiębiorstwa.

PWA kontra aplikacje natywne i strony RWD

Czym różni się Progressive Web App od pozostałych, znanych już nam rozwiązań? 

Żeby nie rozwodzić się tu za wiele, przygotowaliśmy dla Ciebie prostą tabelę, porównującą dostępne rozwiązania.

Magento PWA – czy to rozwiązanie jest dla Ciebie?

Po pierwsze, musisz sprawdzić czy Magento jest dla Ciebie. Możesz zacząć od przeczytania naszego artykułu Ile kosztuje wdrożenie sklepu na Magento?. Polecamy też podstawowy artykuł o tym, co to jest Magento.

Jeżeli jesteś już zdecydowany na ten silnik lub Twój sklep już z niego korzysta, warto, żebyś pomyślał o wersji mobilnej swojego e-Commerce w kontekście wymagań współczesnego użytkownika. I tutaj świetnie sprawdzi się aplikacja PWA, która właśnie na te potrzeby odpowiada.

Tylko jak poskładać to wszystko do kupy?

Magento PWA + headless – połączenia idealne?

Każdy właściciel e-Commerce wdrażając swój sklep internetowy zadaje sobie pytanie jak stworzyć dobrą i możliwie jak najtańszą platformę sprzedażową. Z kwestią kosztów ciężko dyskutować. Im więcej produktów i skomplikowanych funkcji, tym droższy będzie e-Commerce. Można oczywiście optymalizować wydatki, jednak nadal będzie to dość spory koszt. I trzeba się z tym po prostu pogodzić. 

Jest jednak sposób, żeby połączyć wysoką jakość sklepu internetowego z optymalnym jego kosztem. A jest nim architektura headless, która polega na rozdzieleniu frontendu od backendu. Dzięki temu możesz stworzyć osobne fronty dla każdego urządzenia oraz wprowadzać w nich zmiany bez ingerencji w backend. To powoduje, że koszty utrzymania i wprowadzania wszelkich zmian są tańsze. Jeśli chcesz się dowiedzieć więcej o tej architekturze, zajrzyj do naszego artykułu o headless e-Commerce.

Wdrażając sklep internetowy na Magento w oparciu o headless, mamy świetną okazję, żeby zastosować się do postulatów PWA. W ten sposób uzyskamy optymalne rozwiązanie dla każdego ambitnego e-Commerce’u.

Jak SZYBKO wdrożyć Magento 2 PWA?

Podstawową wersję Progressive Web App, która będzie spełniała większość z wymagań checklisty Google możemy wdrożyć mniej więcej w tydzień.

I voila! Nasza aplikacja spełnia cechy bycia PWA. Niestety po takiej podstawowej implementacji nie będzie ona działała tak responsywnie, jak mogłaby, gdybyśmy zrobili to dobrze, a nie szybko. Porządne wdrożenie Magento PWA wymaga sporo pracy dewelopera i na pewno zajmie więcej czasu, niż te przywołane 7 dni.

Jak DOBRZE wdrożyć aplikację PWA Magento?

Obecnie istnieje wiele narzędzi, które umożliwiają stworzenie strony Magento 2 PWA. Wybór odpowiedniego rozwiązania może jednak przysporzyć trochę problemów. Dlatego poniżej opisaliśmy 3 najpopularniejsze opcje.

Magento 2 PWA Studio 

To zbiór narzędzi opartych o Reacta, które umożliwiają łatwiejsze wdrożenie storefrontu Magento PWA. Obsługuje wersje Magento 2.3 i nowsze. Na podstawie tego rozwiązania powstał gotowy motyw – Venia – który może zostać użyty jako podstawa do implementacji PWA w Twoim sklepie internetowym. 

Mimo, że jest to narzędzie prosto od Adobe w wersji podstawowej wciąż nie posiada wielu integracji. Dlatego e-Commerce’y często muszą inwestować w  stworzenie lub zakupienie dodatkowych modułów płatności czy dostaw. 

Magento 2 PWA Studio to dobre rozwiązanie jeśli chcesz zbudować swoją aplikację PWA od podstaw. Musisz jednak pamiętać, że to rozwiązanie nawet przy wykorzystaniu Venia Storefront będzie wymagało czasu i pieniędzy, szczególnie jeśli Twój sklep używa wielu dodatkowych modułów.

Vue Storefront

To framework przeznaczony dla sklepów internetowych opartych o architekturę headless. Nie jest to rozwiązanie dedykowane stricte pod Magento. Poza tym silnikiem obsługuje m.in. Shopware, Shopify, czy PrestaShop. 

Vue Storefront oparte jest na frameworku Vue.js i obsługuje wiele integracji m.in. z systemami CMS, dostawcami płatności itd. Gromadzi ok. 130 partnerskich agencji i ponad 10.000 członków społeczności.

Ten wciąż rozwijający się polski projekt jest dobrym rozwiązaniem dla biznesów, które chcą budować swój sklep w oparciu o Composable Commerce. Warto pamiętać, że nie jest to rozwiązanie dedykowane wyłącznie pod Magento, dlatego mogą pojawić się pewne ograniczenia we współpracy z tym silnikiem.

ScandiPWA

To rozwiązanie open source dedykowane pod Magento, które zostało oparte o Reacta. W swojej podstawowej wersji obsługuje ponad 350 funkcji Magento, dzięki czemu swój sklep PWA będziesz mógł uruchomić szybko, bez konieczności wprowadzania zmian w architekturze Magento 2. 

ScandiPWA posiada marketplace, na którym znajdziesz moduły największych kurierów i dostawców systemów płatności. Dzięki temu proces integracji z potrzebnymi usługodawcami przebiegnie sprawnie, a ty unikniesz dodatkowych kosztów związanych z developmentem dedykowanych wtyczek.

Scandi PWA to bardzo intuicyjne rozwiązanie, które daje Ci ogrom możliwości, a do tego jest chyba jednym z najszybszych do wdrożenia opcji dostępnych na rynku. 

Jeśli jesteś ciekaw jak wygląda aplikacja Magento PWA stworzona na bazie tego frameworka, możesz zajrzeć do naszego demo. Znajdziesz tam przykładowy sklep, dzięki któremu sprawdzisz jakie możliwości może Ci dać Progressive Web App. 

Czy warto wdrożyć Magento PWA?

W tym artykule pojawiło się już wiele zalet technologii Magento PWA. Jednak jeśli nie jesteś jeszcze w 100% przekonany, że warto w nią zainwestować, mamy dla Ciebie kilka ciekawych przykładów, które mogą Cię do tego nakłonić.

TALLY WEiJL

Ta szwajcarska marka modowa, chcąc odpowiedzieć na potrzeby Gen Z, zdecydowała się na przebudowę swojego e-Commerce i wdrożenie go od nowa w oparciu o postulaty PWA.

Jaki wynik?

Wzrost przychodu z mobile o 131%

Współczynnik konwersji wyższy o 140%

Liczba odsłon wzrosła o ponad 45%

KUBOTA

Polska marka fashion, kojarząca się z klapkami na rzep z lat 90-tych. W 2018 roku została reaktywowana podbijając serca Polaków. Po starcie na jednej z platform SaaS zdecydowała się na zmianę silnika na Magento 2 i połączenie go z technologią PWA.

Czy się opłacało? Chyba tak ;).

Współczynnik konwersji nowego sklepu wzrósł aż o 250%

BRIJU

Marka z ponad stuletnią tradycją jubilerską, posiadająca ponad 70 salonów w całej Polsce, swój sklep internetowy postanowiła wdrożyć na silniku Magento PWA, łącząc go ze ScandiPWA.

Efekt?

Trzycyfrowy wskaźnik wzrostu rok do roku.

Jeśli chcesz dowiedzieć się więcej o wdrożeniu sklepu Briju.pl na Magento PWA, przeczytaj nasze case study.

Magento PWA – podsumowanie

Wygląda na to, że e-Commerce oparty o Magento 2 PWA się opłaca. Dlatego też jest to rozwiązanie, które bardzo chętnie polecamy naszym klientom. Szybkość ładowania, praca w trybie offline, powiadomienia push, to tylko kilka z zalet strony PWA, które możesz wykorzystać na korzyść swojego biznesu. W Internecie możesz znaleźć setki case study, które pokazują jak duża wartość idzie za tą technologią. Nie da się też ukryć, że Magento PWA odpowiada na potrzeby współczesnego użytkownika internetu. A o to właśnie chodzi. Zadowolony użytkownik to już połowa sukcesu Twojego e-Commerce.