PWA kolejnym etapem rewolucji mobilnej

Klienci zdążyli już zadomowić się w świecie rozwiązań mobilnych. Żeby przejrzeć aktualności, sprawdzić stan konta lub zrobić zakupy, prawdopodobnie sięgną po telefon lub tablet. Jednak coraz rzadziej pobierają aplikacje mobilne, które nadmiernie obciążają ich urządzenia. Tym samym firmy, które chcą najlepiej zagospodarować ich potrzeby, powinny skierować swoją uwagę na PWA (Progressive Web Apps).

Mobile first to dzisiaj po prostu PWA

PWA to strony internetowe, które dzięki nowoczesnym technikom wyróżniają się szybkością i niezawodnością. Chociaż wyglądają jak typowe aplikacje mobilne, nie trzeba ich szukać w sklepie z aplikacjami. Do jej działania wystarczy przeglądarka internetowa i adres URL, więc tak jak w przypadku innych stron można z nich korzystać bezpośrednio z poziomu wyszukiwarki bez konieczności ich instalacji.

Pomimo to użytkownik może ją zainstalować na swoim urządzeniu. Standard PWA dopasowuje się do jego preferencji i w momencie załadowania się strony pyta, czy dodać ją do ekranu startowego. W przypadku potwierdzenia aplikacja automatycznie przeprowadzi instalację. Odwiedzający nie musi opuszczać strony i przechodzić do sklepu, a do jej ponownego otwarcia wystarczy kliknięcie ikonki na ekranie.

Liczba aplikacji na naszych urządzeniach stale rośnie. Dlatego standard PWA został zaprojektowany tak, żeby zajmować jak najmniej miejsca na dysku. Dobrym przykładem jest tutaj aplikacja serwisu Onet, która w wersji PWA zajmuje 149KB w porównaniu do 24,5MB aplikacji mobilnej dla systemu Android. Jest to możliwe, ponieważ aplikacje webowe są hostowane na serwerze strony.

Aplikacje webowe to doświadczenie szyte na miarę

W przeciwieństwie do aplikacji mobilnych PWA działa na dowolnym urządzeniu. Aplikacja dostosowuje się do każdej platformy bez względu na to, czy działa ona na systemie Android, iOS, Windows czy środowisku Linux jak Ubuntu lub Chrome OS. Dzięki temu użytkownik zawsze otrzymuje spójne doświadczenie i dostęp do ulubionych funkcji.

Aplikację webowe uwzględniają, że w walce o utrzymanie uwagi klienta liczą się sekundy. Według DoubleClick Google’a, aż 53% użytkowników opuszcza witrynę, która ładuje się dłużej niż 3 sekundy. Dlatego w PWA część danych wczytywana jest wcześniej, a przy ich tworzeniu rezygnuje się z elementów, które długo się uruchamiają. W efekcie strony zazwyczaj otwierają się w mniej niż sekundę.

Tak jak aplikacje mobilne, PWA działa także offline. Użytkownik ma wtedy dostęp do funkcji, które nie wymagają połączenia z siecią, ponieważ dane są pozyskiwane podczas każdej wizyty w serwisie i przechowywane w pamięci urządzenia. Strony PWA wykorzystują też powiadomienia, które zawsze można wyłączyć bowiem po dodaniu do ekranu, trafiają one do listy zainstalowanych aplikacji w ustawieniach.

Co się kryje pod maską PWA?

Stworzenie dobrej aplikacji mobilnej jest długim i kosztownym procesem. Ponadto trzeba uwzględnić w nim wymogi sklepów z aplikacjami. Jednak konstrukcja PWA stosuje znacznie prostsze podejście, które pozwala zaoszczędzić czas i pieniądze. Takie rozwiązanie skraca tę drogę, ponieważ użytkownik po wejściu na stronę od razu zaczyna z niej korzystać. To podejście ułatwia także wprowadzanie uaktualnień. Dzięki temu, że aplikacje komunikują się z serwerem, automatycznie aktualizują się do najświeższej wersji.

Aplikacja PWA składa się z trzech podstawowych elementów. Pliku konfiguracyjnego, Web App Manifest, zawierającego informacje o aplikacji w formacie JSON. Informuje on o zainstalowanych stronach na urządzeniu, dzięki czemu zapewnia użytkownikom szybszy dostęp do jej funkcji. Manifest umożliwia na przykład przypisanie ikonki do aplikacji, ukrycie paska z adresem URL czy określenie nazwy aplikacji.

Przy pierwszym uruchomieniu ładowany jest szablon aplikacji, Application Shell, który jest zapisywany w pamięci urządzenia. Podczas przechodzenia pomiędzy stronami szablon jest wypełniany odpowiednimi treściami. Natomiast skrypt Service Worker z modułem do obsługi zdarzeń pośredniczy pomiędzy aplikacją a przeglądarką i może zbierać dane. Ponadto, to on odpowiada za to, że przeglądarka zapamiętuje dane do ponownego wykorzystania, umożliwiając między innymi działania offline.

Dzięki swojej konstrukcji PWA ma jeszcze jedną przewagę nad tradycyjnymi aplikacjami. Chociaż z perspektywy użytkownika PWA to pełnoprawna aplikacja, z technicznego punktu widzenia wciąż pozostaje stroną internetową. I jak każda strona, ma własną strukturę podstron o unikalnych adresach URL, które podlegają indeksowaniu. Taka architektura łączy ze sobą komfort charakteryzujący aplikacje mobilne z lepszą optymalizacją SEO firmowej strony.

PWA to kompleksowe customer experience

PWA zdobywa coraz większą popularność, ponieważ poprawia szybkość działania strony i gwarantuje użytkownikom kompleksowe doświadczenie. Dzięki wykorzystaniu tego standardu strona Ubera w sieci 2G wczytuje się poniżej 3 sekund. Z kolei Pinterest wykorzystując to rozwiązanie, podwyższył współczynnik zaangażowania o 60%, jednocześnie zwiększając ilość treści generowanych przez użytkowników o 44%.

Wybór PWA upraszcza proces przygotowania i zarządzania aplikacją, działającą na wszystkich popularnych platformach. Wiążę się z szeregiem udogodnień po stronie użytkownika, które jeszcze dokładniej prezentuje ebook “PWA: jak to działa?”. Dlatego kolejne firmy przechodzą na ten standard, przyspieszając adaptację tego rozwiązania.

Autor:

Michał Szklarski, architekt aplikacji i konsultant ds. rozwiązań cyfrowych. Karierę zawodową rozpoczynał w sektorze cyberbezpieczeństwa, następnie przeszedł przez fazę startupową, by wreszcie trafić do e-point, gdzie realizuje się jako projektant rozwiązań e-commerce. Od zawsze zafascynowany nowościami w zakresie WWW i mobile oraz najnowszymi technologiami, takimi jak PWA, AMP, Google Pay API, połączonymi z doskonałym User Experience.