Progressive Web App (PWA) to rozwiązanie, które zyskuje na popularności w kontekście e-commerce. Powszechnie kojarzy się z wersją sklepu na telefonie, jednak jej idea oraz główne założenia mają głębszy sens i coraz częściej znajdują zastosowanie w systemach sprzedażowych opartych na nowoczesnej architekturze.
Na takie wdrożenie zdecydowała się marka OCHNIK. Firma gości na polskim rynku od roku 1989. Jej ponad 30-letnia historia zaczęła się od marzenia o skórzanej kurtce, którą bracia Jacek i Cezary Ochnik postanowili zaprojektować na własny użytek. Kurtka szybko znalazła nabywcę, a zysk ze sprzedaży przeznaczono na uszycie kolejnych egzemplarzy. To był strzał w dziesiątkę - okazało się, że skórzane kurtki OCHNIK cieszą się ogromną popularnością. Obecnie marka oferuje swoim klientom nie tylko skórzaną odzież i galanterię, ale również odzież i walizki. OCHNIK poza sklepem online, to też sieć ponad 100 salonów stacjonarnych w całej Polsce.
Chcesz przeczytać opis wdrożenia marki OCHNIK? Zajrzyj na nasze case study.
Czym jest PWA?
Najczęściej można spotkać się z opisem, że progressive web app to „progresywna aplikacja internetowa uruchamiana tak jak zwykła strona internetowa, ale umożliwiająca stworzenie wrażenia działania jak natywna aplikacja mobilna lub aplikacja desktopowa.” I jest to prawdziwe, jednak bardzo skondensowane stwierdzenie o PWA. Można dodać, że zostało zaprojektowane w celu zapewnienia klientowi jak najlepszych doświadczeń, niezależnie od tego z jakich urządzeń korzysta. Takim urządzeniem najczęściej dzisiaj jest smartfon i laptop, ale w przyszłości także każdy inny nośnik z dostępem do internetu.
Z punktu widzenia użytkownika, PWA w ecommerce działa jak aplikacja mobilna, jednak uruchamiana jest jak standardowa strona internetowa czy serwis transakcyjny. Aby rozwiązanie spełniało cechy progressive web app, musi być m.in.:
- w pełni responsywna,
- serwowane przez protokół https w celu zapewnienia bezpieczeństwa,
- opisana przez plik manifest.json,
- umożliwiać wysyłanie notyfikacji użytkownikom,
- działająca także w trybie offline.
Działanie offline
Wśród czynników wyróżniających PWA na tle innych rozwiązań mobilnych podaje się właśnie możliwość jej działania w trybie offline. Dzieje się to dzięki procesom Service Workers, które ściągają część danych w tle, podczas korzystania użytkownika z aplikacji.
W czasie tworzenia Progressive Web App, można precyzyjnie określić metodę działania Service Workers i tego, jak dużo działań ma być wykonywanych w tle. PWA w ecommerce bardzo dobrze radzi sobie również w momentach ograniczonego dostępu do internetu, co w kontekście zakupów online jest szczególnie ważne - klient będąc offline może dodać produkty do koszyka, a będąc online nie traci ich i finalizuje zakupy.
Hermetyzacja zadań - główna idea PWA z punktu widzenia technologii
Na rynku istnieją inne podejścia do rozwiązań mobilnych. Są to na przykład strony mobilne czy aplikacje dedykowane. Dlaczego warto jednak zwrócić uwagę na Progressive Web App? Na początku trzeba mieć świadomość, że słowo app, w kontekście PWA w ecommerce, nie do końca dotyczy rozwiązań mobilnych. Chodzi bardziej o aplikację i budowę całego systemu, który przy okazji będzie się dobrze wyświetlał na urządzeniach mobilnych.
Główną ideą Progressive Web App jest poprawa wydajności i szybkości działania systemów. Dzieje się to za pomocą hermetyzacji zadań, czyli budowania systemu w taki sposób, aby jedna jego część odpowiadała tylko za jedną wykonywaną czynność.
Headless commerce, czyli oddzielnie
Standardowo system transakcyjny sprowadza się do części backendowej, czyli serwerowej oraz frontendowej, którą widzi użytkownik. Komunikację między tymi dwoma komponentami umożliwia REST API, wykorzystujące format JSON. Komunikacja odbywa się poprzez protokół HTTP, czyli o konkretne dane, wysyłane jest konkretne zapytanie. W takim modelu, serwer jest tylko wykonawcą zapytań, dzięki czemu jest on dużo szybszy.
Sama praca nad systemem od strony dostarczyciela usług IT też jest podzielona między frontendem a backendem. Odrębne zespoły pracują nad niezależnymi jednostkami bez wzajemnej ingerencji, przy czym system nadal działa jako całość. To sprawia, że proces wdrożenia i rozwoju jest bardziej poukładany i istnieje większa kontrola nad projektem.
Przeczytaj więcej:
- 5 sygnałów, że Twój e-commerce potrzebuje technologii headless commerce
- Architektura MACH - rozwiązanie gotowe na przyszłość
Główne technologiczne zalety progressive web app
Pisząc o zaletach PWA w ecommerce można wspomnieć, że są to:
- Jedno źródło kodu dla wszystkich rozwiązań. Oznacza to, że ten sam kod tworzy zarówno stronę www, aplikację PWA, jak i aplikację mobilną dostępną dla klientów w AppStore czy Google Play.
- Szybkość działania serwisu na wszystkich urządzeniach.
Progressive web app dla użytkownika końcowego (klienta sklepu)
Stworzenie systemu w PWA w ecommerce wizualnie dużo nie różni się od standardowego rozwiązania. Dla klientów jednak, zauważalnych będzie kilka istotnych różnic:
- Szybsze działanie strony poprzez lepszą logikę funkcjonowania poszczególnych części składowych.
- Poprawa UX, a co za tym idzie, lepsze doświadczenie zakupowe.
- Możliwość odczuwania takich samych doświadczeń zakupowych, niezależnie od rodzaju wykorzystywanego przez użytkownika urządzenia (obecnie i w przyszłości).
Podsumowanie
Progressive web app w e-commerce nie należy traktować jako tylko wersji sklepu w mobile. To dużo szersze zastosowanie podejścia do sposobu działania platform e-commerce. Jedno źródło kodu dla wszystkich rozwiązań oznacza znaczące usprawnienie pracy i przyspieszenie time-to-market wszystkich rozwiązań. Uruchomienie PWA w ecommerce dla OCHNIKA pozwoliło marce całościowo przygotować się do sprostania oczekiwaniom klientów w sferze mobile.
Autorem tekstu jest Marcin Rutkowski.
