Progressive Web Apps (PWA) w e-commerce B2B

Partnerem audycji jest Endora. Agencja e‑commerce B2B, specjalizująca się w modelu 360. Od budowania strategii sprzedaży online, po wdrażanie platform B2B i ich integrację z ekosystemem technologiczno-biznesowym. Wejdź na Endora.pl i dowiedz się więcej.

Cześć. W dzisiejszym odcinku Manufaktury E‑commerce chciałem poruszyć temat rozwiązania, które pozwala przekształcić naszą platformę B2B bądź platformę sprzedażową w pełnoprawną aplikację mobilną.

Mowa tutaj o technologii Progressive Web Apps, w skrócie PWA.

Jak działa PWA

Jak ona działa? Działa ona w taki sposób, że poprzez zarejestrowanie specjalnego pliku zwanego plikiem manifestu, dajemy informację urządzeniu mobilnemu o tym, że wybrana aplikacja może być traktowana jako aplikacja mobilna.

Co nam to daje? No chociażby to, że wchodząc na taką stronę, dostaje urządzenie informację, że może ona być zainstalowana jako aplikacja mobilna. W związku z tym pojawia się dodatkowe okno, które pyta nas, czy chcemy zainstalować tę stronę, jak aplikację mobilną. Jeśli wyrazimy zgodę, wówczas taka strona może wylądować jako ikona na ekranie głównym naszego urządzenia mobilnego, albo pojawić się po prostu na liście aplikacji naszego urządzenia.

Pierwsza zaleta: jedno rozwiązanie na wiele platform

Więc jest to pierwsza zaleta, którą mamy, oczywiście, jeśli zdecydujemy się, żeby zarejestrować naszą naszą platformę czy naszą nasz sklep jako rozwiązanie PWA.

Ale to nie jedyna zaleta i nie jedyna funkcja, która otwiera się przed nami w momencie, kiedy decydujemy się na zarejestrowanie aplikacji jako PWA. Przede wszystkim z tą rejestracją to tutaj od razu też zaznaczam, bo ktoś może pomyśleć, że trzeba to rejestrować na jakimś specjalnym serwisie czy w jakiejś zewnętrznej organizacji. Nic z tych rzeczy.

Jak tworzymy naszą platformę, jak budujemy to nasze rozwiązanie, to umieszczamy po prostu w kodzie tego rozwiązania ten taki jeden plik, plik manifestu, który po prostu informuje odwiedzające nas urządzenia, że możemy zainstalować to jako aplikację. Więc tak to wygląda, tak to wygląda w praktyce.

Główne funkcje PWA

Teraz za moment opowiem, jakie funkcje daje nam rozwiązanie PWA i myślę, że na podstawie tego sami zdecydujecie, czy to jest w ogóle wartościowe rozwiązanie. Natomiast czy to się opłaca tak w ogólnym ujęciu.

No, jeśli macie platformę B2B dostosowaną do urządzeń mobilnych, jeśli chodzi o wygląd, tak, czyli mamy ten tak zwany responsive web design i nasza nasze rozwiązanie wyświetla się dobrze na urządzeniach mobilnych, no to zdecydowanie warto rozważyć technologię PWA, bo na koniec dnia jesteśmy w stanie wykorzystać jedno rozwiązanie, jedno narzędzie w postaci platformy B2B na różnych kanałach, zarówno jako zwykła strona internetowa, jak i jako aplikacja mobilna, jak i jako aplikacja desktopowa, bo technologia PWA daje też taką możliwość, żeby na naszym laptopie czy na komputerze również zainstalować zainstalować naszą platformę jako aplikacja desktopowa.

Aplikacja desktopowa vs. przeglądarka

Zaraz powiem też, co to daje, co to daje w praktyce i czym to się różni od wyświetlenia tego po prostu w oknie przeglądarki.

Po zainstalowaniu po zainstalowaniu naszej platformy jako aplikacja PWA, zaleta jest taka, że z punktu widzenia urządzenia mobilnego, możemy sobie wyświetlić ten skrót na ekranie głównym naszego ekranu, na pulpicie, ale wchodząc już przez tę ikonę, wchodzimy już bez tego paseczka na górze z adresem czy dolnych jakiś dodatkowych elementów, które są dla nas znane z okna przeglądarki internetowej. Krótko mówiąc, nasza aplikacja zachowuje się jak natywna aplikacja mobilna. Nie ma tutaj z punktu widzenia takiego wizualnego, nie widać w ogóle żadnych jakiś elementów, które opakowują to w przeglądarkę internetową, więc po prostu wizualnie nie różni się to niczym od standardowej natywnej aplikacji mobilnej.

Narzędzia PWA: powiadomienia push

Jakie narzędzia dostajemy w gratisie, bądź przy niewielkiej konfiguracji w momencie, kiedy mamy do czynienia z aplikacją PWA.

Pierwsza rzecz, powiadomienia push. Mając aplikację PWA, możemy spokojnie korzystać z rozwiązań powiadomień push, czyli jesteśmy w stanie wysyłać powiadomienia na urządzenia mobilne, jak również na naszą na nasze rozwiązania czy tam urządzenia desktopowe. I to jest właśnie ta pierwsza różnica między wyświetleniem strony po prostu w przeglądarce na desktopie, a zainstalowaniem jej jako aplikacja PWA.

Jeśli wejdziemy na naszą aplikację desktopową, no to poza tym, że znowu nie wyświetla się to w oknie przeglądarki, tylko po prostu pełen pełne okno jest zajmowane przez naszą aplikację, to jeszcze dodatkowo mamy zarejestrowane powiadomienia push. To oznacza, że mamy możliwość wysyłania wszelkiego rodzaju komunikatów z naszej platformy B2B do naszych, do użytkowników naszej platformy i one będą wyświetlać się na desktopie jako powiadomienie systemowe, a na urządzeniu mobilnym jako powiadomienie push. I to nam otwiera dodatkowy kanał komunikacji z klientem.

To oznacza, że możemy mu wysyłać oczywiście różnego rodzaju komunikaty marketingowe, ale również możemy wysyłać dodatkowe informacje, na przykład o zmianie statusu zamówienia, o zmianie statusu sprawy związanej z reklamacją czy ze zwrotem, czy jakieś dodatkowe informacje o tym, że zdobył na przykład dodatkowe punkty w naszym programie lojalnościowym. Ten zakres możliwości wykorzystania powiadomień push jest w zasadzie nieograniczony i z powodzeniem działa zarówno w systemach Android, jak i iOS, jak i na desktopie.

I znowu, tak jak mówiłem, bez tworzenia natywnej aplikacji mobilnej. Nie musimy tworzyć nowego rozwiązania, tak jak działa nasza platforma w internecie, tak samo może ona działać po prostu na urządzeniu mobilnym i korzystać z powiadomień push.

Narzędzia PWA: geolokalizacja

Kolejna zaleta, geolokalizacja. W ramach interfejsów PWA mamy możliwość korzystania z geolokalizacji, co otwiera nam znowu dodatkowe możliwości w kontekście użyteczności naszej platformy. Przykładowo, na podstawie geolokalizacji możemy podpowiadać najbliższą lokalizację czy najbliższy nasz punkt odbioru, na przykład jakiś towarów. Możemy wstępnie wypełniać dane adresowe albo podpowiadać różnego rodzaju rzeczy związane z lokalizacją naszego klienta.

Ta lokalizacja działa w dwóch obszarach, to znaczy są dwa tryby. Jest tryb przybliżony i dokładny. Jeden i drugi jest dostępny. Trzeba się liczyć z tym, że klient przy instalacji aplikacji musi wyrazić po prostu zgodę na to, żeby ta, żeby tę geolokalizację uruchomić. No ale to nie jest coś, co przy instalacji natywnej aplikacji mobilnej nie ma miejsca. Również wtedy przy instalacji po prostu musi taką zgodę wyrazić.

Narzędzia PWA: dostęp do kamery, wideo i zdjęć

Kolejny element, który w ramach PWA zyskujemy, to dostęp do kamery, do wideo i do zdjęć. Jest to kolejny element, który może nam ułatwić, nawet nie tyle nam, chociaż handlowcom również, ale ułatwić życie naszym użytkownikom. Przykładowo, jeśli ktoś z poziomu naszej aplikacji PWA chciałby złożyć reklamację, no to możemy go poprosić o to, żeby zrobił zdjęcie produktu albo przesłał zdjęcia tych produktów. No i dzięki PWA może po prostu zrobić bezpośrednio zdjęcie i umieścić od razu, albo po prostu może wybrać sobie z listy plików, które ma na urządzeniu mobilnym, wybrane zdjęcia i je przekazać dalej. To też jest bardzo wygodne rozwiązanie, a otwiera nam dużo więcej możliwości, bo taki dostęp do kamery pozwala nam na uruchamianie takich rzeczy jak na przykład skanowanie kodów QR, skanowanie jakiś kodów kreskowych, czy nagrywanie filmików, czy wykrywanie czegoś w okolicy.

Znam takiego klienta i miałem z nim okazję współpracować, który wykorzystywał ten interfejs do elementów grywalizacyjnych. To znaczy organizował kampanię marketingową, która polegała na tym, że w jednym z polskich miast klient zorganizował różne spoty, miejsca, gdzie po prostu jak jego klienci pojawiali się z aktywną apką i zrobili tam zdjęcie, to otrzymywali punkty, które mogli później sobie wymienić na jakieś benefity, kupony rabatowe i inne tego typu rzeczy. Także, jak widać, te możliwości możemy możliwości, które dostajemy dzięki aplikacji PWA są dość rozbudowane i w wielu wypadkach ogranicza nas tylko kreatywność.

Dłuższe sesje użytkowników

A to dopiero początek, bo przechodząc dalej do kolejnych funkcji, PWA ma też jedną z zalet względem aplikacji internetowej zwykłej, czyli takiego zwykłego wejścia na platformę B2B, mianowicie zainstalowana aplikacja ma możliwość dłuższego trzymania sesji użytkownika.

Co to w praktyce oznacza? Oznacza to tyle, że jeśli użytkownik zaloguje się na naszej platformie B2B i ma zainstalowaną aplikację PWA, to w momencie korzystania z tej naszej aplikacji, on dłużej dłużej jest zalogowany. Czyli rzadziej go wylogowuje. To jest jakby też zaleta, no bo wracając do tej aplikacji, on cały czas jest zalogowany i w kontekście swojego konta może wykonywać różne operacje. Więc nie ma uciążliwego ponownego logowania się, czy robienia zakupy, minimalizujemy przynajmniej opcję robienia zakupów jako gość. Co też ma swoją zaletę i rozszerza też nasze możliwości analityki, bo im dłużej jest klient zalogowany, tym więcej jego akcji możemy badać, analizować i dzięki temu wykrywać różnego rodzaju trendy, zachowania czy jakieś sytuacje specyficzne, które ułatwią temu klientowi, no bo my będziemy wyciągać na podstawie tego różnego rodzaju wnioski z danych, będą ułatwiały klientowi po prostu korzystanie z naszej aplikacji.

Narzędzia PWA: biometria

Swoją drogą, jeśli już mówimy o tym logowaniu się i rejestracji, to kolejna zaleta z PWA jest taka, że PWA daje nam dostęp do interfejsu związanego z biometrią. Więc logowanie odciskiem palca czy Face ID jest również dostępne w ramach aplikacji PWA.

Narzędzia PWA: tryb offline

To, co jest ciekawym rozwiązaniem i jest możliwe również z wykorzystaniem aplikacji z wykorzystaniem rozwiązań PWA, to częściowe zapisywanie w pamięci telefonu danych naszej platformy B2B.

To oznacza, że w pewnym stopniu jesteśmy w stanie korzystać z platformy B2B nie mając nawet dostępu do połączenia internetowego. Czyli krótko mówiąc, jest taka możliwość i można tak zaprojektować aplikację PWA, żeby użytkownik mógł na przykład zapoznać się z naszym katalogiem produktowym, żeby mógł przejść przez proces budowania koszyka, a nawet przez proces składania zamówienia, nie będąc podłączonym do sieci.

Działa to tak, że po prostu akcje użytkownika są odkładane w pamięci telefonu i w momencie, kiedy zostanie przywrócone połączenie internetowe, to wtedy aplikacja wysyła te zdarzenia, które które wykonywał nasz klient, wysyła dopiero na nasze serwery. Czyli krótko mówiąc, zamówienie zostanie w rzeczywistości zrealizowane z opóźnieniem, ale z punktu widzenia klienta to go nie interesuje, bo on już wcześniej przeszedł przez cały proces. Więc jak widzicie, to jest też takie podejście, gdzie w miejscach z trudno dostępną siecią albo jadąc na przykład pociągiem, możemy nie przerywać tej ścieżki zakupowej klienta, tylko możemy z powodzeniem dać mu zrealizować ten cały proces zakupowy i po prostu w momencie, kiedy aplikacja będzie miała dostęp do wszystkich interfejsów, będzie mogła wysłać dopiero te zamówienia.

Podsumowanie zalet PWA

Więc jak widać, aplikacja PWA czy to rozwiązanie, ta technologia otwiera nam szereg różnych możliwości, których przy zwykłej stronie internetowej po prostu nie mamy dostępnych. I to wszystko jeszcze z doświadczeniem użytkownika typowym dla aplikacji mobilnej. Czyli tak naprawdę łączymy najlepsze z dwóch światów. Ze świata aplikacji mobilnych i ze świata aplikacji internetowych, łączymy to w jedno.

Dystrybucja PWA w sklepach z aplikacjami

Co więcej, o tym nie mówiłem, ale aplikacje PWA przy odpowiedniej konfiguracji i odpowiednim opakowaniu, czyli przy kilku dodatkowych krokach, mogą być z powodzeniem dystrybuowane na marketplace'ach z aplikacjami mobilnymi. W związku z tym nic nie stoi na przeszkodzie, żeby wasza platforma pojawiła się w Google Play czy na App Store.

I to wciąż z jedną bazą kodu. Więc generalnie, jeśli pomyślicie o tym głębiej, no to po prostu to jest czyste Eldorado. No mamy jedno rozwiązanie, jeden produkt, nie musimy pisać aplikacji mobilnej, musimy tylko lekko dostosować to, co posiadamy i możemy korzystać czy dystrybuować, czy pojawiać się z tą z tą naszą platformą w wielu różnych kanałach, bo i w internecie i na marketplace'ach. No, żyć nie umierać. Więc oczywiście, jeśli ktoś nad tym zastanowi się głębiej, no to będzie szukał drugiego dna i zastanawiał się, dlaczego w takim razie wszyscy tego nie stosują.

Ograniczenia PWA

No i oczywiście, jak zwykle, diabeł tkwi w szczegółach. Są takie scenariusze, gdzie PWA nie będzie wystarczające i będziemy musieli korzystać z natywnej aplikacji mobilnej.

Najczęściej ma to miejsce wtedy, kiedy chcemy korzystać z jakiś takich zewnętrznych zewnętrznych elementów naszego telefonu albo urządzeń, tak zwanych peryferyjnych. Czyli gdybyśmy chcieli korzystać na przykład z akcelerometru w telefonie, no to wtedy no nie ma tego dostępu bezpośredniego w aplikacji PWA. Kolejnym ograniczeniem jest dostęp do Bluetooth. To jest wciąż niemożliwe. W bardzo ograniczonym zakresie trwają takie prace, które powinny umożliwić ten dostęp, ale na razie tego nie ma. Więc jeśli byśmy chcieli korzystać właśnie z tych rozwiązań Bluetooth, no to niestety nie ma takiej możliwości na ten moment przynajmniej.

Również interfejs NFC, czyli taki zbliżeniowy, na ten moment nie jest wspierany. Więc jest kilka takich rzeczy, których w przypadku naszego naszej aplikacji PWA osiągnąć nie będziemy mogli. Natomiast z praktyki mogę powiedzieć, że 85 czy 90% tak naprawdę e‑commerce'ów i funkcji, które oni potrzebują, spokojnie można obsłużyć tym, co oferuje technologia PWA.

Podsumowanie i kontakt

Także mam nadzieję, że przybliżyłem trochę wam ten ten temat, te technologie i te rozwiązania i będziecie na tyle przynajmniej, że będziecie w stanie ocenić, czy PWA będzie adekwatne dla waszych zastosowań, czy lepsze będzie jednak użycie natywnej aplikacji mobilnej. Żeby było jeszcze ciekawiej, to dodam, że w przypadku technologii rozwiązania PWA można też pisać tak zwane mostki czy adaptery w językach, które są typowe dla natywnych aplikacji mobilnych, żeby rozszerzać z kolei funkcje aplikacji PWA. Czyli potencjalnie jesteśmy w stanie zrobić takie rozwiązanie hybrydowe. Czyli budujemy na przykład aplikację PWA, a jeśli potrzebujemy jakiś elementów, które powinny być w które nie są dostępne w PWA, ale są dostępne w aplikacji natywnej mobilnej, możemy dobudować taki adapter, zmontować to jako aplikację mobilną i na koniec dnia korzystać ze wszystkich funkcji, które oferują nam współczesne urządzenia mobilne.

Także mam nadzieję, że to pomoże wam zdecydować, czy warto w waszym wypadku iść w PWA. Jeśli macie co do tego wątpliwości, to w opisie odcinka znajduje się do mnie kontakt, także śmiało możecie się odzywać i skonsultować wasz przypadek, chętnie pomogę. Zachęcam też do dzielenia się odcinkiem i do subskrybowania kanału. No po prostu, żeby ta wiedza krążyła, bo tylko wtedy ma ona sens. Na dziś z mojej strony to tyle. Dzięki wielkie za uwagę i mam nadzieję, że widzimy się w kolejnym odcinku Manufaktury E‑commerce. Cześć.

Progressive Web Apps (PWA) w e‑commerce B2B