14 min

15 stycznia 2023

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

Progressive Web App (PWA) zostało okrzyknięte kolejną wielką rzeczą kilka lat temu. A jednak - jak to często bywa z "rewolucjami" w świecie technologii - nie rozwijała się tak, jak przewidywały początkowe głośne nagłówki. Sugerowanie, że PWA w jakiś sposób zawiodło jest jednak dalekie od prawdy.

W rzeczywistości firmy takie jak Google i Microsoft są częścią ruchu PWA i nic nie wskazuje na to, że w najbliższym czasie z niego zrezygnują.

Czytaj dalej, aby dowiedzieć się, czym jest PWA, jak działa i jakie korzyści może przynieść Twojemu sklepowi internetowemu.

Czym jest PWA?

Progressive Web Application (PWA) to rodzaj aplikacji internetowej, która może działać zarówno jako strona internetowa, jak i aplikacja mobilna na dowolnym urządzeniu. Jest to świetne rozwiązanie dla słabego mobilnego UX i niskiego współczynnika konwersji w Twoim sklepie internetowym. Wykorzystując standardowe technologie, PWA ma na celu dostarczenie natywnego doświadczenia użytkownika, z szybszą konwersją i czystszym przeglądaniem nawet przy słabym połączeniu internetowym.

PWA są napisane w JavaScript, CSS i HTML. Wyglądają i zachowują się jak zwykłe strony internetowe (co oznacza, że można je przeszukiwać w przeglądarkach internetowych). Dostarczają jednak funkcjonalności identycznych z tymi, które zapewniają aplikacje mobilne: są szybkie, mogą pracować w trybie offline, wysyłają powiadomienia push, wykorzystują funkcje urządzeń użytkownika.

Co więcej, PWA mogą być umieszczane w popularnych marketach z aplikacjami, takich jak AppStore czy Google Play.

Ponieważ nie zakładają one żadnej konkretnej implementacji, nie jest łatwo sformułować właściwą, słownikową definicję PWA. Google, firma która je wymyśliła, nie oferuje zbyt wiele pomocy, a jej oficjalne wprowadzenie na rynek było dość niejasne.

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. 

Progressive Web Apps: Korzyści Umożliwiające Mobile-First Commerce

Główne korzyści z wdrożenia PWA obejmują poprawę szybkości i wydajności, UX przypominający aplikację i wieloplatformowe wykorzystanie. Jednak to tylko kilka przykładów z szerokiej puli zalet PWA. Przyjrzyjmy się bliżej wszystkim z nich.

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. 

Jaka jest różnica między Progressive Web Apps a Native Mobile Apps?

Natywne aplikacje królowały przez dekadę, ale w końcu przechodzimy do ujednoliconego doświadczenia na każdej platformie i urządzeniu. Progressive Web Apps są zorientowane na urządzenia mobilne i niezwykle lekkie w porównaniu do aplikacji natywnych, zapewniając ten sam poziom interaktywności. 

Chociaż czołowi gracze na internetowym krajobrazie, tacy jak Alibaba, Pinterest czy Twitter już je ogarnęli i wdrożyli PWA na swoich stronach, termin Progressive Web App przez lata był jeszcze dość niejasny dla pomniejszych graczy. Wielu z nich, zdając sobie sprawę, że podejście mobile-first jest w dzisiejszych czasach koniecznością, jest przekonanych, że nie ma alternatywy dla Responsive Web Design czy aplikacji natywnych

Jednak świadomość zalet PWA stale rośnie, czego dowodem są statystyki Google oraz rosnąca liczba projektów Vue Storefront na żywo.

Przyjrzyjmy się ogólnemu porównaniu Progressive Web Apps i aplikacji natywnych poniżej.

Jakie są wymagania PWA?

Aby skonfigurować Progressive Web App musisz zabezpieczyć kilka elementów: 

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

Sprawdź przykłady Progresywnych Aplikacji Webowych

Progressive Web Apps są już tutaj i dostarczają znakomitych rezultatów. Wystarczy spojrzeć!

  • +300% wzrost przychodów w Best Western Hotels

  • +100% wzrost zaangażowania w Forbes.com

  • +74% wzrost czasu spędzonego na AliExpress

  • +70% wzrost współczynnika konwersji w Flipkart

  • +3X wzrost współczynnika konwersji w MakeMyTrip.com

  • +3X wzrost CTR reklam w Wego

Poniżej znajdziesz więcej szczegółów na temat niektórych wdrożeń PWA w Vue Storefront.

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

Spójne doświadczenie klienta i lepsze zaangażowanie klienta

Progressive Web Apps to przede wszystkim doświadczenie użytkownika, mające na celu zwiększenie zaangażowania użytkowników i wszystkie korzyści, które z tego wynikają. Możesz jednak wybrać sposób, w jaki wykorzystasz zalety PWA. Poprawa prędkości strony to oczywiście no-brainer, ale jest ich znacznie więcej.

PWA, jako że są odkrywane w przeglądarkach internetowych, mogą również skorzystać z popularności wyszukiwania głosowego, które z pozoru jest kolejnym krokiem do tego, aby interakcja cyfrowa była bardziej ludzka, a cały UX bardziej spójny.

Wyszukiwanie głosowe jest ściśle związane z optymalizacją mobilną, w której wydajność stron internetowych odgrywa kluczową rolę. To z kolei sprawia, że PWA są najodpowiedniejszymi rozwiązaniami wspierającymi optymalizację wyszukiwania głosowego - zwłaszcza, że asystenci głosowi wciąż są najczęściej używani na smartfonach. 

Progressive Web Apps są w stanie przyspieszyć wydajność stron internetowych. Ponadto są standardem wspieranym przez samo Google, co automatycznie sprawia, że idealnie pasują do rozwiązań głosowych.

W erze omnichannel, user experience powinno być postrzegane w dużym obrazie, obejmującym każdy touchpoint, zarówno offline, jak i online. Jeśli podróż klienta nie jest zarządzana, użytkownicy mogą czuć się oszołomieni i zdezorientowani, co nie jest najlepszym fundamentem dla doświadczenia zakupowego.

Vue Storefront Progressive Web App daje znaczące możliwości biznesowe sprzedawcom eCommerce, którzy chcą wypełnić swoją lukę mobilną:

  • Vue Storefront PWA ma znacznie mniejszy rozmiar niż aplikacje natywne, więc ładuje się szybciej, działa lepiej w sieciach o niskiej przepustowości i zajmuje mniej miejsca na urządzeniu użytkownika.

  • PWA synchronizują dane w tle, nawet gdy użytkownik nie jest aktywny. Aplikacja jest zawsze na bieżąco z najnowszą wersją i treścią serwowaną natychmiastowo. 

  • Vue Storefront jest w pełni wyszukiwalny i indeksowalny w przeciwieństwie do aplikacji natywnych. Co więcej, użytkownik może z łatwością tworzyć zakładki i udostępniać każdą stronę. 

  • PWA zapewnia responsywne i płynne doświadczenie zakupowe, więc nie ma potrzeby tworzenia aplikacji dla różnych przeglądarek i platform internetowych.

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