SPA, PWA - quo vadis, e-commerce?

Aplikacja mobilna to za mało

Konsumenci chcą kupować mobilnie: w ten sposób robi zakupy 37% internautów ogółem i 53% klientów e-commerce (według raportu mShopper 2.0). Jak odpowiedzieć na tę potrzebę?

Jeszcze do niedawna najbardziej popularnym podejściem było implementowanie strony internetowej i osobnych aplikacji (natywnych) na urządzenia mobilne. Takie rozwiązanie pozwala na dostarczenie użytkownikom mobilnym wielu funkcji, takich jak jeden spójny interfejs, praca w trybie offline, wydajne działanie aplikacji czy też powiadomienia push.

Ostatnie badania pokazują jednak, że większość osób instaluje jedynie niewielką ilość aplikacji, których używa często, na czym cierpią np. właściciele serwisów e-commerce - ich aplikacji używa się sporadycznie w takiej postaci. Użytkownicy rzadko je pobierają z kilku powodów: długi czas ładowania, konieczność ciągłego dostępu do internetu czy brak natywnych udogodnień, takich jak dostęp do kamery lub czytnika NFC. Sporym problemem jest też konieczność instalacji aplikacji z użyciem platform takich jak Google Play Store czy Apple App Store. Dlatego potrzebne jest zupełnie nowe podejście: e-commerce potrzebuje złożonych, wyrafinowanych aplikacji webowych.

SPA: Single Page Application

Należy nadmienić, że termin SPA oznacza głównie aplikacje webowe, które nie są implementowane w tradycyjny sposób - czyli generowane i serwowane z jednego lub wielu serwerów (lub instancji). SPA oznacza metodę implementacji - po stronie klienta w JavaScript/HTML/CSS, bez przeładowywania. Jest to stosunkowo młody sposób wytwarzania oprogramowania, jednakże znalazł już wielu swoich fanów. Powstało sporo technologii i społeczności, których celem jest przyspieszenie procesu tworzenia tego typu aplikacji.

Technologia

Najbardziej popularnymi platformami (frameworkami) ułatwiającymi szybkie tworzenie aplikacji SPA są:

Angular - Platforma stworzona i rozwijana od kilku lat przez Google. Jest to jedno z dwóch (obok Reacta) najpopularniejszych rozwiązań wykorzystywanych w istniejących wdrożeniach SPA i PWA. Wykorzystuje język TypeScript bazujący na JavaScript.

React - Konkurencyjny dla Angulara framework, zbudowany i stworzony przez Facebooka. To mniej całościowe podejście, skupione na warstwie widoku. Wykorzystuje język JavaScript, wzbogacony o technologię JSX używaną do tworzenia szablonów stron.

Vue.js - Popularny framework SPA/PWA stworzony przez byłego pracownika Google’a, bezpośrednio po pracy nad wczesnymi wersjami Angulara. Jest obecnie aktywnie rozwijany, doceniany za prostotę i łatwość nauki.

Ember - Otwarty framework, ułatwiający pisanie aplikacji internetowych (SPA) po stronie klienta z użyciem wzorca Model-View-Controller (MVC).

Dzięki nim tworzenie aplikacji klasy SPA sprowadza się do kilku tygodni lub miesięcy pracy, przy wykorzystaniu faworyzowanych zwinnych metodyk tworzenia projektów (Agile, Scrum). W tym modelu powstały serwisy takie jak finansowaniefaktur.pl, czy też nowa odsłona Spotify.

Należy wspomnieć o dwóch podejściach, które w kontekście e-commerce mają znaczenie kluczowe: ortodoksyjne SPA lub indeksowalne “SPA”. Strona, która idealnie realizuje ten pierwszy wzorzec, składałaby się tylko z jednego punktu interakcji - jednego adresu URL. Można sobie łatwo wyobrazić, iż dla e-commerce o bogatym katalogu produktów oraz kategorii nie jest to dobry sposób podejścia do zagadnienia SEO, gdyż kolejne podstrony nie zdradzą nazw produktów lub słów kluczowych - wszystko będzie doładowywane dynamicznie przez odpowiednie komponenty. W takim wypadku faworyzowane jest odejście od czystego SPA i umożliwienie aplikacji funkcjonowania na wielu adresach URL (inaczej mówiąc - routing będzie wyglądał zupełnie inaczej). Mając to na uwadze, możemy przejść do kolejnego trendu, jakim są aplikacje zbudowane w głównej mierze w oparciu o SPA.

PWA (Progressive Web App)

W istocie PWA to nie tyle konkretny sposób wytwarzania czy model oprogramowania, ale wzorzec myślowy oraz zbiór dobrych praktyk. Te wymienia Google w swoim dokumencie “Progressive Web App Checklist”. W skrócie:

• Aplikacja musi działać szybko i optymalizować ilość przesyłanych danych. Ma to zapobiec zniechęceniu użytkownika korzystającego z urządzenia mobilnego wykorzystującego wolne łącze.
• Aplikacja musi wyświetlać się poprawnie na każdym urządzeniu, od komputerów stacjonarnych i laptopów, po wszystkie urządzenia mobilne: tablety, najmniejsze nawet smartfony.
• Aplikacja powinna jak najbardziej przypominać natywną - dostosować trzeba wygląd i zachowanie (np. wykorzystanie gestów na urządzeniach mobilnych) aplikacji, unikać należy nadmiernego przeładowywania strony.
• Konieczna dla aplikacji jest praca w warunkach offline, powinna zapewniać co najmniej podstawowe funkcje w przypadku braku połączenia z internetem - np. w przypadku rozwiązania e-commerce dostępna może być tylko część katalogu produktów.
• Wymagana jest aktualizacja danych w tle - użytkownik nie musi odświeżać lub nawet używać aktywnie aplikacji, żeby otrzymać bieżące dane. Odpowiada za to innowacyjna technologia Google’a po stronie przeglądarki : Service Worker.
• Niezbędne jest zapewnienie bezpiecznej komunikacji przez protokół HTTPS. Jest to związane z rozwiązaniami znajdującymi po stronie przeglądarki, które, przy braku szyfrowanego połączenia, narażają użytkownika na ataki.

SPA czy PWA: co wybrać?

Często zadawane jest ostatnio pytanie: Co jest dla mnie lepsze, SPA czy PWA? Odpowiedź jest prosta: PWA jest prawie zawsze SPA (dla e-commerce: nieortodoksyjnym SPA). Czemu prawie? Ten niewielki procent zawiera strony, które symulują działania w stylu PWA (responsywny i przypominający natywne aplikacje design, funkcje offline, szybkość działania oraz indeksowalność przez wyszukiwarki), choć wcale nie są oparte o technologie zbudowane głównie po stronie klienta. Można w strategii działania online obrać taką ścieżkę, aczkolwiek nie jest to rekomendowana droga z uwagi na brak zgodności ze standardami, a jedynie imitację celem osiągnięcia wysokich wyników w benchmarkach sprawdzających zgodność z checklistą PWA, takich jak Google Lighthouse.

Podobnie jak w wypadku SPA, tworzenie aplikacji typu PWA sprowadza się do kilku miesięcy pracy, wykorzystując głównie zasoby i kompetencje front-endowe oraz zwinne metodyki tworzenia projektów. Referencjami w skali globalnej mogą być serwisy AliExpress (rezultaty po wdrożeniu PWA: 74% wzrost czasu spędzonego na stronie, 2 razy więcej wizyt na wszystkich przeglądarkach, 104% wzrostu konwersji na nowych użytkowników) czy też Flipkart (wzrost średniego czasu sesji z 1 minuty do 3.5 minut).

Korzyści dla sklepów internetowych

Wykorzystanie najnowszych standardów PWA pozwala sklepom internetowym zaoferować użytkownikom nową jakość doświadczenia zakupowego na urządzeniu mobilnym. Co to oznacza w praktyce?

• Jedna, spójna aplikacja dla wszystkich typów urządzeń (desktop/mobile)
• Przyspieszenie czasów reakcji i ładowania strony nawet kilkukrotnie
• Większa wygoda używania dzięki przyjaznym interfejsom
• Znaczny wzrost zaangażowania powracających klientów, dzięki instalacji na ekranie głównym urządzenia oraz powiadomieniom push
• Offline readiness - częściowa lub całkowita
• Responsive by design (mobile-first experience)
• Szerszy wachlarz możliwości prezentacji treści

Nie możemy również zapominać o korzyściach technologicznych, takich jak:

• Niezależność od platformy operującej sklepem (back-end)
• Największe możliwości dostosowania do własnych potrzeb
• Modułowa/komponentowa budowa
• Mniejsze obciążenie serwera
• Optymalizacja ilości przesyłanych danych
• Najnowsze technologie i rozwiązania na wyciągnięcie ręki
• Bezpieczeństwo - komunikacja wyłącznie poprzez HTTPS

PWA przyszłością e-commerce

Nie każda organizacja w tej chwili już decyduje się na podjęcie kroków w stronę migracji swoich rozwiązań e-commerce do PWA. Wskazują przede wszystkim, że to nowa technologia, jednak pamiętajmy, że samo podejście i rozwiązania SPA nie są czymś nowym: na przykład platforma Angular ma już 9 lat i jest dojrzałym rozwiązaniem. PWA wspierają wszystkie najbardziej popularne wyszukiwarki (wyjątkiem są jedynie starsze urządzenia oraz Safari i Edge, choć już od najnowszej wersji ma to być zniwelowane).

To właśnie wersja sklepu napisana w technologiach PWA - stabilna, bezpieczna i oferująca użytkownikom najlepsze Mobile Customer Experience - wydaje się przyszłością liderów branży e-commerce.