Aplikacja PWA w sklepie internetowym BRW

Grupa Black Red White to największa w Polsce grupa meblarska, która produkuje i dystrybuuje meble oraz akcesoria wyposażenia wnętrz. Grupę Kapitałową stanowi Black Red White S.A, oraz 18 spółek zależnych, w tym 10 zagranicznych. Oferta Grupy jest dostępna na prawie 60 rynkach na całym świecie.

Zadania i cele

Firma BRW dba o swoich klientów i zależy jej na spełnianiu oczekiwań użytkowników, niezależnie czy korzystają z komputerów, czy urządzeń mobilnych. W ramach najnowszego pakietu prac optymalizacyjnych w sklepie internetowym www.brw.pl wdrożyliśmy technologię Progressive Web App (PWA). Aby dostosować stronę do wdrażanej technologii, konieczne było przeprowadzenie redesignu serwisu, rozbudowa mechanizmów koszyka oraz poprawa UX dla użytkowników mobile.

Dla BRW, od ponad 10 lat, stale rozwijamy narzędzia e-commerce.

Dzięki wdrożeniu PWA, nowy sklep internetowy Klienta działa jak standardowa strona internetowa, jednak wyglądem i zachowaniem przypomina aplikację. Jednocześnie, dzięki zastosowaniu PWA, nie ma potrzeby pobierania i instalowania standardowej aplikacji na urządzeniu. Wystarczy uruchomić stronę w przeglądarce internetowej. Kluczowym mechanizmem dla PWA jest Service Worker, za pomocą którego przetwarzane są dane dostępne również w trybie offline. Dzięki temu wszystkie strony sklepu (poza koszykiem) są dostępne w trybie offline.

PWA daje możliwość przeglądania sklepu w trybie offline.

Każde połączenie z serwerem w celu pobrania informacji o określonej podstronie przepływa przez Service Worker. Odpowiada on między innymi za zapamiętywanie danych w  indexedDB (Indeksowany Interfejs API bazy danych) zgodne ze strategią Network First (Network Falling Back to Cache). Tym sposobem system zapamiętuje akcje użytkownika, również będącego w trybie offline. Przy kolejnym połączeniu z internetem wysyła te informacje do Google Analytics. Takie rozwiązanie można wykorzystać np. do analizy zachowań swoich potencjalnych klientów.

Klientowi zależało również na tym, aby strona nie przeładowywała się podczas poruszania się po niej. Dlatego zastosowaliśmy technologię SPA (Single Page Application). Dzięki niej interfejs strony jest dynamiczny - elementy na stronie są renderowane w chwili, gdy użytkownik je przegląda. Technologia – SSR (Server-Side Rendering) wpływa na szybkość ładowania się strony, gdyż jej renderowanie odbywa się bezpośrednio po stronie serwera i nie wymaga wcześniejszego pobierania i przetwarzania danych. SSR oparliśmy o framework Nuxt, uruchomiony na serwerze Node.js.

PWA gwarantuje poprawne wyświetlanie się treści na każdym urządzeniu, zarówno na telefonach, komputerach, jak i telewizorach. Zapewnia wysoki komfort użytkowania oraz pozytywne doświadczenia odbiorcy.

4. miejsce w rankingu Koszyk Roku 2020

Koszykroku.pl to badanie i ranking najbardziej przyjaznych sklepów internetowych w Polsce. W tym roku autorzy (Twisto we współpracy z EDISONDA) przebadali wersje mobilne stron, PWA oraz aplikacje. Badaniu zostało poddanych 100 najczęściej odwiedzanych sklepów internetowych w Polsce. Największy nacisk badający położyli na łatwość i wygodę korzystania z procesu zakupowego i interfejsu mobilnego.

Główne korzyści dla Klienta

• zastosowana technologia PWA zwiększa możliwości sklepu internetowego,
• aplikacja działa sprawnie i płynnie poprawiając mobile experience,
• zapewnia komfort użytkowania również w trybie offline,
• zastosowane technologie wspierają pozycjonowanie strony.