Progressive Web Applications.

Alternatywa dla aplikacji natywnych.
Progressive Web Applications.

Nie jest niczym nowym, że aplikacje natywne na urządzenia mobilne mają ogromną przewagę technologiczną i biznesową nad zwykłymi serwisami WWW. Widać to zwłaszcza, kiedy próbujemy zbudować lub zaktywizować naszą społeczność, czyli bazę naszych potencjalnych klientów.

Jeszcze do niedawna nie było dobrej alternatywy dla aplikacji natywnych. Właściwie jedyną opcją były właśnie serwisy WWW, ale one posiadają jedną kluczową wadę - nie działają w trybie offline. Nie są więc żadną konkurencją dla aplikacji natywnych, przynajmniej w tym ujęciu.

Najwięksi gracze - Google czy Microsoft szybko zauważyli rynkową lukę i zaczęli rozwijać odpowiednią technologię, która pozwala dostarczać podobny do aplikacji natywnej produkt, ale za dużo niższą cenę. Mowa o PWA, czyli Progressive Web Applications.

PWA

Aplikacje natywne.

Zanim jednak przejdziemy do Progressive Web Applications, warto poświęcić trochę uwagi aplikacjom natywnym na urządzeniach mobilnych. Tego typu produkty to programy, które są tworzone specjalnie na smartphony czy tablety, przez co nie pobierzemy ich bezpośrednio z Internetu, a jedynie ze sklepów typu Google Play.

Proces developmentu przy takim produkcie jest skomplikowany i wymaga podjęcia wielu kluczowych decyzji jeszcze przed rozpoczęciem jakichkolwiek prac. Trzeba zdecydować, na jakie systemy chcemy stworzyć dane aplikacje oraz ile ich wersji wstecz chcemy wspierać. Te dwie decyzje definiują nam w dużej mierze, jaki poniesiemy koszt.

Na ostateczny budżet projektu wpływać będzie jednak więcej czynników m.in.:

  • Liczba systemów
  • Liczba wspieranych wersji
  • Złożoność aplikacji
  • Kompletnie osobny development
  • Team odpowiedzialny za tworzenie i rozwój serwisu
  • Konieczność przechodzenia przez proces weryfikacyjny App Store i Google Play
  • Utrzymywanie każdej aplikacji z osobna

Cały proces budowania aplikacji natywnej jest dosyć długi i kosztowny, przez co niekoniecznie wszystkich na nią stać. Niektórzy też nie chcą ponosić kosztów jej rozwoju, kiedy produkt na etapie koncepcji czy potrzeb biznesowych nie jest zbyt skomplikowany. Właśnie do takich, dosyć prostych rozwiązań zostało stworzone PWA.

Czym jest PWA?

Progressive Web Applications (PWA) - typ aplikacji mobilnej dostarczanej poprzez sieć web i zbudowanej przy użyciu typowych technologii webowych takich jak HTML, CSS i JavaScript.” – podaje Wikipedia.

Rozwijając tę definicję, można powiedzieć, że PWA daje nam możliwość stworzenia aplikacji mobilnej, którą instaluje się na urządzeniach bezpośrednio z serwisów internetowych i buduje z wykorzystaniem teamu web developerów. Dzięki takiemu rozwiązaniu można uzyskać spore oszczędności i skrócić czas powstawania docelowego produktu.

PWA

PWA to serwis WWW.

Fakt, że PWA jest serwisem WWW to największa zaleta tego rozwiązania. To także różnica między tą technologią a natywną aplikacją. PWA to serwis zbudowany jako responsywny site (RWD), spełniający proste warunki i odpowiednio skonfigurowany. Celem Progressive Web Application jest imitacja bycia aplikacją natywną, odpalaną przez i w ramach przeglądarki, z której została zainstalowana.

Wymagania PWA dla serwisów WWW są następujące:

  • Pełne RWD
  • Optymalizacja prędkości ładowania strony
  • Aktywny i aktualny certyfikat SSL
  • Autoprzekierowanie z HTTP na HTTPS
  • Plik konfiguracyjny manifest.json
  • Zaimplementowany mechanizm Service Worker

Pierwsze cztery punkty to tak naprawdę zadbanie o to, aby użytkownik poruszał się po naszym serwisie szybko, wygodnie i - co najważniejsze - bezpiecznie. Punkty te nie są przypadkowe i wynikają z zaleceń Google, który od dłuższego czasu stara się je wymusić na serwisach internetowych. Z tego właśnie powodu warto spełnić te wymagania, bo dzięki temu nasza strona będzie działała szybciej, a jej pozycja w wynikach Google będzie lepsza. Niskie koszty implementacji PWA i płynące z niej korzyści powodują, że obecnie jest to technologia silnie rekomendowana dla wszystkich typów serwisów WWW.

Możliwości customizacji PWA.

W pliku konfiguracyjnym naszej aplikacji możemy ustawić następujące rzeczy:

  • Ikonę wyświetlania na pulpicie
  • Ikonę, którą widać podczas startu aplikacji
  • Kolor elementów przeglądarki, w której odpalamy nasz serwis
  • Kolor tła pod ikoną podczas startu aplikacji
  • Wygląd przeglądarki i tutaj dwie najfajniejsze opcje to:
    • Full screen - czyli nie widzimy żadnych elementów nienależących do naszej aplikacji.
    • Standalone - czyli widzimy jedynie elementy systemowe, jak zegar czy ikonę Wi-Fi.
  • Orientacja aplikacji:
    • Dowolna
    • Portret
    • Pozioma

Offline.

Service Worker to funkcja lub zbiór funkcji JavaScript’owych, które odpowiadają za działanie aplikacji w trybie offline. Mechanizm ten działa w osobnym wątku, przez co pracuje również wtedy, kiedy użytkownik nie ma otwartej aplikacji. Takie rozwiązanie daje możliwość np. wysyłania użytkownikom powiadomień typu Push. Dzięki temu PWA jako aplikacja ma dokładnie taki sam dostęp do potencjalnego klienta jak jej natywny odpowiednik. Przekuwając to na prosty przykład: jesteśmy w stanie wysłać użytkownikom, którzy zainstalowali aplikację, powiadomienia o najnowszej promocji, czy wydarzeniu.

Push API to jedynie część tego co Service Worker oferuje. Mechanizm ten pokazuje pełnię swoich możliwości w momencie, kiedy użytkownik jest w trybie offline. Świetnie obrazuje to przykład Washington Post, który zrezygnował z mobilnej, oddzielnej wersji serwisu na rzecz RWD z zaimplementowaną technologią PWA. Twórcy tej aplikacji postanowili, że będą zapisywać treści kilkunastu najnowszych artykułów bezpośrednio na urządzeniach użytkowników. Dzięki takiemu rozwiązaniu treści te są nadal dostępne nawet wtedy, kiedy użytkownik nie ma dostępu do Internetu. Właśnie tego typu implementacje PWA powodują, że technologia ta stała się alternatywą dla aplikacji natywnych.

Ograniczenia.

Progressive Web Applications nie jest technologią bez wad. W porównaniu do aplikacji natywnych ma spore braki głównie w liczbie dostępnych funkcji czy mechanizmów systemowych (API). za pomocą PWA nie zapłacimy zbliżeniowo, nie uzyskamy dostępu do smsów czy książki adresowej oraz nie zalogujemy się przy użyciu takich technologii jak face ID. W związku z wymienionymi ograniczeniami nie zbudujemy np. zaawansowanej aplikacji bankowej.

Koszt implementacji PWA.

Jakie są koszty wdrożenia PWA? To zależy od założeń i mechanizmów, jakie chcemy posiadać w aplikacji. Znaczenie ma również to, czy nasz serwis spełnia wymagania konieczne do implementacji PWA.

Jeżeli nasz serwis jest w pełni responsywny, ładuje się odpowiednio szybko i posiada certyfikat SSL to jego konfiguracja oraz instalacja Service Worker’a zajmie zaledwie kilka godzin, a jej koszty nie będą wysokie.

PWA nie jest narzędziem idealnym, ale mimo wszystko to świetna alternatywa dla aplikacji natywnych. Jest niezwykle proste w implementacji i daje wymierne korzyści za niewielką cenę. PWA jest idealne w przypadku, kiedy mamy już serwis WWW i zależy nam na dotarciu do szerszej gamy użytkowników, a z drugiej strony mamy mocno ograniczony budżet lub czas.

Autor: Michał Stolarski, Front-end developer K2

Tworzymy produkty. 04.09.2019.
Chcesz dostawać informacje o nowych wpisach?