Czym jest PWA? Progressive Web Apps w eCommerce - krótki przewodnik

PWA to:

Niezawodna - Ładuje się błyskawicznie nawet w niepewnych warunkach sieciowych. 

Szybka - szybko reaguje na interakcję użytkownika z jedwabiście gładkimi animacjami i brakiem nierównomiernego przewijania. 

Angażująca - sprawia wrażenie, że aplikacja jest naturalnie zainstalowana na urządzeniu, wywołuje zaangażowanie użytkownika.

Jeśli znaczenie Progressive Web App nadal nie jest dla Ciebie w pełni jasne, zagłębmy się w szczegóły.

Jaki jest cel PWA?

Być może słyszałeś już, że świat ecommerce nigdy nie zmieniał się tak szybko. To był cliche już od jakiegoś czasu, ale dziś jest jeszcze bardziej trafny niż kiedykolwiek. Mobile-first ecommerce jest standardem od lat, a z każdym dniem zyskuje coraz większą popularność. Liczby mówią same za siebie:

• Globalni użytkownicy korzystający z urządzeń mobilnych po raz pierwszy w 2014 roku przyćmili tych z desktopów (comScore).

• Do 2025 roku wartość sprzedaży detalicznej w handlu mobilnym powinna osiągnąć 728,28 mld dolarów i stanowić 44,2% sprzedaży detalicznej w handlu elektronicznym w USA (Business Insider)

• 80% kupujących korzystało z telefonu komórkowego w sklepie fizycznym, aby sprawdzić recenzje produktów, porównać ceny lub znaleźć alternatywne lokalizacje sklepów (Outerbox Design)

Oznacza to, że jeśli Twój biznes nie jest jeszcze w tym miejscu rozwoju, to zdecydowanie najwyższy czas obrać kurs na mobile commerce. Z PWA, którego celem jest umożliwienie transformacji ecommerce mobile-first, zrobisz to w najwygodniejszy i najszybszy sposób oraz przy najniższych kosztach.

Geneza PWA

Google jest ojcem chrzestnym PWA, co nie powinno dziwić. PWA, mieszając UX w stylu webowym i mobilnym, ma szansę zburzyć mur w ogrodzie danych strzeżonym przez Google i Apple. O ile Google może sobie na to pozwolić (bo w jego magazynach danych znajduje się też całkiem spora część światowej sieci), o tyle Apple nie jest tu w tak komfortowej sytuacji.  

Jednak pomysł postawienia w centrum zainteresowania doświadczeń użytkowników mobilnych został tak naprawdę wysunięty przez Steve'a Jobsa ponad dekadę temu. Prezes Apple przedstawił tę koncepcję podczas premiery iPhone'a w 2007 roku, ponieważ na początku mobilnej rewolucji wydawało się oczywiste, że zewnętrzne aplikacje będą sposobem na wykorzystanie popularności rodzącego się urządzenia Apple. Jobs chciał zachęcić deweloperów do ich tworzenia

Był to jednak pomysł krótkotrwały. W lipcu 2008 roku Apple położyło na lodzie koncepcję "uniwersalnych aplikacji". Firma zaprezentowała w zamian App Store, a aplikacje mobilne zaczęły dominować w internecie.

Specyficzne dla PWA podejście musiało poczekać na swój moment, który nadszedł dekadę później. W 2015 roku Frances Berriman i Alex Russell, autorzy terminu PWA, w przedmowie do "Progressive Web Apps", książki Jasona Grigsby'ego, napisali:

"Idea natywnych aplikacji zawsze wydawała się regresem. Murowane ogrody z okropnym wyszukiwaniem, wątpliwym bezpieczeństwem i niekończącym się podatkiem od aktualizacji - czuło się to jak lata 90." 

Berriman i Russell zauważyli nowy typ stron internetowych dostarczających o wiele lepsze doświadczenie użytkownika niż tradycyjne aplikacje internetowe. Nazwali je "Progressive Web Apps". Rok później, podczas konferencji Google IO, Eric Bidelman, starszy inżynier ds. programów deweloperskich, przedstawił Progressive Web Apps jako nowy standard w tworzeniu stron internetowych.  

Na początku 2018 roku Apple wysłało wsparcie dla podstawowych funkcji PWA, ale nadal nakładało pewne ograniczenia dotyczące pojemności pamięci podręcznej czy natywnych powiadomień push. 

1. Krótki time-to-market, rynek mobilny

Progressive Web Apps to najprostszy sposób na przetarcie szlaku do świata mobilnego. To po prostu fakt. Są zbudowane z najbardziej standardowych technologii webowych i można je postawić w ciągu kilku miesięcy. 

Co więcej, dzięki PWA nie musisz tworzyć dwóch osobnych aplikacji dla iOS i Androida, ponieważ działają one na wszystkich rodzajach urządzeń.

2. Wszystkie możliwości dostarczone za jednym razem

Zamiast budować osobno stronę internetową i natywną aplikację mobilną, używając technologii PWA, Twój zespół może zbudować tylko jedną aplikację, która działa płynnie na każdym urządzeniu. Dzięki Progressive Web Apps po prostu nie musisz tworzyć osobnej aplikacji natywnej. Wystarczy dostosować swój storefront za pomocą PWA, aby mieć sklep, który działa płynnie zarówno jako strona internetowa, jak i aplikacja natywna. 

I tak, Progressive Web Apps może zapewnić spójne doświadczenie podobne do aplikacji na każdym urządzeniu. W zależności od możliwości przeglądarki, PWA automatycznie i stopniowo zwiększa ich wbudowane funkcje, aby wyglądać i dać poczucie, że korzystasz z aplikacji natywnej.

3. Optymalizacja efektywności kosztów

W wyniku tych wszystkich możliwości PWA, nie tylko oszczędzasz czas, ale także obniżasz koszty rozwoju. Mówiąc wprost, zamiast rozwijać trzy byty - aplikację dla iOS, Androida i stronę internetową - możesz zbudować tylko jeden, który działa dobrze na każdym z tych urządzeń. 

Ponadto PWA nie wymaga obecności w Google Play Store czy AppStore, co oznacza brak opłat. Jednak jeśli chcesz przesłać swoje PWA do AppStore lub Google Play, z Vue Storefront jest to całkiem łatwe. 

4. Obniżony koszt pozyskania klienta (CAC)

PWA umożliwia budowanie stron internetowych, które proszą użytkownika o zainstalowanie aplikacji bezpośrednio z jego przeglądarki mobilnej. Oznacza to, że użytkownicy nie muszą odwiedzać sklepu z aplikacjami i pobierać natywnej aplikacji, aby móc z niej korzystać. Zwiększa to szanse na to, że będą chcieli z niej skorzystać. 

W przeciwieństwie do aplikacji natywnych, w przypadku aplikacji PWA nie ma również potrzeby pobierania aktualizacji. 

Dzięki temu prawdopodobieństwo skutecznego przeprowadzenia użytkowników ze strony internetowej do aplikacji natywnej jest znacznie większe. To z kolei obniża koszty pozyskania klienta.

5. PWA wykorzystuje moc headless commerce 

PWA wykorzystuje architekturę headless, która daje Twojej firmie wyjątkową zwinność - zarówno w komponowaniu stosu technologicznego eCommerce z najlepszych rozwiązań, jak i w silnej optymalizacji współczynników konwersji. 

Dzięki podejściu headless, frontend Twojego sklepu będzie oddzielony od backendu platformy eCommerce. Oznacza to dużą swobodę dla Twojego zespołu marketingowego - z architekturą headless (jak headless CMS) na pokładzie stają się oni niezależni od deweloperów i mogą łatwo wprowadzać zmiany na własną rękę.

6. Lepsze wyniki SEO

Jedną z głównych zalet PWA jest fakt, że przyspieszają one proces indeksowania aplikacji w Google. Posiadają one adresy URL jak standardowe strony internetowe, co oznacza, że Google jest w stanie je crawlować i indeksować.

Dodatkowo, pełna implementacja Server Side Rendering (SSR) zapewnia crawlerom kompletne dokumenty do indeksowania - jest to szczególnie ważne dla dużych sklepów eCommerce.

Wyszukiwarki lubią płynne, szybkie aplikacje z ograniczoną retencją i promują je wyższym rankingiem w wynikach wyszukiwania. A jak wszyscy wiemy, im wyższa pozycja, tym większa szansa na przykucie uwagi użytkownika. 

Nie wspominając o tym, że wydajność strony zmniejsza bounce rate - metrykę, która również wpływa na to, jak Google ocenia stronę i określa jej pozycję w SERP (Search Engine Results Page). 

7. Zmniejszony współczynnik odrzuceń

Badanie DoubleClick wykazało, że 53% wizyt na stronach mobilnych jest porzucanych, jeśli ładowanie stron trwa dłużej niż 3 sekundy. Stwierdzono również, że średni czas ładowania stron mobilnych przy połączeniach 3G wynosi 19 sekund.

PWA natomiast ładują się błyskawicznie niezależnie od warunków sieciowych, nawet w trybie offline. Są one naprawdę lekkie, ponieważ wykorzystują placeholdery gotowe do wypełnienia pobraną treścią, dając użytkownikom poczucie, że aplikacja ładuje się natychmiastowo. 

PWA działa w trybie offline, pozwalając użytkownikowi na kontynuowanie przeglądania nawet bez połączenia z internetem. Z każdym innym sklepem internetowym, musieliby porzucić proces zakupu. Z PWA jednak słaba sieć nie obniży już Twojej sprzedaży.

8. Zwiększone zaangażowanie, konwersje mobilne i przychody

Porównując konwersje z urządzeń mobilnych i desktopowych, wielu sprzedawców doświadcza luki mobilnej: klienci spędzają więcej czasu na przeglądaniu stron na urządzeniach mobilnych, ale konwersje mobilne są nadal znacznie niższe niż na desktopach.

Oczywiście, jest to częściowo spowodowane różnymi celami użytkowników mobilnych. Jednak niektóre firmy mogą pokonać tę lukę i znacznie zwiększyć swoje przychody z urządzeń mobilnych. Aby podążać za nimi, potrzebujesz dobrze działającej strony internetowej, która jest zoptymalizowana pod kątem urządzeń mobilnych i ma świetny UX. 

PWA pomaga osiągnąć te cele po części dzięki możliwościom pełnoekranowym, a także łatwemu dostępowi (dzięki opcji Add to Home Screen). Powiadomienia push, wcześniej dostępne tylko dla aplikacji natywnych, dodatkowo poprawiają ponowne zaangażowanie użytkownika. 

Bezpieczne połączenie (HTTPS)

Na potrzeby PWA musisz zapewnić bezpieczny serwer z połączeniem HTTPS. Jest to sposób zarówno na ochronę danych użytkowników, jak i na zbudowanie dodatkowej warstwy bezpieczeństwa w obrębie Twojej witryny.

Pracownicy serwisu

Jest to jeden z kluczowych elementów technologii PWA, który pomaga określić sposób obsługi żądań sieciowych. Service worker to plik JavaScript po stronie klienta dodany do Twojej bazy kodu, który działa w tle, aby naśladować funkcje podobne do aplikacji.

Plik PWA Manifest

Musisz wygenerować prosty plik JSON (plik manifestu PWA), który dostarcza przeglądarce informacji o wyglądzie i zachowaniu Twojego PWA, po zainstalowaniu na urządzeniu mobilnym użytkownika.

Zawiera podstawowe informacje, takie jak nazwa aplikacji, używane ikony lub kolory, i ma na celu zwiększenie doświadczenia podobnego do aplikacji natywnej.

Ważne: Plik manifestu PWA jest wymagany przez Google Chrome do wyświetlenia monitu "Dodaj do ekranu".

Foodl

Foodl, internetowy rynek B2B dla branży HoReCa, w którym brakowało ludzkiego dotyku w usługach cyfrowych. Aby to naprawić, szukali elastycznego rozwiązania, które wspierałoby rozwój firmy z pożądanym UX. Firma nie chciała zmuszać klientów do niczego tylko po to, by np. skrócić podróż kupującego lub korzystać z konkretnych urządzeń. 

Mindcurv wnikliwie przeanalizował doświadczenia klientów i partnerów, zmapował ich user journey, zdefiniował potencjalne wąskie gardła, potrzeby i na podstawie tych danych zaprojektował UX tak, aby dopasować go do procesów biznesowych specyficznych dla branży HoReCa. 

W ramach większej transformacji i kompozycji tech stacków, Foodl z Mindcurv byli w stanie ukształtować za pomocą Vue Storefront PWA:

• User journeys niezależnie od urządzenia i kanału

• Time-to-market

• Przyszłościową architekturę do skalowania

Garten-und-Freizeit

Raumschmiede, właściciel marki Garten-und-Freizeit szukał sposobu na zabezpieczenie i przyspieszenie wzrostu. W obliczu transformacji szukali rozwiązania, które zapewni doskonały UX przy jednoczesnej obsłudze złożonej logiki biznesowej dla ponad 30 000 różnych produktów. Poza tym, musieli zapewnić spójną, indywidualnie dopasowaną obsługę klienta.

Raumschmiede wraz z agencją partnerską Team23 postawili na Vue Storefront z kilku powodów. Jednym z nich była technologia. Dzięki architekturze i domyślnym funkcjom PWA partnerzy wiedzieli, że osiągną wyznaczone cele.

PWA jako pierwszy wybór szybko zwiększyło przychody, jak również zapewniło: 

• szybkie ładowanie i uruchamianie

• podejście mobile-first

• tryb offline

• architekturę przyjazną dla SEO i crawlerów 

• niezależność od platformy
  

Co zaowocowało: 

• +350% Aktywnych miesięcznych użytkowników

• +630% Miesięczny ruch z wyszukiwania organicznego

• -39% Spadek współczynnika odrzuceń (bounce rates)

Architektura API-first pozwala sprzedawcom wybrać najlepsze usługi w ich niszach i dostosować ich system eCommerce, aby był dokładnie taki, jakiego potrzebują.

Czy PWA może działać w trybie offline?

Tak, PWA działa offline, pozwalając użytkownikowi na kontynuowanie przeglądania strony nawet bez połączenia z internetem. W przypadku każdego innego sklepu internetowego, musiałby on zazwyczaj porzucić proces zakupu. Jednak w przypadku PWA słaba sieć nie obniży Twojej sprzedaży.

Czy PWA zastąpi natywne aplikacje?

Według wszelkiego prawdopodobieństwa PWA nie zastąpi natywnych aplikacji. Jednak PWA jest świetną alternatywą dla kosztownych aplikacji natywnych. Są one najszybszym i najbardziej przystępnym sposobem na włączenie mobile-first commerce. Podczas gdy aplikacje natywne są ograniczone do określonych urządzeń, są drogie w budowie i utrzymaniu - z PWA dostarczasz wszystkie możliwości naraz, w ułamku czasu.

Czy Progressive Web Apps się opłaca?

Firmy eCommerce obserwują stosunkowo duży ruch mobilny na swoich stronach, ale często nie idzie on w parze z wysoką konwersją. Aby to zmienić, potrzebują responsywnej strony z UX dostosowanym do urządzeń mobilnych. Najprostszym, najszybszym i najtańszym sposobem na osiągnięcie tego celu jest Progressive Web App. Więc tak, warto to zrobić.

źródło: https://vuestorefront.io/pwa