PWA (Progressive Web App)
Nowa jakość tworzenia sklepów internetowych.

Po raz pierwszy w historii polskiego internetu w 2018r. ilość wejść na witryny internetowe w większej mierze była generowana z urządzeń mobilnych niż z komputerów stacjonarnych.
Posiadanie nowoczesnego, sprawnie działającego na urządzeniach mobilnych sklepu internetowego,
stało się nie tylko dobrą praktyką, a koniecznością.

M-commerce

Coraz większy zasięg i szybkość działania internetu mobilnego umożliwia internautom coraz łatwiejszy i prawie nieograniczony dostęp z poziomu urządzeń przenośnych do ofert sklepów internetowych. W połączeniu z coraz nowocześniejszymi i wydajniejszymi urządzeniami mobilnymi (smartfony, tablety), z których korzystamy na co dzień sprawia, że coraz częściej transakcje w sklepach internetowych przeprowadzane są za ich pośrednictwem.

Już ponad 50% wejść na strony internetowe odbywa się
za pośrednictwem urządzeń przenośnych.
Gemius Polska

Zgodnie z raportem opublikowanym przez Gemius / PBI liczba internautów w Polsce w styczniu 2019 r. wyniosła ogółem 28,6 mln. w tym miesiącu 23,3 mln internautów połączyło się z siecią internetową za pomocą komputerów osobistych i laptopów. Natomiast aż 24,1 mln osób korzystało z internetu za pomocą urządzeń mobilnych (smartfony i tablety).

Wykres użytkowników korzystających z internetu z komputerów stacjonarnych i urządzeń mobilnych

Urządzenia mobilne są wykorzystywane przez konsumentów zarówno do przeglądania ofert e-sklepów sklepu, opinii o produktach, terminowości dostaw, obsłudze zwrotów i reklamacji, jak i do przeprowadzenia procesu zakupowego. W obecnych czasach aby działać nowocześnie w e-commerce i maksymalizować sprzedaż nie można pominąć korzyści sprzedażowych jakie daje m-commerce (obszar handlu internetowego, w którym główną rolę odgrywają urządzenia mobilne). Kluczową wręcz rolę odgrywa w tym zakresie dostosowanie sklepu internetowego do możliwości i ograniczeń urządzeń mobilnych, z których korzystają internauci. Poniżej opisujemy możliwe rozwiązania do wprowadzenia w procesie tworzenia sklepu internetowego.

Aplikacje mobilne

Aplikacje mobilne

Pierwszym rozwiązaniem jest stworzenie dodatkowej wersji sklepu internetowego dedykowanej smartfonom i tabletom w postaci aplikacji mobilnej. Stosując to rozwiązanie system e-commerce będzie się składać z dwóch obszarów z tradycyjnego e-sklepu, którego strony będzie można przeglądać na przeglądarkach internetowych komputerów oraz laptopów oraz z aplikacji mobilnej przeznaczonej dla urządzeń przenośnych.

Z całą pewnością zastosowanie takiego rozwiązania e-commerce zapewni rozszerzenie potencjalnej grupy klientów e-sklepu o segment mobile i generować będzie pozytywne odczucia z korzystania ze sklepu internetowego. Pozwoli również na rozszerzenie możliwości decyzyjnych związanych z zakupem oraz brak ograniczeń związanych z koniecznością dokonywania transakcji na ekranie komputera ( np. rozpoczęcie procesu transakcyjnego za pomocą komputera stacjonarnego, a sfinalizowanie za pomocą smartfona).

Podstawową i znaczącą wadą tego rozwiązania wysokie koszty początkowe związane głównie z koniecznością wyprodukowania sklepu internetowego i jednocześnie jego wersji na urządzenia mobilne w postaci aplikacji mobilnej. Poza wysokimi kosztami początkowymi dochodzą również znaczne wydatki związane z utrzymaniem, wprowadzaniem treści do obu systemów oraz zarządzaniem obydwoma wersjami sklepu internetowego.

Responsywne
sklepy internetowe

Drugim, mniej kosztownym rozwiązaniem jest wykonanie sklepu internetowego w układzie responsywnym (RWD). RWD jest techniką projektowania stron internetowych, w taki sposób, aby ich rozmiar, układ i wygląd automatycznie dopasowywał się do okna urządzenia, w którym są wyświetlane, a więc przeglądarki, ekranu tableta czy smartfona.

Tak wykonana witryna internetowa postrzegana jest jako bardziej czytelna oraz uniwersalna zarówno podczas wyświetlania na komputerach stacjonarnych, jak i urządzeniach mobilnych. Zarówno na urządzeniach stacjonarnych jak i na urządzeniach przenośnych korzystamy ze sklepów internetowych za pomocą przeglądarek internetowych. W przeciwieństwie do modelu e-commerce, w którym stosujemy dwa systemy (tradycyjny i aplikację mobilną) w przypadku zastosowania RWD mamy tylko jeden system obsługujący urządzenia stacjonarne i mobilne jednocześnie. Wprowadzenie tego rozwiązania pozwala zatem na ograniczenie kosztów administrowania sklepem. Eliminuje również możliwość wystąpienia różnic międzysystemowych , co może mieć miejsce w przypadku zastosowania dwóch systemów sklepowych. Również rozwój funkcjonalności platformy sprzedażowej odbywa tylko w obrębie jednego rozwiązania.

Zastosowanie RWD posiada również wady. Podstawową jest często zbyt długi czas wczytywania się poszczególnych stron sklepu internetowego na przeglądarkach urządzeń mobilnych. Wynika to z:

  • skracają, automatyzują i usprawniają przebieg transakcji biznesowych,
  • mogą być zintegrowane z zewnętrznymi systemami, programami finansowo-księgowymi i magazynowo-sprzedażowymi, CRM, ERP które dobierane na bazie szczegółowej analizy potrzeb klienta zmniejszają koszty transakcji operacyjnych,
  • uwzględniają maksymalną użyteczność oraz wymierny zysk dla zintegrowanych z nią podmiotów biznesowych, podlegają analizie efektywności, a także są stale optymalizowane.
53% użytkowników mobilnych nie wchodzi na stronę internetową,
która ładuje się dłużej niż 3 sekundy.
90% użytkowników mobilnych wychodzi ze sklepu internetowego,
w którym czas ładowania się kolejnych podstron wynosi 5 sekund.
Google/SOASTA Research

Prędkość to przychód. Zbyt długo ładujące się strony na urządzeniach mobilnych oznaczają znaczący spadek poziomu sprzedaży w e-sklepach. Według ekspertów każda sekunda opóźnienia w procesie ładowania strony internetowej może powodować nawet 7% spadek wskaźnika konwersji (Źródło: Neil Patel, How Loading Time Affects Your Bottom Line). Poniżej prezentujemy wpływ wydłużonego w stosunku do standardowo przyjętego czasu ładowania stron sklepu na utratę potencjalnych przychodów ze sprzedaży.

Szybkość wczytywania się stron na urządzeniach mobilnych vs poziom przychodów ze sprzedaży

Jeżeli strony sklepu ładują się na smartfonie np. z opóźnieniem 6 sekund w stosunku do akceptowalnego czasu to sklep może generować przychody ze sprzedaży aż o 42% niższe (5.800 zł) np. w skali miesiąca od potencjalnie możliwych do uzyskania tj. 10.000 zł miesięcznie. W skali roku oznacza to utratę potencjalnych przychodów ze sprzedaży w kanale mobilnym aż o 50.400 zł.

Czy istnieje zatem rozwiązanie, które posiada zalety dwóch poprzednich i jednocześnie pozbawione jest ich wad?

Progressive Web Apps

Z pomocą przychodzi stosunkowo nowe rozwiązanie, a mianowicie sklepy internetowe tworzone w postaci webowej aplikacji progresywnej – PWA (Progressive Web App). PWA to strona WWW, która wygląda i działa tak, jak zwykła aplikacja mobilna lub desktopowa.

Progresywne działanie aplikacji sklepowej polega na tym, że w zależności od możliwości technicznych urządzenia, z którego w danym momencie korzysta kupujący, a co za tym idzie z wersji stopnia zaawansowania technologicznego przeglądarki internetowej, za pomocą, której przegląda strony e-sklepu, aplikacja PWA będzie oferować mu więcej funkcji i możliwości.

Trzy filary Progressive Web Apps
  • solidność – strona ładuje się niemal natychmiastowo i działa nawet w przypadku braku połączenia z internetem,
  • szybkość – strona reaguje błyskawicznie na wszelkie działania przeprowadzane na niej przez użytkownika,
  • wrażenie „natywności” – strona daje pełne wrażenie pracy z aplikacją natywną, do tego stopnia, że można ją zainstalować urządzeniu mobilnym, a jej skrót w postaci ikony umieszczony zostanie na ekranie startowym urządzenia w ten sam sposób jak czyni to aplikacja aplikacji natywna. Ponadto po otwarciu strona pracuje w trybie pełnoekranowym i umożliwia wysyłanie notyfikacji „push”.

Korzyści zastosowania PWA z punkty widzenia właściciela sklepu internetowego:

JEDEN SYSTEM DPRZEDAŻOWY DLA
URZĄDZEŃ STACJONARNYCH
ORAZ PRZENOŚNYCH

Posiadanie sklepu internetowego w PWA zwiększa wachlarz możliwości sprzedażowych sklepu o kanał m-commerce.

NIŻSZY KOSZT TWORZENIA
I ROZWOJU SYSTEMU

Podobnie jak dla e-sklepów tworzonych w technologii RWD w przypadku systemów sprzedażowych projektowanych w technologii Progressive Web App platformę sprzedażową buduje się jednocześnie dla systemów stacjonarnych oraz mobilnych.

NIŻSZE KOSZTY UTRZYMANIA
I ADMINISTROWANIA E-SKLEPEM

W przypadku zbudowania sklepu internetowego w technologii PWA otrzymujemy jeden system, który nie wymaga podejmowania oddzielnych działań na potrzeby użytkowników komputerów stacjonarnych oraz urządzeń przenośnych.

WYSOKI POZIOM WYSZUKIWANIA SKLEPU INTERNETOWEGO NA URZĄDZENIACH MOBILNYCH

Sklep internetowy wykonany w technologii PWA jest indeksowany w systemach wyszukiwawczych np. w wyszukiwarce Google (aplikacje mobilne nie posiadają tej cechy) . Wyszukiwanie e-sklepu PWA w wyszukiwarce podlega zatem takim samym prawom jak tradycyjnego sklepu internetowego.

DZIAŁANIE OFFLINE

Strona internetowa wykonana w standardzie PWA wczytuje się niezależnie od stanu połączenia z internetem. Jest to możliwe dzięki gromadzeniu i przechowywaniu danych w pamięci urządzenia. Dane są pozyskiwane podczas każdej wizyty w serwisie, ale również mogą być pobierane w tle, tak aby zaoferować użytkownikowi pewne ścieżki zakupowe nawet bez dostępu do sieci. W trybie offline użytkownik nie będzie miał oczywiście dostępu do wszystkich treści i funkcjonalności, jednak czekając na odzyskanie połączenia będzie mógł np. wrócić do kart produktów, które go interesują, lub przejrzeć ponownie zawartość koszyka.

DŁUŻSZY CZAS PRZEBYWANIA I NTERNAUTY
NA STRONACH SKLEPU INTERNETOWEGO

Łatwość i przyjemność z poruszania się po stronach sklepu za pomocą urządzeń przenośnych jest ogromna. Wpływa to na zdecydowanie dłuższy czas jaki internauta jest w stanie poświęcić na przeglądanie oferty sklepu za pomocą smartfona korzystając z PWA niż w przypadku stron przeglądanych za pomocą mobilnej przeglądarki internetowej.

WSPARCIE DLA SEO

Na urządzeniu mobilnym sklep internetowy wykonany w PWA do złudzenia przypomina aplikację mobilną ale przecież w istocie nią nie jest. Oznacza to, że tak stworzony sklep internetowy korzysta ze wszystkich zalet „tradycyjnego e-sklepu”. Posiada drzewo serwisu a więc i specyficzną strukturę wszystkich stron. Do tego każda z nich ma własny, unikalny adres URL. Podlega zatem w 100% wszystkim dobrym praktykom SEO.

WZROST WSPÓŁCZYNNIKA KONWERSJI

Szybkość ładowania poszczególnych widoków e-sklepu na urządzeniach mobilnych oraz pozytywne doznania z korzystania z funkcjonalności sklepu, które nie występują w innych rozwiązaniach powodują znaczny wzrost poziomu dokonywanych zakupów wzrost poziomu lojalności klienta wobec marki.

BRAK RÓŻNIĆ W TREŚCI POMIĘDZY WERSJAMI

W przypadku sklepów internetowych wykonanych PWA treści wprowadzamy tylko jeden raz bez konieczności ponownego wprowadzania do aplikacji mobilnej. Nie występuje więc ryzyko wystąpienia różnic międzysystemowych

POWIADOMIENIA PUSH

W przypadku platform sprzedażowych zbudowanych w PWA możliwe jest wysyłanie użytkownikom powiadomień, identycznie jak w przypadku aplikacji mobilnych. Poszerzony zatem może zostać kanał komunikacji z Klientami sklepu internetowego o kolejną funkcjonalność

Korzyści zastosowania PWA z punkty widzenia właściciela sklepu internetowego:

ŁATWOŚĆ W WYSZUKIWANIU SKLEPU
W WYSZUKIWARKACH (NP. GOOGLE)

Sklep internetowy wykonany w systemie PWA chociaż działa jak aplikacja mobilna, to nie musi być pobierany z platform z aplikacjami takich jak czy AppStore czy Google Play. Można z niego korzystać albo przez przeglądarkę internetową albo jak z aplikacji.

SZYBKI PROCES INSTALACJI

Aplikacje PWA instalowane są bezpośrednio z pozycji strony internetowej bez konieczności korzystania z instalacji inicjowanej w platformach sklepowych AppStore lub Google Play. W przypadku gdy korzystamy np. ze smartfona wystarczy otworzyć sklep internetowy wykonany w standardzie PWA w przeglądarce internetowej. Po chwili pojawi się komunikat o możliwości dodania do ekranu startowego smartfona aplikacji sklepu internetowego. Zaakceptowanie komunikatu kończy błyskawiczny proces instalacji.

MAŁY ROZMIAR PWA

Bardzo istotne z punktu widzenia użytkownika jest fakt, ze aplikacje PWA wymagają o wiele mniej miejsca na dysku niż tradycyjne aplikacje mobilne (np. Twitter PWA – 0,14 Mb, aplikacja Twitter dla systemu iOS aż 111,1 Mb)

SZYBKI I ŁATWY DOSTĘP Z POZIOMU
URZĄDZENIA PRZENOŚNEGO

Wejście na platformę sprzedażową wykonaną w technologii PWU z poziomu smartfona odbywa się identycznie jak przy standardowej aplikacji mobilnej tj. przez kliknięcie na ikonę sklepu znajdującą się na ekranie startowym smartfona. Nie wymaga więc otwarcia najpierw przeglądarki internetowej, a następnie prawidłowego wpisania w niej adresu e-sklepu.

AUTOMATYCZNE AKTUALIZACJE

Proces aktualizacji i synchronizacji danych w aplikacji PWA odbywa się w tle bez konieczności angażowania w tym procesie użytkownika. (nawet gdy użytkownik nie jest w danym momencie aktywny). Oznacza to, że zawsze korzystamy z aktualnej wersji oprogramowania.

DZIAŁANIE OFFLINE

W przypadku utraty sygnału internetowego nie traci się wprowadzonych informacji np. wypełniając długie formularze lub dokonując wielopoziomowych wyborów.

POZYTYWNE DOŚWIADCZENIA

Sprawność działania sklepu internetowego wykonanego w technologii PWA jest identyczna niezależnie czy korzystamy z komputera, laptopa, smartfona, tabletu, czy innego urządzenia. Nie ma również znaczenia jaki system operacyjny mamy na danym urządzeniu.

Podsumowanie

Analizując możliwe do wdrożenia w obszarze e-commerce rozwiązania Progressive Web Apps wydaje się zdecydowanie najsensowniejszym rozwiązaniem zarówno pod względem poziomu koniecznych do poniesienia nakładów na jego wdrożenie, bieżącą administrację i dalszą aktualizację, jak i pod względem wygody użytkowania przez klientów e-sklepów i co za tym idzie jego pozytywnego odbioru . Według ekspertów zastąpienie aplikacji natywnych PWA to nawet 10-krotna oszczędność jeżeli chodzi o koszt pozyskania użytkownika. Właściciele sklepów internetowych wykonanych w PWA zamiast inwestować w rozwój i utrzymanie kilku natywnych aplikacji, mogą skupić się na utrzymaniu i rozwoju jednej, która dostarczy użytkownikom najlepsze możliwe doświadczenie.

Będzie również idealnym rozwiązaniem wszędzie tam gdzie nie wymaga się bezpośredniego połączenia sklepu internetowego z niedostępnymi dla przeglądarki mobilnej funkcji urządzeń przenośnych np. do numeru telefonu, książki kontaktów, kalendarza, zdjęć i innych.

Przykłady pozytywnego wpływu zastosowania PWA:

Alibaba

Międzynarodowy chiński koncern specjalizujący się w handlu elektronicznym, handlu detalicznym, Internecie i technologii.

Efekty po wdrożeniu PWA:

  • wzrost konwersji w sieci mobilnej o 76%,
  • w skali miesiąca14% więcej aktywnych użytkowników na iOS i 30% na Androidzie,
  • 4-krotnie wyższy współczynnik interakcji urządzeń mobilnych (dodaj do ekranu głównego)
źródło

ALIEXPRESS

To serwis internetowy umożliwiający chińskim firmom bezpośrednią sprzedaż wysyłkową swoich produktów na rynki całego świata.

Efekty po wdrożeniu PWA:

  • wzrost konwersji wśród nowych użytkowników o 104%,
  • 2-krotnie więcej stron odwiedzanych w trakcie jednej sesji
  • 74% wzrost średniego czasu trwania sesji
źródło

GEORGE

George to znana marka odzieżowa w Wielkiej Brytanii (george.com)

Efekty po wdrożeniu PWA:

  • 3,8 razy szybszy czas ładowania stron,
  • 2 razy niższy współczynnik odrzuceń,
  • 31% wzrost współczynnika konwersji
  • 20% większe zaangażowanie podczas jednej wizyty (o 20% więcej obejrzanych stron w czasie jednej wizyty)
  • 28% dłuższy czas przebywania internauty w sklepie internetowym na urządzeniach mobilnych.
źródło

DEBENHAMS

Platforma zakupowa brytyjskiej sieci domów towarowych, zajmującej się sprzedażą detaliczną ubrań, kosmetyków, sprzętu RTV i AGD, oraz mebli (https://www.debenhams.com/).

Efekty po wdrożeniu PWA:

  • 40% wzrost przychodów z urządzeń mobilnych
  • 20% wzrost poziomu konwersji
  • 2 razy szybsze ładowanie stron mobilnych
źródło