Progressive Web Application – game changer dla handlu mobilnego?

Marcin Dąbrowski, Chief Innovation Officer w ITMAGINATION

Dzięki niej Tinder zredukował czas ładowania aplikacji o ponad połowę, a Pinterest zwiększył przychody z reklam o 44 proc. Mowa o technologii PWA (Progressive Web App). Coraz częściej to właśnie ona wybierana jest do budowy rozwiązań mobilnych. Klient końcowy uzyskuje dostęp do zasobów danego usługodawcy przez swój telefon, jednym tąpnięciem, bez konieczności pobierania „ciężkiej” aplikacji czy otwierania przeglądarki. Progressive Web App (PWA) szturmem zdobywa kolejne sektory rynku. Jak wskazuje ekspert ITMAGINATION, jej wykorzystanie może zwiększyć zyski z reklam i zmniejszyć wskaźnik porzuceń koszyków zakupowych w e-sklepach.

W skrócie „PWA” kluczowe są słowa „web” i „app”. W przypadku tradycyjnych aplikacji tzw. natywnych, które użytkownicy pobierają przykładowo z Google Play lub AppStore, problemem może być pojemność telefonu. Im więcej aplikacji, tym więcej zajmują pamięci. Poszczególne aplikacje wolniej się ładują i działają. Co więcej właściciel smartfona może stanąć przed koniecznością wyboru aplikacji, które chce zachować, a które musi usunąć, aby zwolnić miejsce. Dla właściciela aplikacji taki dylemat to być albo nie być. Lekka aplikacja PWA rozwiązuje ten problem.

Marcin Dąbrowski, Chief Innovation Officer w ITMAGINATION
Marcin Dąbrowski, Chief Innovation Officer w ITMAGINATION

– Warto przyjrzeć się możliwościom PWA, szczególnie, jeśli zysk naszej firmy zależy od tego, ile osób odwiedza daną stronę internetową i jak są one na niej zaangażowane – mówi Marcin Dąbrowski, Chief Innovation Officer w ITMAGINATION. Tym bardziej, że jak podkreśla Dąbrowski, technologia PWA daje możliwość zbudowania aplikacji webowej przy wykorzystaniu narzędzi, które potrzebne są do zbudowania każdej nowoczesnej strony internetowej: HTML5, CSS i przede wszystkim JavaScript.

Zgodnie z manifestem PWA, to zaawansowane rozwiązanie pozwala osiągnąć trzy cele:

  1. Zwiększenie zaangażowania użytkownika. Serwis zbudowany w oparciu o PWA bardziej angażuje użytkownika niż standardowa mobilna strona. Właściciel smartfona umieszcza ikonkę aplikacji na ekranie głównym, wśród innych pobieranych ze sklepu dedykowanego danemu systemowi (np. AppStore, Google Play). Mimo, że to jest nadal strona internetowa, ikona dostępna jednym tąpnięciem na ekranie smartfona potęguje wrażenie, że użytkownik ma do czynienia z prawdziwą aplikacją. Znika pasek adresu znany ze zwykłej przeglądarki. Przy ładowaniu aplikacji pojawia się tzw. splash screen (ekran powitalny). Na dodatek, spływające powiadomienia push zapraszają do częstszego odwiedzania aplikacji.
  2. Działanie nawet przy niskiej jakości łącza lub zupełnie offline. Zaawansowane funkcje przeglądarki, takie jak Service Worker, cache czy lokalne bazy danych pozwalają twórcy aplikacji PWA przygotować ją do działania również w trybie bez dostępu do sieci. Dla użytkownika oznacza to, że dane i ekrany, które udało się załadować będąc online (np. informacje o hotelu z aplikacji do rezerwacji noclegów), będą dostępne także po wylądowaniu w obcym kraju, gdzie dostęp do internetu jest niemożliwy lub bardzo drogi. W przypadku tradycyjnego otwarcia strony WWW w przeglądarce telefonu taki scenariusz nie byłby możliwy.
  3. Szybkość. Dzięki mechanizmom PWA aplikacja ładuje się momentalnie. Podobnie jak w przypadku aplikacji natywnej, która zapisuje na urządzeniu większość swoich danych, również PWA może zapisać w systemie sporą część swoich plików (CSS, JavaScript, dane w formacie JSON) i aktualizować je tylko, gdy jest to niezbędne. Dzięki temu ładowanie strony PWA jest krótsze nawet o połowę niż zwykłe otwarcie strony WWW w przeglądarce.

– Przykłady wdrożeń PWA u takich gigantów, jak chociażby Tinder pokazują, jak spektakularne efekty można dzięki temu osiągnąć. Udostępnienie aplikacji Tinder w wersji PWA pozwoliło zredukować czas ładowania o ponad połowę, w porównaniu z jej wersją natywną na system Android. I to w sytuacji, kiedy „paczka dystrybucyjna” natywna waży 30 MB a PWA jedynie 2,8 MB – zaznacza Marcin Dąbrowski z ITMAGINATION.

Również zachowania użytkowników pokazują, że pokochali oni szybkość i możliwości, jakie daje PWA. Badanie przeprowadzone na nowej stronie Pinterest po wprowadzeniu PWA pokazało 40-proc. wzrost liczby sesji użytkowników trwających ponad 5 minut i wzrost o 44 proc. przychodów z reklam. W porównaniu z aplikacjami natywnymi, licząc liczbą sesji trwających ponad 5 minut, PWA wygrywa o 5 proc.

– Z tych statystyk wynika, że PWA szczególnie dobrze sprawdzi się w takich obszarach, jak e-commerce. Więcej użytkowników i dłuższe sesje przełożą się na większą liczbę konwersji, mniejszy wskaźnik porzuceń koszyków zakupowych oraz większy zysk. Również media nowych technologii (portale, gazety, blogi) czerpiące zyski z reklam i walczące o każdą sekundę uwagi swoich czytelników powinny pomyśleć o PWA. Dodatkowe funkcje offline lub online będą doskonałe dla firm oferujących różnorakie bilety, podróże, rezerwacje itp. – dodaje Marcin Dąbrowski.

PWA a sklepy z aplikacjami

Twórcy aplikacji PWA mogą dodawać je do sklepów, takich jak Google Play czy Microsoft Store. W systemie Android aplikacja PWA, raz dodana do ekranu głównego, będzie widoczna w panelu ustawień w sekcji Aplikacje, jak każda inna aplikacja natywna. Co ciekawe, również sam Microsoft automatycznie przegląda zasoby internetu w poszukiwaniu aplikacji PWA i dodaje je do swojego sklepu bez żadnej ingerencji twórcy.

W przypadku iOS i AppStore, ze względu na wyższe wymagania (m.in. dodatkowe „opakowanie” aplikacji w paczkę dystrybucyjną), wystawienie aplikacji PWA dla użytkowników oznacza więcej pracy, ale wciąż jest jak najbardziej możliwe.

Przeobrażenie WWW w PWA

Jeśli strona WWW powstała nie tak dawno temu (do 2 lat), jest całkiem możliwe, że przeobrażenie jej w aplikację PWA wcale nie oznacza dużo pracy. Szczególnie jeśli spełnia ona następujące wymagania wstępne:

  1. Komunikuje się z serwerem przez protokół HTTPS;
  2. Jest responsywna zgodnie z RWD (Responsive Web Design), tzn. dobrze dostosowuje się do wielkości ekranu urządzenia, na którym jest wyświetlana;
  3. Jest oparta o rozwiązanie typu SPA (Single Page Application), np. z wykorzystaniem jednego z popularnych frameworków JavaScript, Angular lub React.

– Nawet jeśli strona nie spełnia tych kryteriów, nie jest dzisiaj trudne ich osiągniecie. Framework JavaScript pozwala na tworzenie aplikacji szybko, wydajnie i o wysokiej jakości. Zaprojektowanie nowej strony WWW, gdy z góry wiemy, że powinna być również dostępna jako PWA, nie podnosi znacząco kosztów. Realizacja Proof of Concept aplikacji PWA dla większości typowych projektów powinno zamknąć się w maksymalnie trzech miesiącach – podsumowuje Marcin Dąbrowski.