.svg)
.svg)
.svg)
.svg)
Progresywne aplikacje webowe (PWA)
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 polega na urządzeniach mobilnych nie mniej niż na komputerach stacjonarnych 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 korzystania 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 przyjęliśmy PWA 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 — określa się ją skrótem FIRE:
FAST
INTEGRATE
RELIABLE AND
ENGAGING
Must have PWA — czyli co wyróżnia standard PWA?
.png)
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.
Zapisanie skrótu do aplikacji bez instalacji – dzięki plikowi Web App Manifest, użytkownicy mogą dodać skrót aplikacji na ekran główny swojego urządzenia bez potrzeby jej instalowania ze sklepu. Plik w formacie JSON, definiuje takie informacje jak nazwa aplikacji, język, domyślna orientacja czy ikona, co pozwala aplikacji funkcjonować i wyglądać podobnie do natywnej.
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.
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.
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.
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.
AI
Wykorzystanie AI pozwala na efektywne dostosowanie i automatyzację procesów biznesowych, dzięki czemu aplikacje precyzyjnie analizują dane i dostosowują się do potrzeb użytkownikó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%
aż 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
Czy PWA sprawdzają
się w e-commerce?
Wymierne korzyści z zastosowania tej technologii zauważą 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ń
Banki – usługi bankowości mobilnej, prezentacja produktów i oferty oraz komunikacja z klientami
Serwisy informacyjne – rozbudowane portale z kontami użytkowników dostarczające personalizowane treści na podstawie preferencji
Fundusze inwestycyjne – zarządzanie portfelami inwestycyjnymi
Firmy logistyczne – aplikacje dla kurierów realizujących złożone dostawy
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 jest wspierane przez zaawansowany algorytm, który sugeruje rozszerzoną ofertę produktową dostosowaną do preferencji użytkownika.
Dlaczego warto?
200%
Użytkownicy mobile spędzają 2 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ż oddziela front-end od back-endu, wykorzystując API jako łącznik. Headless PWA oferuje większą elastyczność niż tradycyjne monolityczne rozwiązania, umożliwiając niezależny rozwój warstwy prezentacyjnej. Narzędzia takie jak Vue Storefront – platforma front-endowa open source dla headless commerce – umożliwiają pełne wykorzystanie potencjału skalowalności i wydajności, co ma kluczowe znaczenie dla dynamicznie rozwijających się biznesów.
Aplikacja natywne
Tworzone całkowicie pod jedną platformę, gdzie każda aplikacja bazuje na odrębnym kodzie dla Android, iOS i innych systemów.
Konieczność pobrania z App Store/Google Play, co skutkuje opłatami dla wydawców. Aplikacja zainstalowana na urządzeniu może wymagać cyklicznych, czasochłonnych aktualizacji.
Aplikacja PWA
Dostępne i zoptymalizowane pod kątem funkcjonowania na różnych platformach oraz desktopie.
Brak konieczności instalacji i automatyczne aktualizacje, niemal w czasie rzeczywistym. Do ekranu urządzenia wystarczy dodać skrót aplikacji i od razu można rozpocząć użytkowanie.
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 zarówno ze specyficznych funkcjonalności, jak i ograniczeń, których znaczenie należy ocenić w kontekście 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)
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, także w kontekście działań promocyjnych.
- Lekkość – ważna dla szybkiego pobierania i minimalnego wykorzystania zasobów, co sprawia, że użytkownicy rzadziej usuwają aplikację ze swoich telefonó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.
