Być może zauważyłeś kiedyś przeglądając Internet na swoim telefonie małąbelkę na dole strony z przyciskiem „Dodaj do ekranu głównego”. To dowód na to,że strona którą odwiedzasz jest zbudowana zgodnie z technologią PWA(Progressive Web App). W dobie wszędobylskich pytań o lokalizację,powiadomienia, pop-upów ze zgodami na cookies, RODO itd. nie jest łatwo jązauważyć. Ale warto się tą funkcjonalnością głębiej zainteresować. Szczególnie,jeśli od tego, ile osób odwiedza twoją stronę i jak są zaangażowane, zależy zysktwojej firmy.
Czym jest PWA?
W skrócie PWAkluczowe jest słowo „WEB” i słowo „APP”. Oznacza to, że możemy zbudowaćaplikację mobilną wykorzystując tylko i wyłącznie narzędzia, które potrzebne sądo zbudowania każdej nowoczesnej strony internetowej: HTML5, CSS i przedewszystkim JavaScript. Rewolucja pod hasłem PWA jaką rozpoczął Google w ramachpracy nad przeglądarką Chrome pozwala wykorzystać liczne nowe funkcjeprzeglądarki i urządzenia do tego, by poprawić tzw. user experience (doświadczenie użytkownika). Ciągle trwają praceprogramistów Chrome i Safari nad udostępnieniem kolejnych opcji, ale już dziśprogramista WWW może mieć dostęp do kamery urządzenia, informacji olokalizacji, komunikacji z urządzeniami Bluetooth czy sprawdzenia stanunaładowania baterii w Twoim telefonie. Zgodnie z manifestem PWA są trzy cele tychzaawansowanych funkcji:
1. Zwiększenie zaangażowaniaużytkownika
Rozwiązanie tobardziej angażuje użytkownika dzięki kilku czynnościom. Po pierwsze, dzięki temu,że umieszczamy ikonkę aplikacji na ekranie głównym, wśród innych instalowanychze sklepu dedykowanego danemu systemowi (np. App Store, Google Play). Wówczas,mimo że to jest nadal strona internetowa, potęguje wrażenie, że mamy doczynienia z prawdziwą aplikacją: znika pasek adresu znany ze zwykłejprzeglądarki oraz pojawia się tzw. splashscreen (ekran powitalny) przy ładowaniu aplikacji. W dodatek, spływającepowiadomienia push zapraszająużytkownika do częstszego odwiedzania aplikacji.
2. Działanie aplikacji nawet przyniskiej jakości łącza lub zupełnie offline
Zaawansowane funkcjeprzeglądarki, takie jak Service Worker,cache czy lokalne bazy danych pozwalają twórcy aplikacji PWA przygotować ją dodziałania również w trybie bez dostępu do sieci. Dla użytkownika oznacza to, żedane i ekrany, które udało się załadować będąc online (np. informacje o hoteluz aplikacji do rezerwacji noclegów), będą dostępne także po wylądowaniu w obcymkraju, gdzie dostęp do internetu jest niemożliwy lub zwyczajnie bardzo drogi. Wprzypadku tradycyjnego otwarcia strony WWW w przeglądarce telefonu takiscenariusz nie byłby możliwy.
3. Szybkość aplikacji
Dodatkową zaletą mechanizmówPWA jest fakt, że aplikacja ładuje się momentalnie. Na tej samej zasadzie, gdy sciągając„appkę” ze sklepu, urządzenie ma już w pamięci większość danych potrzebnych dojej działania. 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 toniezbędne. W porównaniu do zwykłego otwarcia strony WWW w przeglądarce może tooznaczać czas kolejnego załadowania strony krótszy nawet o połowę.
Dla kogo PWA?
PWA oznacza cały szereg korzyści, więc warto się tą technologiązainteresować. Szczególnie, jeśli od liczby użytkowników i ich zaangażowaniazależy zysk twojej firmy. Przykłady wdrożeń PWA u takich gigantów, jakchociażby Tinderpokazują, jak spektakularne efekty dzięki temu można osiągnąć. Porównującaplikację Tinder w wersji natywnej na system Android do wersji PWA udało sięzredukować czas ładowania o ponad połowę i to w sytuacji, gdzie „paczkadystrybucyjna” natywna waży 30 MB a PWA jedynie 2,8 MB. Również zachowaniaużytkowników pokazują, że pokochali oni szybkość i możliwości, jakie daje PWA.Badanie przeprowadzone na nowej stronie Pintrestpo wprowadzeniu PWA pokazało 40-proc. wzrost sesji użytkowników trwającychponad 5 minut i wzrost o 44 proc. przychodów z reklam. Nawet w porównaniu zaplikacjami natywnymi licząc liczbą sesji trwających ponad 5 minut PWA wygrywao 5 proc.
Z tych statystyk wynika, że PWA szczególnie dobrze sprawdzi się wtakich obszarach jak e-commerce, gdzie więcej użytkowników i dłuższe sesjeprzełożą się na wyższą konwersję, mniejszy wskaźnik porzuceń koszykówzakupowych i większy zysk. Również media nowych technologii (portale, gazety,blogi) czerpiące zyski z reklam i walczące o każdą sekundę uwagi swoichczytelników powinny pomyśleć o PWA. Dodatkowe funkcje offline\online będądoskonałe dla firm oferujących różnorakie bilety, podróże, rezerwacje itp.
Od czego zacząć?
Dobra informacja o PWA jest taka, że jeśli strona WWW powstała nie takdawno temu (do 2 lat), jest całkiem możliwe że przeobrażenie jej w aplikacjePWA wcale nie oznacza dużo pracy. Szczególnie jeśli spełnia ona następującewymagania wstępne:
1. Komunikuje się z serwerem przez protokół HTTPS;
2. Jest responsywna zgodnie z RWD (Responsive Web Design), tzn. dobrzedostosowuje 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. zwykorzystaniem jednego z popularnych frameworków JavaScript, Angular lub React.
Nawet jeśli strona tych celów nie spełnia, osiągnięcie ich nie jestdzisiaj trudne. Wspomniane framework JavaScript pozwala na tworzenie aplikacjiszybko, wydajnie i o wysokiej jakości. A budując nową stronę WWW gdy z górywiemy, że powinna być również dostępna jako PWA, nie podnosi znacząco kosztówjej wytworzenia. Realizacja Proof of Conceptaplikacji PWA dla większości typowych projektów powinno zamknąć się w trzechmiesiącach.
PWA a sklepy zaplikacjami
W systemie Androidaplikacja PWA, raz dodana do ekranu głównego, będzie widoczna w panelu ustawieńw sekcji Aplikacje, jak każda inna aplikacja instalowana ze sklepu Google Play.Również dodanie jej do sklepu przez jej twórcę, do znalezienia przezużytkowników przyzwyczajonych do dotychczasowego sposobu dystrybuowaniaaplikacji nie stanowi problemu. Aplikacje PWA mogą również zostać dodane dozasobów Microsoft Store, by wzbogacić potencjalną pulę użytkownikówo wszystkich pracujących na systemie Windows 10. Co ciekawe, również samMicrosoft automatycznie przegląda zasoby internetu w poszukiwaniu aplikacji PWAi 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 najwięcejpracy, ale wciąż jest jak najbardziej możliwe.
.svg){kind=small}
