Progresywne aplikacje internetowe
Rzeczywistość mobile
Żyjemy w erze smartfonów. Nie tylko ułatwiają, ale i determinują one codzienne funkcjonowanie zarówno w prywatnej, jak i zawodowej sferze życia. Z ich pomocą z Internetu korzysta aż 71% użytkowników. Zdecydowana większość z nich na urządzeniach mobilnych polega nie mniej niż na desktopie czy tabletach. W parze z rosnącym znaczeniem i zaufaniem do technologii mobilnych idą rosnące wymagania w zakresie prędkości, bezpieczeństwa i ogólnej jakości usług. Pytanie o mobile w przestrzeni rozwiązań IT nie brzmi już CZY warto, lecz JAK optymalizować działanie stron i aplikacji mobilnych?
Nowy standard użyteczności
Elastycznym rozwiązaniem dla firm, które chcą podjąć tak postawione wyzwanie i osiągnąć sukces w sieci, są progresywne aplikacje internetowe, czyli PWA. To nowoczesny sposób budowana aplikacji obejmujący zbiór praktyk i technologii, których celem jest zwiększenie użyteczności. W praktyce oznacza to, że PWA łączy to co najlepsze w doświadczeniu użytkownika podczas korzystana z Internetu: działa w domyślnej przeglądarce internetowej, zachowując się jak natywna aplikacja na wszystkich urządzeniach mobilnych, a wszystko to zapewnia również w trybie offline.
W x-one PWA przyjęliśmy za nowy standard, który już niebawem stanie się tak oczywistym i nieodłącznym elementem projektowania, jak obecnie funkcjonujące pojęcie responsywności. Z powodzeniem wdrażamy go do realizacji różnorodnych projektów dla naszych klientów z wielu branż.
Nie bez przyczyny technologia PWA dorobiła się użytecznego akronimu, pozwalającego zrozumieć, dlaczego jest tak efektywna. Za Google określa się ją skrótem FIRE:
FAST
INTEGRATE
RELIABLE
ENGAGING
Must have PWA czyli
co wyróżnia standard PWA?
Działanie w trybie offline – to kluczowa wartość i wyróżnik PWA, gdyż w przypadku braku dostępu do sieci zapewnia ciągłość działania przeprowadzając synchronizację w tle. W tym celu posługuje się fragmentem kodu zwanym Service Workerem.
Bezpieczeństwo i prywatność połączenia – dzięki certyfikatowi HTTPS uwierzytelniającemu odwiedzane strony i zapewniającemu integralność przesyłanych danych, dodatkowo stanowiącemu wymóg działania service workerów.
Plik Web App Manifest, który w pliku tekstowym JSON definiuje informacje o aplikacji (takie jak nazwa, język, domyślna orientacja, czy ikona aplikacji, którą użytkownik może zapisać na ekranie głównym) niezbędne do jej pobrania i zaprezentowania w sposób zbliżony do aplikacji natywnej.
Szybkość – aplikacje PWA doskonale wpisują się w standard Mobile First, w którym szybkość ładowania stron mobilnych (w tym przypadku opartych na PWA) to kluczowy czynnik wpływający na jakość doświadczenia użytkownika. Prędkość działania sprzyja również indeksowaniu przez Google, a tym samym podnosi widoczność w wynikach wyszukiwania.
Automatyczne aktualizacje – zmiany publikowane są natychmiastowo poprzez umieszczenie plików na serwerze, tak jak w przypadku serwisów www. Użytkownicy zawsze dysponują więc najnowszą wersją bez konieczności pobierania aktualizacji ze sklepów, a wydawca zyskuje ścisłą i niezwłoczną kontrolę nad funkcjonowaniem aplikacji.
User experience – pełna responsywność oraz UX dorównujący aplikacjom natywnym.
Innowacyjne rozwiązania mobile dla biznesu
Dostarczając innowacyjne technologie pomagamy firmom przenieść się do rzeczywistości mobilnej: dostosować do aktualnych wymogów i wyjść naprzeciw nowoczesnym trendom. Praktyczna znajomość PWA pozwala nam na tworzenie rozwiązań dedykowanych, by precyzyjnie i kompleksowo realizować cele biznesowe naszych klientów.
Omnichannel
wdrożenie PWA to najlepsze wykorzystanie potencjału omnichannel. Dostarczając nowe, zintegrowane kanały sprzedaży i efektywne narzędzia komunikacji oferuje ujednolicone doświadczenia zakupowe.
Zaangażowanie
większe możliwości w zakresie zwiększania zaangażowania i lojalności klientów w porównaniu do konieczności instalowania kolejnych aplikacji natywnych. Komunikacja możliwa nawet w trybie offline, dzięki komunikatom push.
Zaufanie
spójne rozwiązania i komunikacja w różnych narzędziach sprzyja budowaniu wiarygodności marki.
Koszt
działanie w przeglądarce i na wielu platformach eliminuje konieczność wdrożenia rozwiązania osobno na różne urządzenia i obniża koszt realizacji projektu.
Optymalizacja
skrócenie czasu i zwiększenie efektywności obsługi procesów wewnętrznych, takich jak obsługa klientów, logistyka, produkcja, rozliczenia pracowników i wiele innych.
Konwersja
połączenie szybkości działania i zwiększenia zaangażowania użytkowników wpływa bezpośrednio na wzrost konwersji w dziedzinie e-commerce.
Szybkość działania aplikacji, a zachowania użytkowników
70
kupujących na urządzeniach mobilnych zrezygnuje z procesu zakupu w ciągu kilku sekund, jeśli uzna proces za niedostatecznie łatwy
8
100 milisekund może dzielić od poprawy liczby konwersji o 8%
5
100 milisekund może dzielić od poprawy zaangażowania użytkowników o 5%
Źródło: 55 the data company and Deloitte Digital: Milliseconds make Millions
Dla kogo PWA
e-commerce
Wymierne korzyści z zastosowania technologii odniosą organizacje planujące rozszerzenie lub koncentrację komunikacji z użytkownikami mobile oraz te firmy, które już notują duży ruch z urządzeń mobilnych. Stanowi ona odpowiedź na potrzeby stworzenia multi-platformowej aplikacji z funkcjonalnościami aplikacji natywnej, z której użytkownicy korzystać będą niezależnie od miejsca, w którym przebywają i urządzenia, którym posługują się w danej chwili.
Branże i przykłady obszarów funkcjonowania, którym dedykujemy innowacyjne rozwiązania na mobile to m.in.:
Firmy ubezpieczeniowe – prezentacja oferty i porównywanie warunków ubezpieczeń
Fundusze inwestycyjne – zarządzanie portfelami inwestycyjnymi
Banki – usługi bankowości mobilnej, prezentacja produktów i oferty oraz komunikacja z klientami
Firmy logistyczne – aplikacje dla kurierów realizujących złożone dostawy
Serwisy informacyjne – rozbudowane portale z kontami użytkowników dostarczające personalizowane treści na podstawie preferencji
Platformy e-commerce – sklepy notujące nawet kilkaset sesji/msc, wykorzystujące smart search, powiadomienia push, geolokalizację, dostęp offline
Narzędzia na miarę
e-commerce
W przestrzeni e-commerce implementacja standardu PWA to wyposażenie w użyteczne narzędzia i rozwiązania kluczowe dla zwiększenia konwersji. Od startupu po największe marki - użyteczność i potencjał PWA jest nie do przecenienia dzięki mierzalnym efektom implementowanych funkcjonalności.
Dostępność
dla użytkowników na wielu urządzeniach, również tych starszych, co zapewnia szybkie dotarcie do grup docelowych i przyczynia się bezpośrednio do zwiększenia liczby unikalnych użytkowników i odsłon.
Powiadomienia Push
i zastosowanie technologii OneSignal umożliwia wysyłanie powiadomień do użytkowników. Informacje o nowościach, promocjach, alerty i przypomnienia wysyłane są nawet gdy opuszczą stronę. W przypadku użytkowników mobilnych powiadomienia to pierwszy komunikat, który widzą na ekranie telefonu. Technologia ta zapewnia szeroki wybór form przekazu: od bannerów, personalizowanych e-maili czy pop-upów, do wiadomości sms. Dopełnieniem możliwości personalizacji oraz automatyzacji jest opcja raportowania w czasie rzeczywistym.
Geolokalizacja
czyli określenie lokalizacji użytkowników w oparciu o parametry pochodzące z GPS (szerokość i długość geograficzna oraz wysokość nad poziomem morza), która odbywa się w niezwykle dokładny sposób. Wykorzystanie dostępu do GPS otwiera możliwości precyzyjnego targetowania pod względem lokalizacji. Geotargetowaniem dla konkretnej grupy odbiorców można objąć reklamy, komunikaty i oferty. Dodatkowo na podstawie analizy geolokalizacyjnej możliwe jest zdefiniowanie ograniczenia dostępu w oparciu o lokalizację, co ma nieodzowne znaczenie w kwestii bezpieczeństwa.
Smart Search
którego podstawą jest autokorekta i autouzupełnianie fraz oraz filtrowanie i sortowanie wyników jest podstawą optymalizacji wyszukiwarek pod mobile, zwłaszcza w przypadku branż i sklepów, w których występuje dużo nazw własnych, trudnych lub obcego pochodzenia. Szybkość i wydajność to parametry kluczowe, tym bardziej dla sklepów o dużych bazach. Ponadto inteligentne wyszukiwanie wpiera silnik, który sugeruje poszerzoną ofertę produktową powiązaną z preferencjami użytkownika. Im mniejsze prawdopodobieństwo wyświetlenia wyniku „not found”, tym większe szanse na sprzedaż, jak również na skuteczną realizację strategii biznesowej i budowanie lojalności klientów.
Dlaczego warto?
200
Użytkownicy mobile spędzają 200 razy więcej czasu na zakupach online w porównaniu do użytkowników desktop.
53
53% użytkowników opuszcza stronę, która ładuje się dłużej niż 3 sekundy.
43
43% klientów sklepów online w pierwszej kolejności korzysta z wyszukiwarki.
50
Personalizowane powiadomienia push mają o 50% wyższy współczynnik klikalności niż wiadomości wysłane bez segmentacji użytkowników.
Źródło: https://www.algolia.com/blog/ecommerce/e-commerce-search-and-kpis-statistics, https://onesignal.com/blog/insights-from-118-billion-push-notifications-sent-through-onesignal/
PWA i architektura Headless
dla Mobile First Design
PWA jako naturalna konsekwencja wzrostu liczby internautów wykorzystujących urządzenia mobilne z powodzeniem realizuje podejście mobile first. Mobile first to skuteczność dotarcia do użytkownika mobilnego i wszelkie działania podporządkowane temu celowi. W myśl tej zasady zmodyfikowany na przestrzeni ostatnich miesięcy został sposób indeksowania stron przez Google, w którym określanie pozycji witryny następuje przede wszystkim na podstawie dostępności informacji dla użytkownika mobilnego. Podejście to znajduje wyraz również w sposobie projektowania, w którym priorytet stanowi optymalizacja pod mniejsze rozdzielczości odpowiednie dla wersji mobile, po to by zapewnić najlepszy możliwy UX uwzględniając ich specyfikę i możliwości.
Wdrożenie elastycznej, modularnej architektury Headless sprzyja takiej metodyce projektowania. Umożliwia ona tworzenie wyspecjalizowanych wersji witryn na zasadzie tzw. progresywnego ulepszania projektu, w którym proces rozpoczyna się od ekranów urządzeń o najmniejszej rozdzielczości, a następnie stosownie do wzrostu rozdzielczości istniejące funkcjonalności są rozbudowywane i dodawane są nowe.
Według badań Gemius/PBI z sierpnia 2020, liczba internautów wykorzystujących urządzenia mobilne wyniosła 24,2 mln
Dlaczego headless? Ponieważ rozdziela front od backendu z API w formie pomostu pomiędzy nimi. Headless PWA to model, który otwiera nowe możliwości, nieskrępowane określonymi z góry technologiami wykorzystywanymi do przygotowania warstwy prezentacji, jak w przypadku klasycznych monolitycznych modeli. Takie silne i innowacyjne technologicznie połączenie pozwala nam tworzyć wydajne i dostępne dla użytkowników aplikacje. Wykorzystując narzędzia takie, jak np. Vue Storefront – platformę frontendową typu opensource dla headless commerce, wykorzystujemy w pełny i ekonomiczny sposób elastyczność i dynamiczność jaką oferuje rozwijającym się biznesom.
Aplikacja natywne
Tworzone całkowicie pod jedną platformę – jedna aplikacja bazuje na oddzielnym kodzie dla Android, iOS i pozostałych.
Konieczność pobrania z App Store/ Google Play, co skutkuje opłatami dla wydawców. Instalowana na urządzeniu aplikacja wymaga dokonywania czasochłonnych nieraz aktualizacji.
Tworzone całkowicie pod jedną platformę – jedna aplikacja bazuje na oddzielnym kodzie dla Android, iOS i pozostałych.
Aplikacja PWA
Dostępne i zoptymalizowane pod kątem funkcjonowania na różnych platformach oraz desktopie.
Brak konieczności instalacji. Automatyczne aktualizacje, niemal real-time. Można pobrać skrót do ekranu i od razu rozpocząć użytkowanie.
Dostępne i zoptymalizowane pod kątem funkcjonowania na różnych platformach oraz desktopie.
TWA dla zwolenników
aplikacji mobilnych
Technologią, która pomaga w pełni zagospodarować kanał mobile, tj. wyjść naprzeciw zarówno tym użytkownikom, którzy preferują korzystanie z aplikacji oraz tym którzy działają w przeglądarce, jest opracowana przez Google TWA (Trusted Web Activities). TWA to w istocie nazwa komponentu, którego zadaniem jest konteneryzajca, czyli opakowanie stron internetowych w standardzie PWA po to, by w formie aplikacji móc dodać je sklepu Google Play.
- Zasięg – możliwość dotarcia do użytkowników aplikacji mobilnych. Również w zakresie obszaru działań promocyjnych.
- Lekkość – nie bez znaczenia dla szybkości pobierania i zajmowanych zasobów. Dzięki temu rzadziej usuwana z telefonów użytkowników.
- Optymalizacja czasu i kosztu – wdrożenie nawet dla obszernego serwisu zajmuje zaledwie kilkanaście dni, pociąga za sobą mniejszy koszt niż w przypadku aplikacji natywnej oraz brak konieczności utrzymywania i rozwoju na platformach.
Prawie optymalne rozwiązanie,
czyli o ograniczeniach PWA
Poza aplikacjami PWA oraz często uznawanymi za najbardziej kontrastujące z nimi pod względem funkcjonowania, aplikacjami natywnymi, wyróżnia się m.in. aplikacje hybrydowe i cross-platformowe. Powstały one w efekcie odmiennych sposobów realizowania części frontendowej. Mnogość technologii stosowanych przez programistów wynika z oczywistych specyficznych funkcjonalności, jak również ograniczeń, których wagę należy oszacować pod kątem realizacji projektu.
Gorsze funkcjonowanie na iOS, a także mniejsze wsparcie dla urządzeń Apple
Ograniczenia w korzystaniu z opcji hardware’owych i systemowych (częściowo ograniczenia w tym zakresie sprawnie nadrabia responsywnością)
Większe zużycie baterii urządzenia oraz mniejsza wydajność (istotne głównie w kwestii gier)