PWA – co to jest i jak rozwiązuje problemy w e-commerce?

Szacunkowy czas na przeczytanie artykułu: 13 minut

PWA jest rozwiązaniem, które może okazać się pomocne w wielu e-biznesach. Zwłaszcza w tych, które nie chcą tworzyć swojej aplikacji, ale chcą ułatwić użytkownikom przeglądanie strony www na komputerach, a także na urządzeniach mobilnych. Co to jest PWA? Jak może pomóc Twojemu e-commerce rozwiązać różnego rodzaju problemy, z którymi się mierzysz? O tym przeczytasz w tym artykule.

Czym jest PWA?

PWA (z ang. Progressive Web Apps) – czyli progresywne aplikacje webowe. Pierwszą firmą, które rozpoczęła nad nimi pracę było Google. Było to w roku 2015. W jej ślady poszła firma Microsoft, która również dostrzegła potencjał tego rozwiązania.

Progresywne aplikacje webowe są stronami mobilnymi i ładują się jak zwykłe strony www. Z pozoru mogą jednak przypominać natywne aplikacje, gdyż pod względem wyglądu i funkcjonowania są do nich bardzo podobne.

  • Tak samo jak zwykłe aplikacje pobierane na telefon wyświetlają powiadomienia (nawet gdy progresywna aplikacja webowa jest zamknięta).
  • Mogą wykorzystywać funkcje urządzenia, na którym się znajdują, np. geolokalizację, czy aparat. Mają jednak też ograniczenia, gdyż niektóre funkcje natywne są niedostępne.
  • Działają w tle oraz w trybie off-line (gdy urządzenie nie ma połączenia z Internetem).
  • PWA podobnie jak standardowe aplikacje również należy pobrać na urządzenie, z tą różnicą, że proces ten przebiega o wiele szybciej i jest o wiele prostszy. Dodatkowo  pobieranie nie odbywa się poprzez sklep z aplikacjami, tylko bezpośrednio ze strony sklepu.
  • Progresywne aplikacje webowe, podobnie jak te klasyczne, można zapisać na ekranie swojego telefonu. Dzięki temu możemy mieć je zawsze pod ręką i w momencie, gdy będziemy ich potrzebować – szybko uruchomić.
  • Gdy PWA zostanie już uruchomiona, tak samo jak standardowa aplikacja, wyświetlana jest na całym ekranie (nie ma interfejsu internetowej przeglądarki).

Progresywne aplikacje webowe napisane są języku webowym (JavaScript + frameworki). W technologii mobilnej są bardzo dużym trendem, który wciąż mocno się rozwija.

Wytyczne, które musi spełniać progresywna aplikacja webowa, by działać poprawnie:

  • Każda strona w PWA powinna posiadać swój własny URL.
  • Szyfrowana komunikacja z serwerem (HTTPS).
  • Układ każdej strony oraz jej wygląd muszą automatycznie dostosowywać się do rozdzielczości urządzenia, na którym jest wyświetlana, a także do wielkości jego wyświetlacza.
  • Działanie w trybie offline, tj. PWA musi uruchamiać się zawsze, nawet gdy nie ma połączenia z siecią (może to być np. komunikat informujący o konieczności nawiązania połączenia z Internetem).
  • Musi być dołączony plik manifestu w formacie JSON, w którym znajdują się takie informacje jak: nazwa oraz ikona, dzięki któremu system może prawidłowo zainstalować aplikacje.

Obsługa PWA z punktu widzenia użytkownika jest bardzo prosta. W przypadku, gdy wejdzie on na stronę, na której wdrożona jest technologia progresywnej aplikacji webowej, pojawi się komunikat z propozycją zainstalowania PWA. Po zaakceptowaniu jej, na urządzeniu usera zostanie dodana ikona strony/sklepu. Wystarczy na nią kliknąć (tak jak na ikonę każdej innej, tradycyjnej aplikacji), a uruchomi się strona/sklep. A co w przypadku, gdyby użytkownik chciał usunąć PWA ze swojego urządzenia? Proces usuwania odbywa się tak samo, jak w przypadku zwykłych aplikacji – wystarczy przenieść ją do kosza i gotowe!

PWA niesie korzyści nie tylko użytkownikom, ale także samym e-biznesom. Pomaga im rozwiązać wiele ważnych problemów.

PWA wspiera e-commerce

Responsywne aplikacje webowe mają kilka cech, które okazują się być bardzo cenne z punktu widzenia e-commerce. Wspierają prowadzone przez firmę działania, ale także pomagają rozwiązać problemy, z którymi się ona boryka.

  • Jak zwiększyć lojalność Klientów?
    Dzięki temu, że PWA mogą być instalowane na ekranie urządzenia użytkownika, przyczyniają się one do zwiększania jego lojalności. Dany użytkownik, który zainstalował na swoim smartfonie czy tablecie daną aplikację widzi ją wielokrotnie w ciągu dnia, w trakcie korzystania z urządzenia. Sprawia to, że utrwala on sobie ją w pamięci – zarówno samą nazwę aplikacji, jak i przypisane do niej logo. Aplikacja zaczyna kojarzyć mu się z konkretną kategorią produktów. W przypadku chęci zakupu produktów właśnie z tej kategorii, istnieje duże prawdopodobieństwo, że skorzysta on właśnie z zainstalowanej u siebie aplikacji.

    Istnieją sklepy, w których dany użytkownik bardzo często dokonuje zakupów, przez co są one mu bardzo dobrze znane. Istnieją również takie, w których dokonuje zakupów sporadycznie, raz na jakiś czas i nie zawsze pamięta, jak one się nazywają. Oferując danemu użytkownikowi PWA, którą będzie mógł dodać na ekranie własnego urządzenia, minimalizujemy prawdopodobieństwo zapomnienia przez niego nazwy naszego sklepu. Mając ją zawsze na wyciągnięcie ręki, będzie mógł w prosty sposób do nas wrócić.

    Możliwość łatwego powrotu do danego sklepu poprzez PWA zainstalowaną na ekranie urządzenia jest istotna zarówno w przypadku branży B2C, jak i B2B. W przypadku tej drugiej, bardzo często usługodawcy zamawiają materiały montażowe w jednym, znanym im już sklepie. Fakt, że do danego sklepu mogą wrócić po prostu poprzez kliknięcie w logo aplikacji na swoim urządzeniu jest dla nich niesamowitym ułatwieniem. PWA jest także ułatwieniem dla kupujących z branży B2C, na przykład rodziców. Na przykład w przypadku opieki nad dziećmi istnieje potrzeba regularnego nabywania różnego rodzaju produktów, tj. kosmetyków do pielęgnacji, jednorazowych pieluch czy ubrań. Możliwość sprawnego robienia zakupów poprzez PWA będzie idealnym rozwiązaniem dla bardzo zajętych i (bardzo) zmęczonych rodziców małych dzieci.

    Wszystko to sprawia, że responsywne aplikacje webowe przyczyniają się do lojalizowania klientów. Należy jednak pamiętać o tym, że jeżeli dany użytkownik nie zna Twojej marki, prawdopodobnie nie zainstaluje na swoim urządzeniu aplikacji i nie dokona zakupu. Należy więc najpierw zapoznać go z brandem, a dopiero w kolejnym kroku zaproponować instalację PWA.

    Cechą wyróżniającą progresywne aplikacje webowe jest także szybkość ich działania. Użytkownicy w znacznie szybszym czasie mogą dokonać zakupu, tj. wyszukiwać potrzebne produkty z oferty, dodawać je do koszyka, etc. Jeżeli cały proces przebiegnie bezproblemowo, zwiększasz szansę, że dany użytkownik wróci do Twojego sklepu.
  • Szybsze wczytywanie stron, czyli jak zmniejszyć współczynnik odrzuceń?
    Badania Google pokazują, że w przypadku stron internetowych, które ładują się ponad 10 sekund, prawdopodobieństwo ich zamknięcia przez użytkownika zwiększa się aż o 123%! Tak więc jak sam widzisz, to z jaką szybkością ładuje się strona jest niezwykle istotne. Szybko wczytująca się strona jest znacznie lepiej odbierana przez usera, znacznie chętniej dokona na niej zakupu. Bounce rate (współczynnik odrzuceń) w przypadku takich stron jest też znacznie niższy.

    Progresywne aplikacje webowe przyspieszają wczytywanie się stron – zatem przyczyniają się również do obniżania współczynnika odrzuceń. Jednak nie ma to zastosowania w przypadku użytkowników, którzy jeszcze nie mają zainstalowanej u siebie PWA. W ich przypadku strona będzie ładowała się w standardowym czasie. Dlatego też należy wcześniej zachęcić usera, odwiedzającego stronę, do pobrania na swoje urządzenie aplikacji. Pamiętając jednak, by wyskakujące na niej komunikaty nie były irytujące.

    Kupujących do zainstalowania progresywnej aplikacji webowej można zachęcać również w wiadomościach wysyłanych do nich po dokonaniu zakupu. W treści takiej wiadomości warto wyszczególnić korzyści płynące z dostępu do tego typu aplikacji. Użytkownicy, którzy zrobili u Ciebie zakupy będą już kojarzyli markę, zatem chętniej zainstalują na swoim urządzeniu Twoje PWA.
  • Jak zniwelować skutki braku połączenia z Internetem w e-commerce?
    Pojawiające się wszelkiego rodzaju komunikaty informujące o błędach są bez wątpienia częstym powodem irytacji wśród użytkowników. Pojawiają się one, gdy łącze jest bardzo wolne lub gdy urządzenie całkowicie nie ma połączenia z siecią. Pomocne w takich sytuacjach okazują się być responsywne aplikacje webowe. A to ze względu na fakt, że posiadają one zapisane wewnątrz, wczytywane domyślnie dane. Reszta danych doczytywana jest w momencie, gdy urządzenie nawiąże już połączenie z Internetem. Wszystko to sprawia, że czas reakcji jest zdecydowanie szybszy, nawet gdy połączenie z siecią jest bardzo słabe. Wpływa to na ogólne zadowolenie użytkowników.

    A co w przypadku, gdy urządzenie usera w ogóle nie ma połączenia z Internetem? W takiej sytuacji responsywne aplikacje webowe wyświetlą tę treść serwisu, która jest dostępna off-line. Firma samodzielnie może zadecydować, co to będzie. Użytkownikom mogą być wyświetlane np. dane kontaktowe firmy lub informacja, w jaki sposób mogą oni alternatywnie złożyć zamówienie. Dla osób korzystających z aplikacji będzie to czytelny komunikat, że dana sytuacja nie wynika z awarii lub jakiegoś błędu ze strony firmy, ale po prostu z braku połączenia z siecią.

Wypełnianie luki konwersji mobilnej za pomocą PWA
Luka konwersji mobilnej (z ang. mobile conversion gap), nazywana także “dziurą mobilną”, to nic innego jak różnica pomiędzy konwersją z komputerów stacjonarnych a konwersją z urządzeń mobilnych. Te drugie aktualnie są bardzo często wykorzystywane do wejścia na daną stronę, ale transakcje ostatecznie finalizowane są komputerach lub laptopach. Powoduje to, że pomimo wysokiego wskaźnika wejść na stronę na urządzeniach mobilnych, współczynnik konwersji jest na nich niski. Z kolei na komputerach stacjonarnych pomimo niskiego wskaźnika wejść na stronę, współczynnik konwersji jest wysoki. Obrazuje to grafika poniżej:

  • Na jej podstawie można zaobserwować, że jeżeli chodzi o urządzenia mobilne to 57% czasu, który userzy spędzają na stronie pochodzi właśnie z nich. Generują one jednak niski procent konwersji, bo tylko ok. 16%. Natomiast w przypadku komputerów stacjonarnych – tylko 43% czasu spędzonego przez użytkowników pochodzi właśnie z tego źródła. Generuje jednak bardzo wysoki procent konwersji, aż 86% Powoduje to powstanie “dziury mobilnej”.

    Można by się zastanawiać, skąd wynika różnica między konwersją a czasem, który użytkownicy spędzają na stronie. Teoretycznie oba te wskaźniki powinny być zbliżone – zarówno jeżeli chodzi o komputery stacjonarne, jak i o urządzenia mobilne. Problem ten spędza sen z powiek coraz większej liczbie e-biznesów, starających się znaleźć rozwiązanie i wypełnić tę lukę.

    Jeżeli spojrzymy na specyfikę obu urządzeń – komputerów stacjonarnych i urządzeń mobilnych – możemy wnioskować, z czego wynika mobile conversion gap. Stacjonarne komputery w dalszym ciągu są odbierane jako wygodniejsze do robienia zakupów przez Internet, przez co użytkownicy w tym celu sięgają po nie częściej niż na przykład po smartfony. Treści wyświetlone na komputerach stacjonarnych są też odbierane jako bardziej czytelne, bardziej przejrzyste. Dzięki temu osoby z nich korzystające czują większą kontrolę nad wykonywanymi czynnościami.

    Responsywne aplikacje webowe są rozwiązaniem, które może pomóc wypełnić lukę konwersji mobilnej, gdyż zapewniają użytkownikom lepsze doświadczenia zakupowe. W momencie, gdy klient poprzez tradycyjną stronę złoży swoje pierwsze zamówienie, warto wyświetlić mu komunikat o dostępności PWA. Z racji tego, że dany użytkownik będzie już znał sklep, daną markę, jej asortyment oraz sposób, w jaki funkcjonuje – znacznie chętniej pobierze aplikację na swoje urządzenie. W momencie, gdy będzie potrzebował znów złożyć zamówienie, istnieje duże prawdopodobieństwo, że zrobi to właśnie poprzez aplikację na swoim smartfonie. PWA znacznie ułatwiają ten proces. Z racji tego, że są dostępne zawsze pod ręką na przenośnym urządzeniu użytkownika, może on zrobić zakupy w każdym momencie i w każdych okolicznościach (nawet będąc poza domem). Wystarczy, że otworzy aplikację i już może robić zakupy. PWA może sprawić, że osoby, które dotychczas swoje zakupy finalizowały na komputerach stacjonarnych, przerzucą się całkowicie na mobile – zarówno jeżeli chodzi o przeglądanie oferty sklepu internetowego, jak i dokonywanie w nim zakupów.

Najpopularniejsze aplikacje wykorzystujące PWA

Aplikacji, które wykorzystują PWA jest aktualnie masa. Wśród nich można wymienić między innymi:

  • Facebook (facebook.com),
  • Instagram (instagram.com),
  • Gmail (gmail.com),
  • Spotify (spotify.com),
  • YouTube (youtube.com),
  • TikTok (tiktok.com),
  • Uber (uber.com),
  • AliExpress (aliexpress.com),
  • Pinterest (pinterest.com),
  • Tinder (tinder.com).

Ograniczenia PWA w e-commerce

Jak można się dowiedzieć z wcześniejszej części artykułu, progresywne aplikacje webowe mają całą masę zalet. Niestety, tak jak wszystko, mają też kilka ograniczeń. Wśród nich z pewnością należy zwrócić uwagę na fakt, że w PWA nie wszystkie dane można zapisać, a następnie wczytać bez połączenia z siecią. W aplikacji mogą być zapisane wszystkie strony i informacje, które użytkownicy mogą wyświetlić off-line. Jednak te dane, w momencie wyświetlenia przez usera, mogą być już nieaktualne. Weźmy na przykład ceny produktów – te mogą zmieniać się bardzo często. W przypadku, gdy zostaną one zapisane w aplikacji, a następnie wczytane off-line, może zdarzyć się, że użytkownikowi pokażą się nieaktualne już ceny. Dlatego też, by nie dopuścić do takich sytuacji niektóre informacje, takie jak na przykład ceny czy dostępność towarów, powinny być każdorazowo pobierane ze sklepu internetowego, a do tego potrzebne jest już łączenie się aplikacji z serwerem.

Przedstawione wyżej ograniczenie nie jest jednak ograniczeniem, które całkowicie dyskredytuje PWA. Bowiem kupujący, który w danym momencie nie ma połączenia z siecią, może dodać wybrane przez siebie produkty do koszyka, a sam zakup sfinalizować wtedy, gdy będzie miał już dostęp do Internetu.

PWA czy aplikacja mobilna – co wdrażać w e-commerce?

Przed tym pytaniem staje coraz większa ilość osób prowadzących swoje e-biznesy. Zestawienie cech obu aplikacji – PWA oraz mobilnej – zdecydowanie przemawia na korzyść progresywnych aplikacji webowych. Dlaczego?

  • Aplikacje te pozwalają na korzystanie z zasobów urządzenia użytkownika, a wśród nich między innymi z: geolokalizacji, dostępu do aparatu czy powiadomień push.
  • PWA ma coraz więcej funkcji, które są właściwe dla klasycznych aplikacji, ma dostęp do API telefonu.
  • Zestawiając koszty wdrożenia obu aplikacji – PWA jest znacznie tańsza we wdrożeniu.
  • PWA jest o wiele prościej zaktualizować niż aplikację mobilną.
  • Plusem progresywnych aplikacji webowych jest także ich dostępność. PWA mogą być instalowane na telefonie z dowolnym systemem operacyjnym. Nie ma konieczności tworzenia oddzielnych wersji aplikacji, dedykowanych dla konkretnych systemów.

Tak więc jeżeli szukasz rozwiązania, które pomoże Ci wypełnić lukę konwersji mobilnej, czy na przykład zwiększyć lojalność kupujących, rozważ wdrożenie u siebie progresywnej aplikacji webowej. Jest to trend, za którym zdecydowanie warto podążać.

Interesuje Cię temat PWA? Chciałbyś wiedzieć, jak progresywne aplikacje webowe mogą wesprzeć Twój e-biznes? Skontaktuj się z nami. Odpowiemy na Twoje pytania, podpowiemy jak może wyglądać Twój e-commerce.

Przeczytaj więcej

Developer

Wersja 2.31, czyli jak dostosowaliśmy kilka modułów do GA4

Nowa wersja sklepu 2.31 zawiera zestaw bardzo potrzebnych zmian i aktualizacji, m.in. związanych z przejściem na Google Analytics w wersji 4, ale także zrealizowanych w ramach Programu Deweloperskiego.  Oto co zawiera wersja 2.31:

Planujesz wdrożenie e‑commerce B2B lub B2C?

Dostarczamy technologię i know-how