Choć tworzy się je już od kilku lat, Progressive Web Apps zyskały na popularności dopiero w ciągu ostatnich miesięcy. Skąd wziął się ten trend i czy tworząc aplikacje mobilne warto za nim podążać?

Progressive Web Apps to zbudowane w tradycyjny sposób strony internetowe, które dzięki kilku dodatkowym elementom przypominają natywne aplikacje. Wystarczy wpisać w przeglądarce dany adres URL i zapisać daną stronę na swoim telefonie, a PWA zapewni nam tzw. “native-like experience”.

Brzmi innowacyjnie, ale Progressive Web Apps nie są żadną nowością. Ich pojawienie się Steve Jobs zasygnalizował już w 2007, choć spopularyzowane zostały dopiero kilka lat później przez Google. To, że w tym roku zrobiło się o nich głośno, znów zawdzięczamy Apple, które wraz z uaktualnieniem iOS 11.3 po cichu zaczęło wspierać Progressive Web Apps - choć w ograniczonym wciąż zakresie.

Jak właściwie działają Progressive Web Apps?

PWA to właściwie nie konkretna technologia, a zbiór webowych API, które koncentrują się wokół tego pojęcia. Najważniejsze cechy takich aplikacji to pełna responsywność i niezawodne działanie (niezależnie od przeglądarki i urządzenia), możliwość działania w trybie offline lub przy bardzo słabym połączeniu, a także płynność interfejsu użytkownika, która nie odstaje od działania UI aplikacji natywnych.

By je osiągnąć, konieczne jest wykorzystanie mechanizmów Service Worker - uruchamianych przez przeglądarkę skryptów, które zapewniają działanie strony bez interakcji z użytkownikiem, czyli nawet po jej zamknięciu. Dzięki nim możemy chociażby określić, które z zasobów na stronie powinny trafić do pamięci podręcznej przeglądarki, a co należy pobrać z serwera. W efekcie możliwe jest:

• szybsze ładowanie strony,
• zapis konkretnych danych,
• czy synchronizacja w tle.

Ważną częścią PWA jest także Web App Manifest, który oprócz możliwości określenia nazwy aplikacji i jej ikony, pozwala użytkownikowi na dodanie aplikacji do ekranu głównego urządzenia.

iOS vs Android

Niestety, pomimo słusznych założeń co do niezależności działania aplikacji na różnych urządzeniach, pozostaje problem wsparcia PWA przez producentów tych urządzeń. Apple bardzo długo wzbraniało się przed wprowadzeniem takich funkcji do systemu iOS, zapewne w obawie przed utratą dochodów z pośrednictwa sprzedaży aplikacji poprzez ich App Store. Na szczęście, w roku 2018 pojawiła się możliwość wykorzystania niektórych funkcji aplikacji progresywnych. Safari w najnowszej wersji posiada już wsparcie dla mechanizmów Service Worker i plików Web App Manifest, jednak porównując do działania PWA na Androidzie nadal napotykamy wiele ograniczeń. Przykładowo:

• Brak wsparcia dla notyfikacji push,
• Brak możliwości wyświetlania systemowego baneru zachęcającego użytkownika do dodania aplikacji do ekranu głównego,
• Brak możliwości komunikacji z urządzeniami Bluetooth,
• Brak możliwości uruchomienia zainstalowanej wcześniej aplikacji PWA poprzez link na stronie internetowej,
• Mniejszy limit na wielkość przechowywanych danych,
• Brak widoczności aplikacji w ustawieniach systemowych.

Z drugiej strony warto podkreślić, że zarówno Android jak i iOS pozwalają na wykorzystanie w Progressive Web Apps najczęściej używanych funkcji telefonów - takich jak kamera, geolokalizacja czy dostęp do akcelerometru. To z kolei sprawia, że PWA mogą z powodzeniem konkurować z aplikacjami natywnymi - szczególnie, gdy zależy nam na pozyskaniu nowych klientów, rozwijaniu aplikacji w sposób ciągły, czy uniezależnieniu się od stabilności połączenia z internetem. Ważny jest jednak cel, który przyświeca nam podczas tworzenia danej aplikacji.

PWA a aplikacja natywna

Zacznijmy od mocnych stron PWA. Dzięki możliwości częstych i szybkich aktualizacji, Progressive Web Apps pozwalają na testowanie różnych rozwiązań i w rezultacie łatwiejsze dostosowanie interfejsu użytkownika do jego potrzeb, w dodatku niższym kosztem. Zamiast inwestycji w kilka dedykowanych narzędzi udoskonalamy jedno, które zapewni użytkownikowi tzw. “native-like experience”.

Warto także pamiętać, że aplikacje natywne tworzy się na jeden system (iOS, Android) i w konkretnym języku programowania. W przypadku prostych aplikacji, Progressive Web Apps mogą okazać się dużo łatwiejsze i tańsze w implementacji, a także instalacji przez użytkownika. Nie ma konieczności szukania aplikacji w Google Play lub App Store i ściągania jej przez dany sklep z aplikacjami - wystarczy otworzyć stronę i zapisać ją na ekranie głównym urządzenia. Dzięki temu uzyskujemy niższy próg wejścia, który ma znaczenie szczególnie przy relatywnie niedużych aplikacjach tworzonych na potrzeby konkretnych akcji promocyjnych.

Tworząc PWA można zatem uniezależnić się od sklepów z aplikacjami. Wprawdzie jest to zaletą, ale poniekąd wpływa na wiarygodność aplikacji. Dzięki rankingom, ocenom i komentarzom w App Store i Google Play, potencjalni użytkownicy mogą przekonać się o jakości aplikacji. Zresztą już sama obecność w App Store wiąże się ze spełnieniem konkretnych warunków, które dobrze świadczą o produkcie. Może mieć to znaczenie w przypadku branż, w których rzetelność i bezpieczeństwo są bardzo istotne - na przykład w finansach i bankowości.

Co więcej, PWA nie są jeszcze w stanie w pełni wykorzystać potencjału smartfonów. Mowa chociażby o możliwości komunikowania się z innymi urządzeniami, wykonywania operacji w tle, czy permanentnym zapisywaniu dużych ilości danych. W przypadku Progressive Web Apps, gromadzone dane mogą być usunięte przez system w dowolnym momencie.

Wszystko zależy zatem od przeznaczenia i stopnia skomplikowania aplikacji. Jeśli celem jest rozwój jednego, prostego narzędzia, które przy niedużym budżecie zapewni właściwe user experience - PWA będzie dobrym rozwiązaniem. Jeśli zależy nam na wykorzystaniu bardziej zaawansowanych funkcji smartfonów, wówczas musimy zainwestować w aplikację natywną. Dowodzą temu działania znanych marek, z których wiele decyduje się na implementację PWA, często nie rezygnując przy tym z posiadania aplikacji natywnych.

Przykłady wykorzystania PWA przez znane marki

Lancôme to jedna z wiodących marek w branży kosmetycznej, która swoje produkty sprzedaje w drogeriach na całym świecie, w tym i online. Chociaż nie można odmówić jej rozpoznawalności, mobilna wersja strony internetowej nie cieszyła się dużym powodzeniem. W porównaniu do wersji desktopowej, znacznie mniej klientów kupowało produkty Lancôme przeglądając stronę na urządzeniu mobilnym.

Okazało się, że korzystając z wersji mobilnej strony Lancôme użytkownicy napotykali na wiele przeszkód, które utrudniały im zakupy online. Chcąc usprawnić proces zakupowy na urządzeniach mobilnych, zdecydowano się na implementację Progressive Web App.

Dlaczego PWA okazało się najlepszym wyborem?

Lancôme potrzebowało rozwiązania, które zapewniłoby możliwie najlepsze doświadczenie wszystkim użytkownikom, niezależnie od ich przywiązania do marki oraz urządzenia, z którego korzystają. Zwykła strona mobilna nie dałaby tak wielu możliwości (chociażby wysyłania notyfikacji push, z których korzystało Lancôme), a aplikacja natywna najprawdopodobniej nie rozwiązałaby problemu. Korzystaliby z niej przede wszystkim lojalni klienci, których wcześniejsza wersja strony i tak nie powstrzymywała w częstych zakupach. By nakłonić innych klientów do ściągnięcia i korzystania z dedykowanej aplikacji mobilnej, marka musiałaby zainwestować także w kampanię promocyjną i odpowiednią strategię komunikacji, by podtrzymywać zaangażowanie użytkowników.

W rezultacie liczba sesji z urządzeń mobilnych wzrosła o 50%, a wskaźnik konwersji - o 17%.

Szansę na implementację PWA dostrzegł także Tymbark, przygotowując kampanię Daj się połączyć wspólnie z agencją Brainbox i KISS digital. To akcja skierowana do młodszych odbiorców, którzy w zamian za wybranie jednej z dostępnych opcji lub udostępnienie „własnego” hasła na kapslu mogą obejrzeć krótki film z jednym z influencerów. Dzięki wykorzystaniu Big Data i zaawansowanych algorytmów analizy obrazu, wyświetlane nagranie personalizowane jest w czasie rzeczywistym.

I tym razem PWA było dobrym wyborem. W przypadku jednorazowych akcji promocyjnych koszt stworzenia i wypromowania aplikacji natywnej jest wysoki, a konieczność jej ściągnięcia ze sklepu z aplikacjami może stanowić dla użytkownika istotną barierę. Jednocześnie oryginalne kampanie często wymagają bardziej zaawansowanych rozwiązań technologicznych, które mogą być trudniejsze do implementacji przy tradycyjnych stronach internetowych.

Podczas trwania akcji "Daj się połączyć" użytkownicy odtworzyli filmy ponad pół miliona razy; łączny czas oglądania wyniósł ponad 3 lata. W 2019 roku kampania zdobyła nagrodę Effie.

Przez długi czas jedynie aplikacje natywne pozwalały na wykorzystanie potencjału urządzeń mobilnych. Rozwój Progressive Web Apps sprawia jednak, że inwestycja w dedykowane aplikacje mobilne nie jest już koniecznością - choć w wielu przypadkach może po prostu okazać się lepszym rozwiązaniem. Wszystko zależy od celu, który przyświeca tworzeniu danej aplikacji mobilnej, stopnia złożoności projektu a także budżetu na jego realizację. Warto zatem przeanalizować wszystkie za i przeciw, zamiast ślepo podążać za trendem - tym bardziej, że wiele realizacji podważa panujące w sieci przekonania na temat wyższości PWA oraz tańszej ich implementacji.

Na szczęście, w KISS digital zawsze wybieramy rozwiązanie dopasowane do konkretnego projektu. Chcesz się o tym przekonać?