PWA – Progressive Web Application

Opublikowano przez

Czy jesteście w stanie wyobrazić sobie aplikacje na telefony bez potrzeby ich instalacji ze sklepu play store, app store? Korzystania z nich nawet w przypadku braku dostępu do internetu? Witam w świecie PWA – Progressive Web Application – nowoczesnych aplikacji internetowych.
Po raz pierwszy trafiłem na ten termin słuchając podcasta  Making a Web App Progressive with Christian Heilmann. W bardzo przystępny sposób Christian Heilmann opowiedział o idei jaka stoi za PWA, jak wyglądają bieżące możliwości przeglądarek w zakresie obsługi funkcjonalności, które mają dostarczać nowoczesne aplikacje internetowe i do czego to wszystko zmierza. Zrobiło to na mnie duże wrażenie. Nie tylko od strony technologicznej ale także praktycznej jako użytkownika takiej aplikacji. Samo odejście od braku potrzeby instalacji ze sklepu aby jej użyć już jest dla mnie bardzo wygodne. Ile to razy instalowałem aplikację aby użyć jej raz.
Co istotne aby aplikacja internetowa stała się „nowoczesną” nie trzeba pisać jej od nowa. Można dokonać pewnych modyfikacji, nowych implementacji, który przyczynią się do zmiany jej w PWA. Poniżej przedstawiam bardzo ogólne założenia, które mam nadzieję wprowadzą Cię w świat PWA.

Główne założenia

Niezawodność

Aplikacja ma działać zawsze, w każdych warunkach. Niezależnie czy użytkownik ma dostęp do sieci czy nie. W tym celu przydatne jest buforowanie danych po stronie klienta tak aby przy braku dostępu do internetu miał do nich dostęp. Tutaj główną rolę odgrywa service-worker, który pełni rolę usługi po stronie klienta odpowiadającej za obsługę przychodzących żądań oraz zarządzanie buforowaniem danych (z ang. cache).
źródło: https://auth0.com/blog/creating-offline-first-web-apps-with-service-workers/

Szybkość

Jedna z najbardziej frustrujących rzeczy – oczekiwanie na załadowanie się strony internetowej. Aplikacja może oferować nie wiadomo jakie fajerwerki ale jeśli jest wolna, użytkownik ciągli dostaje komunikaty typu „trwa ładowanie danych, proszę czekać …”, interfejs zawiesza się lub trzeba długo czekać na jej uruchomienie to z pewnością przeważy to na jej niekorzyść i możesz być pewien że już z niej nie skorzysta.

Atrakcyjność

Pod tym pojęciem nie kryje się tylko wizualna część aplikacji ale także możliwość uruchomienia jej z ekranu startowego, obsługa na pełnym ekranie czy wysyłanie powiadomień typu push. Użytkownik nie ma odczuwać że ma do czynienia z atrapą aplikacji. Ma ona dostarczać takich samych odczuć jak użytkowanie natywnych aplikacji. Zapewnić to mogą Web App Manifest oraz wspomnianie już Web Push Notification

Przykładowe aplikacje

Istnieje już kilka rozwiązań, które całkowicie implementują PWA są to m.in.:
Moją uwagę przykuła ostatnia pozycja ze względu na udostępnienie przez autora kodu gdzie można zobaczyć cały stos technologiczny i rozwiązanie wspomnianych idei PWA.

Przydatne narzędzia

Na sam koniec wspomnę o kilku narzędziach, które mogą pomóc w pracy przy tworzeniu bądź konwersji aplikacji internetowej do PWA. Są to:
  • Lighthouse – narzędzie do badania w jakim stopniu nasza aplikacja spełnia założenia PWA.
  • Konsole deweloperskie dostępne w przeglądarkach, które w całości dostarczają nam wszystkich informacji oraz narzędzi. Polecam zapoznanie się z artykułem Tools for PWA Developers

Podsumowanie

Moim zdaniem PWA wytycza nowy kierunek aplikacji internetowych. Nie jest to może rewolucja ale ewolucja, która wprowadza wygodne dla użytkownika rozwiązania. Odchodzi od modelu instalacji aplikacji ze sklepu, pozwala na jej użytkowanie również przy braku dostępu do sieci, przeszukiwanie jej zawartości przez wyszukiwarki co zwiększa szansę na trafienie do docelowego odbiorcy. Minusem są przeglądarki internetowe, które na swój sposób realizują obsługę mechanizmów PWA i poszczególna implementacja na każdej z nich może się różnić i być na innym etapie. Oby nie tak bardzo jak w przypadku arkuszy CSS kilka lat temu 😉