Wprowadzenie do PWA (Progressive Web App)

Progressive Web App to technologia, która wprowadzona została przez Google. Jej popularność wzmaga się, czego dowodem jest nie tylko rosnąca ilość firm, które inkorporowały ją na swoje potrzeby (Pinterest, Aliexpress, Trivago, OLX, Forbes), ale również poziom wsparcia od największych graczy na rynku, takich jak Microsoft. PWA to udowodniona w boju technologia, która zwiększa zaangażowanie użytkowników, ale przede wszystkimi odpowiada na wymagania współczesnego świata technologii e-commerce, który polega na wielokanałowości.

Czym jest Progressive Web App?

Progressive Web App to rodzaj aplikacji webowej, której używać można jednocześnie jako strony www i aplikacji mobilnej na właściwie każdym urządzeniu. Ponieważ technologia ta powstała z ręki Google’a, spełnia również ich wymagania odnośnie pozycjonowania w wynikach wyszukiwania. Oprócz tego została odpowiednio zoptymalizowana, aby działała maksymalnie kompatybilnie ze wszystkimi urządzeniami i jednocześnie była bardzo szybka.

PWA działa według prostej zasady. Jest to aplikacja napisana w taki sposób, aby wyglądała i zachowywała się jak zwykła strona www. Powstała z wykorzystaniem technologii webowej i jest oparta na językach JavaScript, CSS oraz HTML. Jest widoczna w wynikach wyszukiwania oraz z dostępem w formie linku. Jednak, przy tym wszystkim, oferuje wszelkie walory aplikacji mobilnej. Oznacza to, że działa w trybie offline, może wysyłać powiadomienia push i korzysta z dysku twardego urządzenia.

To doskonałe połączenie pomiędzy światem mobilnym a stacjonarnym. Sam Google, twórca tej technologii, opisuje PWA w trzech superlatywach.

• Niezawodny – Ładuje się błyskawicznie i nigdy nie wyświetla dinozaura, nawet w niepewnych warunkach sieciowych.

• Szybki – Reaguje szybko na polecenia użytkownika płynnymi animacjami, bez kiepskiego przewijania.

• Angażujący – Daje poczucie aplikacji natywnej na każdym urządzeniu z angażującym User Experience.

Wszystko to sprawia, że użytkownik pragnie zapisać stronę na swoim pulpicie.

Czym jest i do czego służy Lighthouse?

Google twierdzi, że PWA skupiono na użytkowniku. Jednak brakuje konkretnych wytycznych, aby wyraźnie zakreślić definicje Progressive Web App. Określenie PWA szybkim lub angażującym jest opinią subiektywną. Google jednak zapewniło odpowiednie narzędzia, do przeprowadzania audytu na aplikacji webowej pod kątem cech PWA – Lighthouse na open-source. Dzięki niemu duża część testowania manualnego jest niepotrzebna. Narzędzie to pozwala przetestować aplikację pod kątem osiągów, dostępności i dobrych praktyk. Aby PWA spełniało wymagania użytkowników pod kątem jego podobieństwa do aplikacji natywnej, spełnionych musi być 75% wymagań (Progressive Web App Checklist).

Jak PWA wypada w porównaniu do konkurencji?

Nie tylko PWA jest w stanie zapewnić płynne przejście między platformami. Oprócz niego są narzędzia takie jak React Native, Native Scripts, Flutter, Ionic lub aplikacje hybrydowe. Ostatnia opcja umożliwia budowanie aplikacji o niemal natywnym odczuciu, ale bez obowiązku posiadana znajomości wszystkich trzech języków programowania. Deweloperzy piszą aplikacje jednorazowo, a ona dostępna jest na kilku platformach. W przypadku aplikacji dedykowanych musieliby używać Objective-C dla iOSa, Javy dla Androida i niegdyś C# dla Windows Phone’a. Rozwiązanie hybrydowe jest dużo szybsze i znacznie tańsze.

Dobrze napisane i zoptymalizowane rozwiązanie cross-platformowe niczym nie różni się od aplikacji natywnych. Jednak w przypadku rozwiązań skomplikowanych, jak gry lub rozległe programy, ich szybkość działania będzie wyraźnie wolniejsza, a nawet możliwe jest zawieszanie się. Minusem jest również brak wspierania funkcji natywnych systemów operacyjnych aplikacjami hybrydowymi.

Są one jednak dobrym wyborem, gdy mamy do czynienia z niewielkim projektem lub z ograniczonymi środkami. W innych przypadkach, rozwiązanie natywne będzie lepsze. Jest wpisane w konkretny język, co gwarantuje najlepsze osiągi na konkretnej platformie. Jednak ich stworzenie i utrzymanie będzie znacznie droższe i bardziej skomplikowane.

Wszystkie te wady są rekompensowane przez PWA. Znacznie mniejszy koszt deweloperski i krótszy czas w stworzeniu aplikacji, korzystanie z jednego kodu i pełna kompatybilność to tylko kilka zalet. Progressive Web App jest wciąż rozwijane i nie ma powodu, by przekreślać ewentualność, w której zastąpią ono w przyszłości całkowicie aplikacje natywne i hybrydowe.

Jakie są najważniejsze zalety Progressive Web App?

Prędkość działania aplikacji lub strony www sklepu internetowego to jego być albo nie być. Każda sekunda zwłoki w ładowaniu może kosztować klienta lub jego cierpliwość. PWA jest najszybsze, ponieważ działa również w trybie offline. To uniezależnia je od połączenia internetowego.  Współczynnik konwersji jest mocno powiązany z szybkością działania strony. To zmusza firmy zajmujące się e-commerce do optymalizacji w kierunku wydajności i prędkości. PWA, po wstępnym załadowaniu, działa płynnie i odpowiada na polecenia natychmiastowo.

To również skutkuje ich wysoką niezawodnością. Niezależnie od jakości połączenia z internetem, PWA będzie dalej funkcjonować, dzięki możliwości pracy w offline. Użytkownik nie opuści strony, która pozostaje responsywna, kontynuując przeglądanie kart produktów, czy nawet dodając produkty do koszyka.

Progressive Web App posiada dostęp do funkcji urządzenia, z którego korzysta użytkownik, co wzbogaca interakcje ze stroną i zachęca do powrotu. PWA ma możliwość wysyłania powiadomień push, dzięki czemu sprzedawcy mogą informować klientów o nowych promocjach i dostępnych produktach na bieżąco i prosto na ich telefon. Oprócz tego istnieje możliwość dodania strony do ekranu głównego w formie ikony, na kształt aplikacji natywnych. Wszystko to wpływa na większą lojalność klienta.

PWA łączy w sobie kompatybilność z urządzeniem mobilnym i stacjonarnym. Dla użytkownika to plus ze względu na możliwość prowadzenia zakupów w trybie wielokanałowym oraz dostępność sklepu bez instalowana aplikacji. Dla dewelopera i właściciela to mniejszy problem w trakcie aktualizacji i krótszy czas stworzenia sklepu. Ponieważ opieki wymaga tylko jeden produkt, a nie kilka aplikacji na kilka różnych platform, utrzymanie PWA jest również niższe. Przede wszystkim jednak PWA wychodzi naprzeciw wymaganiom rynkowym i zwiększającej się sprzedaży na urządzeniach mobilnych. Jej kompatybilność niesie za sobą więc zalety gdziekolwiek spojrzeć.

Progressive Web App ładuje się szybko, posiada wysoki User Experience dzięki adaptacji cech aplikacji natywnych przez przeglądarkę oraz działa offline. Wszystko to przebija przyjazność SEO. PWA zoptymalizowane jest pod Googleboty i pozycjonowanie w rankingach wyszukiwarek. Cała budowa tej technologii dyktowana była chęcią osiągnięcia wysokich wyników SEO, a Google zapewniło nawet narzędzia do audytu aplikacji w celu poprawienia tej optymalizacji – Lighthouse. PWA dla biznesu e-commerce to przepis na sukces.

Jak implementować PWA dla strony www?

PWA nie wymaga pełnej implementacji. Ponieważ celem wyższym jest zachęcić użytkowników do poprawienia swoich aplikacji do pewnego poziomu, wystarczy 75%, aby spełnić standard Google. Sposobów implementacji jest kilka. Progressive Web App można stworzyć niezależnie, od zera lub skorzystać z gotowych rozwiązań. Frameworki takie jak Vue Storefront czy PWA Studio będą ogromną pomocą przy tworzeniu aplikacji.

Jeśli sklep na aplikacji PWA ma powstać niezależnie, prace muszą zostać przekazane deweloperom front-endu. Najpierw powstać musi Web App Manifest, później Service Worker, a na koniec należy sprawdzić jakość powstałego produktu na podstawie wymagań Google. Cały proces wymaga jednak głębokiej wiedzy z JavaScript, HTML i CSS. Jeśli celem jest stworzenie niewielkiej aplikacji, która nie będzie korzystała z pełnego potencjału PWA, to jest to możliwe.

Rozwiązań gotowych jest dużo. Angular Storefront, Deity Falcon, Front-Commerce, PWA Studio, Scandidweb PWA, Spartacus, Vue Storeftont. Wszystkie z nich podołają każdemu większemu projetowi e-commerce, nawet jeśli chodzi o stworzenie kilku stron lub kilku sklepów dla jednej dużej firmy. Jednak taka integracja nie przyjdzie łatwo. W trakcie implementacji strona nie będzie dostępna. Ta ewentualność dla niektórych firm może być blokadą nie do zaakceptowania. Również koszt inicjalizacji może zniechęcić. Jednak partnerstwo z odpowiednim deweloperem będzie gwarantem sukcesu na dłuższą metę. Zwrot inwestycji zauważalny będzie już w ciągu 4 miesięcy od startu, nie wspominając o oszczędnościach w kosztach utrzymania.

Wszystkie te czynniki należy wziąć pod uwagę decydując się na PWA. Najbardziej jednak powinna przekonywać możliwość rozwoju po implementacji. Przyszłość jest mobilna, a e-commerce musi pozostać na czasie z trendami, aby stanowić godną konkurencję na rynku. Mniejszy koszt utrzymania oraz możliwość rozwoju wielokanałowego to główne atrybuty PWA, które powinny przekonać sprzedawców chcących zwiększyć współczynnik konwersji, ale przede wszystkim – utrzymać mocną markę.