PWA w Magento | Blog X-Coding
pwa-w-magento

PWA w Magento

28.05.2019 / / Developers

Już w 2014 roku okazało się, że więcej osób korzysta z internetu na urządzeniach mobilnych niż komputerach. Od tego czasu ta tendencja systematycznie rośnie. Zapewnienie klientom bezbłędnego doświadczenia mobile już dawno przestało być ukłonem w ich stronę, a stało się koniecznością.

PWA pomaga spełnić te wymagania. Łączy w sobie najlepsze funkcjonalności aplikacji mobilnych (m.in. powiadomienia push, geolokalizację) oraz przeglądarki (łatwy dostęp i brak konieczności pobierania).

Z artykułu dowiesz się:

  • Co to jest PWA;
  • Jakie są postulaty PWA;
  • Jak wpływa na SEO i wydajność;
  • Czy warto wdrożyć PWA na Magento i jak to zrobić;
  • Jak zrobili to inni i co zyskali.

Co to PWA?

PWA (Progressive Web Apps) to wypromowany przez Google zbiór reguł projektowania aplikacji webowej, który powoduje, że jest ona przyjazna dla użytkowników urządzeń mobilnych i przypomina używanie natywnej aplikacji Android lub iOS.

Jak funkcjonuje?

PWA jest nie tyle konkretną technologią, co podejściem, które ma na celu jak najbardziej podnieść komfort użytkownika podczas używania aplikacji webowej.

Na PWA składają się:

  • prace, które musiały zostać zaimplementowane w możliwościach przeglądarek przez internetowych gigantów;
  • zastosowanie odpowiedniej architektury aplikacji webowej;
  • a nawet rozwój urządzeń mobilnych, które bez odpowiedniej mocy obliczeniowej nie byłyby w stanie obsłużyć wymagań tej aplikacji (a rozmawiamy nie o flagowcach tylko o modelach telefonów używanych przez większość konsumentów).

Postulaty PWA

Żeby pełnoprawnie stwierdzić, że aplikacja jest PWA musi być ona:

  • progresywna,
  • responsywna,
  • niezależna od sieci,
  • podobna do aplikacji natywnej,
  • zawsze aktualna dzięki Service Worker,
  • bezpieczna dzięki HTTPS,
  • mająca manifest aplikacji,
  • angażująca, dzięki powiadomieniom push,
  • możliwa do przechowywania na ekranie głównym,
  • działająca bez konieczności instalacji.

Poniżej omówię trzy najważniejsze, a całą checklistę znajdziesz tutaj – PWA Checklist.

Aplikacja jest niezawodna (ang. Reliable) – bez względu na jakość połączenia internetowego (lub nawet jego braku) aplikacja powinna działać bez opóźnień. W celu osiągnięcia jak najlepszego efektu stosuje się techniki cachowania zasobów, pobierania kolejnych elementów w tle. Oczywiście aplikacja nie musi działać z pełną funkcjonalnością w trybie offline. Skrajnie minimalnym przykładem spełnienia tego wymagania będzie wyświetlenie użytkownikowi informacji o niskiej jakości/braku połączenia internetowego zamiast pozwalać mu grać w skaczącego dinozaura:

gra dinozaur od Google

Obecnie nie obejdzie się bez Service Workerów, o których możesz przeczytać więcej tutaj: https://developers.google.com/web/fundamentals/primers/service-workers/

Aplikacja jest szybka (ang. Fast) – użytkownicy urządzeń mobilnych mogą doświadczać gorszych odczuć korzystając z aplikacji internetowych, z powodu słabszego połączenia w danym miejscu. Takie przypadki są już jednak coraz rzadsze i szybkość transmisji danych z urządzeń mobilnych jest zazwyczaj wysoka. Aplikacja musi w dobrych warunkach jak najszybciej generować zawartość żeby użytkownik nie odczuwał opóźnień. Kładzenie nacisku na szybkość działania aplikacji wynika z badań jak przekłada się ona na interakcje użytkowników i konwersje. Każdy może sprawdzić swoją aplikację pod tym kątem, a także skorzystać z kalkulatora potencjalnych korzyści, dzięki Test My Site od Google:

kalkulator test my site

Aplikacja musi być angażująca (ang. Engaging) – Korzystając z aplikacji internetowej przez przeglądarkę, użytkownik musi oddać jej część przestrzeni ekranu. Twoim zadaniem jest zadbać, aby uznał, że warto to zrobić.

aplikacja pwa

Dzięki zastosowaniu Web App Manifest możesz zdefiniować niezbędne elementy, które pozwolą użytkownikowi dodać ikonę aplikacji do ekranu głównego oraz wyświetlać ją bez elementów przeglądarki. Dzięki temu będzie ona jeszcze bardziej przypominała aplikacje natywne.

Kolejną możliwością zwiększenia zaangażowania użytkowników jest wysyłanie im powiadomień push. Dzięki wykorzystaniu dwóch API, które wspierają już przeglądarki: push i notification możemy uzyskać powiadomienia push, tak jak w natywnych aplikacjach mobilnych.

Przeglądarki, które wspierają push i notification to:

Warto zauważyć, że Safari niestety nie oferuje jeszcze wsparcia dla tych API – użytkowników tej przeglądarki niestety nie zaangażujemy poprzez pushe z aplikacji internetowej.

Powyższe trzy elementy to ogólny pogląd na to, jaka idea przyświeca PWA. Jeśli zdecydujesz się wdrożyć Progressive Web App, polecam Ci nie ograniczać się tylko do nich, ale zapoznać się ze szczegółową listą, dostępną na początku tego akapitu.

Jakie przewagi ma PWA?

zalety pwa

Wdrożenie PWA niesie ze sobą wiele zalet, zarówno dla firmy, jak i użytkownika końcowego. W X-Coding wyznajemy podejście, że to ten ostatni jest najważniejszy, dlatego to od niego zaczniemy.

Zalety dla użytkownika końcowego

Powiadomienia push – Powszechnie postrzegane są jako ogromna zaleta raczej dla firmy, która zyskuje dostęp do ekranu głównego użytkownika, mogąc kierować tam swoje działania marketingowe. Nic dziwnego, że marketingowcy walczą o zgodę na przesyłanie wspominanych powiadomień. Tymczasem i użytkownicy na tym zyskują – zwłaszcza w e-Commerce, gdzie dzięki notyfikacjom push klient może na bieżąco dostawać informacje o statusie swojego zamówienia (np. że zostało ono spakowane lub przekazane do wysyłki). Pomaga to budować dobre relacje z marką, zwiększa poczucie bezpieczeństwa przy zakupie i odciąża działy obsługi klienta.

Brak konieczności wpisywania adresu do przeglądarki – Tu nie trzeba dużo dodawać – im mniej czasu i wysiłku użytkownik musi włożyć, aby dotrzeć do Ciebie, tym lepiej.

Brak konieczności instalowania aplikacji – W AppStore i Google Play aplikacji nie brakuje. Można pokusić się wręcz o stwierdzenie, że jest ich nadmiar. A Twoja wcale nie musi być na pierwszej stronie… Badania pokazały, że konwersja spada o 20% z każdym krokiem, który potencjalny użytkownik musi wykonać zanim zacznie używać aplikacji (Źródło: https://vaadin.com/pwa/learn/advantages-over-native-and-hybrid-apps). PWA ogranicza je do minimum.

Przeglądanie strony w trybie offline – Przydatna opcja podczas wspomnianej utraty zasięgu. PWA zapisuje w pamięci podręcznej zbiór danych, pozwalający użytkownikowi na korzystanie z podstawowych funkcji aplikacji aż do ponownego połączenia z internetem.

Zalety dla e-Commerce

Jedna wersja na urządzenia iOS i Android – Zamiast wprowadzać zmiany osobno w sklepie internetowym oraz aplikacjach na IPhony i Androidy, robisz to tylko w jednym kodzie. Pozwala to na oszczędność czasu i kosztów, a także po prostu szybsze wprowadzanie zmian.

Łatwość aktualizacji – nie musisz już obawiać się czy wszyscy użytkownicy korzystają z nowych funkcjonalności, które wprowadziłeś. Aplikacji PWA wystarczy jedynie połączenie z internetem, aby zaktualizowała się ona do najnowszej wersji.

PWA kontra aplikacje natywne i strony RWD

porównanie pwa rwd aplikacje natywne

Wdrożenie PWA dla Magento

Jak szybko można wdrożyć PWA do Magento 2?

wdrożenie pwa

Podstawowa wersja, która będzie spełniała (prawie) wszystkie wymagania z checklisty, może być wdrożona w projekcie w prawdopodobnie mniej niż tydzień.

W tym celu należałoby:

  • dodać manifest.json,
  • zarejestrować ServiceWorker,
  • dodać cache kilku podstawowych stron,
  • obsłużyć tryb offline.

Nasza aplikacja spełni wtedy cechy bycia PWA, ale nie będzie działała tak bardzo responsywnie jak może działać jeżeli zrobimy to dobrze. W tym przypadku raczej tydzień pracy dewelopera to będzie zbyt mało.

Jak zrobić to w Magento i zrobić to dobrze?

Standardowy szablon Magento 2.3 niestety nie daje nam korzyści jakie niesie ze sobą PWA. Obecnie możemy skorzystać z kilku gotowych rozwiązań dostępnych na rynku:

  • Vue Storefront,
  • Venia Storefront,
  • ScandiPWA.

Pierwsze rozwiązanie ma już na swoim koncie produkcyjne wdrożenia. Nie jest to jednak rozwiązanie dedykowane tylko pod Magento. Oparte jest na frameworku Vue.js, który mimo zyskiwania na popularności jest mniej popularny niż stack technologiczny w pozostałych dwóch rozwiązaniach.

Venia Storefront jest tworem zespołu Magento, jednak obecnie jest ona dopiero w fazie rozwoju. Na pewno przyszłościowo będzie najbardziej korzystnym rozwiązaniem, bo będzie za nim stał cały zespół rozwijający Magento. Na dzisiaj jednak nie jest to jeszcze rozwiązanie gotowe do produkcyjnego użycia. Używa Reacta.

ScandiPWA jest dedykowanym rozwiązaniem pod Magento, łatwo integruje się z obecną infrastrukturą projektu. Podobnie jak Venia Storefront jest tutaj użyty React.

Które z tych podejść wybrać? Zależy od dostępnego zespołu, zasobów, stopnia modyfikacji wprowadzonych w sklepie, dalszych planów rozwojowych (roadmapy). Skorzystanie jednak z jednego z gotowych rozwiązań na i przebudowanie na własne potrzeby będzie zazwyczaj korzystniejsze od budowania wszystkiego od podstaw.

PWA a SEO

Jedną z ważniejszych rzeczy jakie należy wziąć pod uwagę to SEO. Niestety rozwiązania PWA pod kątem SEO to chyba najgorsze co można wdrożyć 🙂

Dlaczego? Przyjrzyjmy się przykładowemu kodu źródłowemu strony korzystającej z jednego z popularnych frameworków frontendowych:

<!DOCTYPE html>
<html>
    <head>
        <meta charset=UTF-8><meta name=viewport content="width=device-width,initial-scale=1">
        <link href=/static/css/app.8d66195e6524045ce3c111ac7787fa40.css rel=stylesheet>
    </head>
    <body>
        <div id=app style="display: flex; flex-direction: column;"></div>
        <script type=text/javascript src=/static/js/manifest.59bbaa6c906d43f698a0.js></script>
        <script type=text/javascript src=/static/js/vendor.2fa93b65efd49b334003.js></script>
        <script type=text/javascript src=/static/js/app.7786a9e7d608d76cc7fc.js></script>
    </body>
</html>

Jak widać, nie ma tu żadnych informacji dotyczących zawartości strony. Oczywiście po stronie przeglądarki, zaraz po wczytaniu się strony zostanie wyrenderowane wszystko co jest potrzebne na danej stronie, ale prymitywny robot zobaczy tylko źródło powyżej.

Google coraz bardziej stara się obsługiwać także elementy JavaScript, ale wciąż nie mamy pewności czy obsługiwane są już wszystkie elementy z których korzystamy. Do tego, mimo, że Google jest wiodącą przeglądarką, to nie jest jedyną. Wyszukiwarki takie jak Bing, Yandex i inne, nie muszą dotrzymywać kroku pod kątem obsługi JavaScript przez swoje roboty. Szczegółów niestety się nie dowiemy. Dopóki nie mamy oficjalnych potwierdzeń od firma takich jak Google czy Microsoft, że w pełni obsługują JavaScript z poziomu robotów indeksujących, to w e-Commerce musimy brać pod uwagę przewagę stron renderowanych w sposób tradycyjny nad nowoczesnymi frameworkami pod kątem SEO.

Co z tym możemy zrobić? Jest kilka ciekawych podejść.

SSR

Server Side Rendering to podejście renderowania podstawowego kodu HTML po stronie serwera, który zostaje następnie przesłany do przeglądarki użytkownika i tam już strona działa tak, jakby od razu została pobrana w wersji PWA.

SSR to na pewno krok w dobrą stronę jeżeli chodzi o SEO, ale ma też swoje minusy. Są nimi bez wątpienia:

  • zwiększenie wymagań pod kątem zasobów serwera,
  • SSR wymaga doświadczenia i pamiętania o tym na każdym etapie implementacji,
  • SSR wprowadza też dodatkowy element do przetestowania (strona, którą wyklikamy jest teoretycznie czymś innym niż strona, na którą wejdziemy bezpośrednio z linka).

Prefetch

Frameworki frontendowe zazwyczaj umożliwiają wygenerowanie stron statycznych pod konkretnymi adresami już na etapie budowania aplikacji. To rozwiązanie sprawdzi się bardzo dobrze w przypadku stron statycznych, ale raczej nie znajdzie zastosowania na stronach, które wymagają skomunikowania się z API w celu pobrania jakichkolwiek danych.

Rozdzielenie ruchu

Innym podejściem może być podzielenie ruchu na podstawie nagłówków żądania HTTP na ruch zwykły i ruch robotów indeksujących. Zwykłych użytkowników kierujemy na standardową aplikację, roboty trafiają do wcześniej przygotowanych stron na podstawie mapy strony (możemy je generować np. codziennie przy pomocy narzędzi emulujących przeglądarki z obsługą JavaScript). Nawet jeżeli nasza witryna nie będzie w pełni obsłużona, to na pewno wygenerujemy HTML, który zawiera dane potrzebne dla robotów.

Jak PWA wpływa na wydajność?

Użycie PWA bardzo znacząco wpływa na odbiór naszego sklepu przez klienta. Nawet jeżeli Magento nie będzie działać idealnie i pojawią się dłuższe czasy ładowania (co oczywiście powinno zostać jak najszybciej poprawione) to klient zawsze jest w pełnej interakcji z aplikacją (dostaje np. loader w obrębie aplikacji zamiast przeładowującej się całej strony).

Oczywiście wdrożenie PWA nie zniesie z nas obowiązku rozwiązania problemów wydajnościowych w API Magento (jeżeli jakieś występują ze względu na np. nieadekwatne zasoby serwera), ale pośrednio zmniejszy także użycie serwera do serwowania części zasobów naszej witryny.

W zależności od wdrożonego mechanizmu wspomagającego SEO, może także wymagać pewnych mocy obliczeniowych w celu utrzymywania SSR.

Czy warto?

Statystyki

Koszt wdrożenia PWA może być różny dla różnych systemów ze względu na wprowadzone modyfikacje, aktualną złożoność systemu, charakterystykę serwisu. Z drugiej strony, efekty wprowadzenia PWA mogą być bardzo znaczące (jak można zobaczyć to np. na stronie <www.pwastats.com>).

Każdy sam musi zdecydować czy potencjalne korzyści przełożą się na zwrot z inwestycji w PWA (np. korzystając już z wspomnianego na początku kalkulatora).

Korzyści z wdrożenia możesz przewidzieć w oparciu o wyniki firm, które już to zrobiły:

  • Pinterest po zredukowaniu czasu oczekiwania na załadowanie strony o 40%, zwiększył ruch organiczny i liczbę rejestracji o 15%;
  • COOK zwiększył liczbę konwersji o 7%, zmniejszył współczynnik odrzuceń o 7%, oraz zwiększył liczbę odwiedzanych stron na sesję o 10% po zredukowaniu czasu ładowania strony o 850 millisekund.

A także co się może wiązać ze słabą wydajnością:

  • BBC odkryło, że tracą 10% użytkowników za każdą sekundę opóźnienia w ładowaniu strony.
  • DoubleClick od Google dowiedziało się, że 53% wizyt ze strony mobilnej było porzucanych, gdy ładowała się ona dłużej niż 3 sekundy.

Oni już się zdecydowali

La Nature

La Nature to sklep internetowy z biżuterią, którego podstawą jest platforma Magento, zintegrowana z 1C USP, CRM Bitrix-24, systemem lojalnościowym, funkcjonalnościami ułatwiającymi franczyzobiorcom hurtowe zakupy. Jeśli chodzi o front-end, programiści postawili na Vue Storefront.

Dzięki technologii PWA, klientki La Nature mogą w dowolnym momencie przeglądać całą ofertę marki, nawet bez połączenia z internetem.

The Hour Glass

The Hour Glass to marka znana ze sprzedaży ekskluzywnych zegarków. Przy okazji wypuszczenia nowej kolekcji – NOMOS Glashütte, zdecydowali się na uruchomienie sklepu z pop-upami, wykorzystującego strukturę Vue Storefront.

Malianta

Malianta to firma sprzedająca ręcznej roboty skórzane torebki i akcesoria, określająca samą siebie jako “markę modową online”. Brak sklepów stacjonarnych oraz potrzeba bycia postrzeganym jako marka luksusowa, wymagały od Malianty zwrócenia szczególnej uwagi na zapewnienie swoim klientom jak najlepszych doświadczeń zakupowych.

Nowy sklep mobilny Malianty debiutował w Black Friday, natychmiastowo udowadniając, że było warto go wdrożyć. Poradził sobie z ruchem większym o 755% niż w ciągu przeciętnego tygodnia.

Podsumowując

Od kilku lat PWA pomaga sklepom przyciągać nowych klientów (np. możliwością kompletowania koszyka offline), utrzymywać ich uwagę (np. powiadomieniami push) i doświadczać bezproblemowe doświadczenia mobilne (np. szybkim czasem ładowania strony). PWA to przyszłość m-Commerce, która już tu jest i warto, abyś Twój sklep też do niej dołączył.