Dlaczego warto skorzystać z Progressive Web Apps

Progressive Web Apps nie bez powodu są jedną z najgorętszych technologii frontendowych ostatnich miesięcy. Pozwalają na dostarczanie użytkownikom doświadczenia, wcześniej zarezerwowanego wyłącznie dla aplikacji natywnych. Są niesamowicie szybkie niezależnie od szybkości połączenia, mogą działać w tle i być instalowane na urządzeniach, zupełnie jak natywne aplikacje.

W tym artykule postaram się przybliżyć technologię PWA oraz to, co oferuje na podstawie naszego ponad rocznego doświadczenia z tą technologią w Divante, przy okazji pracy z open sourceowym projektem Vue Storefront.

Filip Rakowski. Front-End Developer Divante, współzałożyciel Vue Storefront. Pasjonat elektroniki użytkowej i programowania (głównie JavaScript). Od niedawna zafascynowany technologią Progressive Web Apps i skupiajacy się na popularyzowaniu jej w branży eCommerce. Wielki fan dobrego Developer Experience, autor artykułu pt. Dlaczego warto wykorzystać Vue.js w projekcie open source.

Progressive Enhancement i PWA

Zanim zaczniemy przyglądać się temu na co pozwalają Progressive Web Apps, istotne jest zrozumienie, że nie jest to jedna, konkretna technologia, a koncepcja, wokół której gromadzą się różne nowoczesne webowe API, które standaryzowane są w różnym czasie (część technologii PWA jest wciąż w fazie eksperymentalnej). Efektem takiego stanu rzeczy jest fakt, że nie każda przeglądarka będzie wspierała wszystkie udogodnienia, które zaserwujemy użytkownikowi.

Jedną z głównych idei stojących za PWA jest koncepcja Progressive Enhancement polegająca na oferowaniu bazowej funkcjonalności naszej aplikacji możliwie największej ilości użytkowników (przeglądarek), a dopiero później usprawniania ich za pomocą technologii powiązanych z PWA. Warto o tym pamiętać i nie opierać żadnej istotnej funkcjonalności jedynie na najnowszych technologiach.

Jeśli zastanawiamy się do ilu użytkowników trafi dane usprawnienie niezastąpiona będzie dobrze znana wszystkim frotnendowcom strona caniuse.com pozwalajaca sprawdzić wsparcie przeglądarek dla danych rozwiązań. Teraz kiedy wiemy już czym są PWA i jak powinniśmy korzystać z ich udogodnień, czas dowiedzieć się jakie narzędzia mamy do dyspozycji.

Główne narzędzie — Service Worker

Technologią, która pozwala na pełne wykorzystanie możliwości PWA są Web Workery, a w tym wypadku przede wszystkim Service Workery. Jest to nic innego jak asynchroniczny kod JavaScript, który działa w tle przeglądarki, zamiast bezpośrednio na głównym wątku naszej aplikacji i może być wykorzystany jako proxy do zapytań, które ta aplikacja wysyła. Dodatkowo w związku z tym, że Service Worker operuje poza naszą aplikacją, nie ma on dostępu do obiektu window i może działać nadal nawet po zamknięciu aplikacji.

Dzięki pierwszej właściwości możemy np. oddelegowywać niektóre zapytania do serwera na inną domenę lub serwować część plików bezpośrednio z cache’a przeglądarki, zamiast za każdym razem odpytywać o nie serwer

Dzięki drugiej właściwości zyskujemy zupełnie nowe możliwości interakcji z użytkownikiem pozwalające np. na zaangażowanie go przez notyfikację Push, nawet kiedy nasza strona nie jest obecnie przez niego otwarta. Dobrym przykładem zastosowania tego udogodnienia jest informowanie użytkownika w czasie rzeczywistym o zmianach statusu zamówionej przez niego w sklepie internetowym przesyłki.

Podstawa PWA — cache

Najważniejszym filarem PWA jest cache, a w zasadzie to, co do niego włożymy i w jaki sposób będziemy aktualizować.

Dzięki technologiom takim jak Cache API oraz IndexedDB jesteśmy w stanie zatrzymać na dysku użytkownika statyczne zasoby takie jak pliki HTML, CSS czy JavaScript oraz odpowiedzi z bazy danych (zazwyczaj w formacie JSON). Dane te znajdziemy w Chrome’owych dev toolsach pod zakładką “Application” i odpowiednio “Cache Storage” / “IndexedDB”

Pliki te pozostaną w przeglądarce użytkownika nawet po ponownym włączeniu komputera, dzięki czemu mądre cache’owanie odpowiednich zasobów pozwoli użytkownikom na płynne korzystanie z aplikacji niezależnie od szybkości połączenia, a nawet w razie jego braku.

Standardowym sposobem wykorzystania tych technologii jest serwowanie wcześniej pobranych plików bezpośrednio z cache’a, aby użytkownik nie musiał na nie czekać, a w tym samym czasie odpytywanie o nie serwer i aktualizowanie cache’a.

Oczywiście takie podejście nie sprawdzi się dla wszystkich typów danych. Niektóre z nich powinny być aktualizowane tylko raz na jakiś czas, a inne serwowane z cache tylko w przypadku, kiedy użytkownik nie ma połączenia internetowego. O różnych strategiach cacheowanie plików i tym jakie najlepiej zastosować do konkretnych typów danych można poczytać tutaj.

Natywność obiecana — Web App Manifest

Kolejna technologia, o której warto wspomnieć w kontekście PWA to Web App Manifest. Jest to prosty plik JSON, który pozwala uzyskać kilka bardzo pożądanych zachowań.

Najbardziej istotnym jest umożliwienie użytkownikowi dodawania naszej aplikacji do ekranu głównego jego urządzenia (zarówno laptopów, jak i urządzeń mobilnych). W przeciwieństwie do zakładek, które również możemy dodawać do ekranu głównego, aplikacje dodane poprzez manifest będą zachowywać się na większości systemów jak natywne aplikacje (w Androidzie pojawi się nawet na liście zainstalowanych aplikacji i odpali w specjalnie przygotowanym przez system środowisku), a użytkownik nie będzie w stanie zauważyć, że jest to wciąż aplikacja webowa. Podczas ładowania aplikacji pokaże się znany nam z tych natywnych splash screen, a sama aplikacja wyświetli się bez interfejsu przeglądarki. Manifest pozwala także uprzyjemnić odbiór naszej strony użytkownikom poprzez możliwość konfiguracji takich smaczków, jak m.in kolor paska adresu.

Dzięki tej technologii jeśli chcemy zamiast trzech aplikacji (Web, Android, iOS) utrzymywać tylko jedną, nie musimy korzystać ze skomplikowanych frameworków do aplikacji hybrydowych (np. Ionic) lub półnatywnych (React native, Nativescript), a jedynie dodać prosty plik JSON, który załatwi sprawę.

Oferty pracy z

Notyfikacje Push

Wszyscy dobrze znamy popularne w natywnych aplikacjach notyfikacje push. Jakiś czas temu zawitały jako standard także do świata webowego. Działają na każdym urządzeniu tak samo jak natywne notyfikacje i w połączeniu z działającymi w tle Service Workerami oraz mechanizmem Web Push, pozwalają nam komunikować się z użytkownikiem w czasie rzeczywistym, nawet jeśli nasza strona nie jest u niego aktualnie otwarta. Notyfikacje zostaną także dostarczone w sytuacji, kiedy przeglądarka jest zminimalizowana a sprzęt (np telefon) znajduje się uśpiony w kieszeni użytkownika.

Kolejkowanie zapytań do serwera z background sync

Ostatnią technologią PWA, którą chciałbym omówić jest Background Synchronization. Zapewne każdy z Was posiada na swoim telefonia aplikację Facebooka lub Twittera. Prawdopodobnie również wielu z Was zauważyło, że kiedy jesteśmy offline możemy wciąż polubić posty innych osób i polubienia te, zaraz po odzyskaniu połączenia, widoczne są na stronie (np. na innym urządzeniu).

W świecie PWA również możemy uzyskać takie zachowanie. Jeśli zdecydujemy, że dane zapytanie powinno być zawsze wysłane do serwera, to można przechować jego treść w indexedDB, a następnie po odzyskaniu połączenia wysłać i usunąć z pamięci treść zapytania.

Dzięki technologii background sync nie musimy zmuszać użytkownika do pozostania na stronie do momentu odzyskania połączenia, a jedynie zarejestrować dla konkretnych zapytań mechanizm synchronizacji, który zakolejkuje je w tle i wyśle do serwera zaraz po odzyskaniu połączenia.

Zobacz też

growth hacks Growth Hack od AirBnB, czyli zastosowanie Other People Network w praktyce

Inne rozwiązania

Zapewne zgodzicie się ze mną, że powyższe technologie pozwalają uzyskać nieosiągalny dotychczas user experience i zagwarantować, że nasza aplikacja będzie działać szybko w każdych warunkach (nawet w razie braku połączenia internetowego).

Technologie, które opisałem to najbardziej popularne zastosowania PWA, ale to tylko wierzchołek góry lodowej. Progressive Web Apps oferują masę innych dobrodziejstw skupiających się wokół usprawnień doświadczenia użytkownika podczas korzystania z aplikacji webowych i uczynienia ich tak samo, jeśli nie bardziej, przyjaznymi niż te natywne.

Jednym z ciekawszych niedawno wprowadzonych standardów jest Payment Request API, które pozwala na szybsze robienie zakupów w internecie. Nasze dane personalne, adres i dane do faktury mogą być trzymane w przeglądarce, dzięki czemu będziemy mogli z nich korzystać kupując w dowolnym sklepie internetowym, bez wypełnienia nawet jednego pola formularza i przechodzenia ścieżki zakupowej. Równie ciekawą technologią jest Credential Management API, które ma za zadanie bardzo usprawnić proces logowania (wciąż w fazie eksperymentalnej).

Narzędzie

Wprowadzanie tych wszystkich usprawnień korzystając z natywnych API może być czasochłonne. Na szczęście Google stworzyło dla developerów bibliotekę Workbox, która bardzo przyśpiesza pracę z większością technologii wokół PWA. Z jej wykorzystaniem będziecie w stanie bez większych problemów zamienić istniejącą aplikację, w aplikację PWA w ciągu jednego dnia, a może nawet i kilku godzin.

Kto tego używa?

Pomimo, że PWA jest stosunkowo nową technologia to możliwości, które daje w połączeniu z łatwością implementacji sprawiają, że zaadaptowała ją już spora część sieci. Większośc dużych graczy albo ma już sklepy oparte o technologie PWA, albo jest w trakcie developmentu. Bardzo dobrym przykładem aplikacji PWA, z której sam korzystam jest Twitter Lite, który jest wzorcowym pokazem możliwości tej technologii i idealnie zastępuje aplikację natywną. Nad swoimi PWA pracuje także Facebook..

Technologia nadaje się idealnie także do stron skupionych na artykułach. Nie dziwi więc fakt, że praktycznie każdy większy serwis informacyjny wykorzystuje już PWA. W skali międzynarodowej jednym z pierwszych adopterów był Forbes, a w naszym kraju aplikacje PWA można znaleźć pod adresami popularnych serwisów informacyjnych takich jak Onet czy WP.

Również w świecie eCommerce PWA zadomowiło się bardzo szybko. Przede wszystkim u luksusowych marek takich jak Lancome. Powstają też dedykowane eCommerceowemu PWA frameworki takie jak Vue Storefront. Na stronie pwastats.com można znaleźć pokaźną listę aplikacji, których twórcy postanowili podzielić się tym, jak wykorzystanie PWA usprawniło ich biznes. Również Google chwali się wieloma ciekawymi case study z wykorzystaniem tej technologii.

Zobacz też

growth hacks Jak działa Netflix? Przewodnik po tym, co się dzieje, gdy włączasz play

Podsumowanie

Progressive Web Apps bez wątpienia są kamieniem milowym jeśli chodzi o przybliżenia webowego UX do tego znanego z natywnych aplikacji. Łatwość implementacji sprawia, że bardzo małym nakładem pracy możemy w dużym stopniu uniezależnić naszą aplikację od czynników zewnętrznych związanych z połączeniem internetowym i przestać tracić użytkowników przez sytuacje na które wcześniej nie mieliśmy wpływu.

Technologia PWA jest też bardzo opłacalna dla biznesu, który zamiast inwestować w rozwój i utrzymanie kilku natywnych aplikacji, będzie mógł teraz skupić się na doszlifowaniu jednej, która dostarczy użytkownikom najlepsze możliwe doświadczenie.

Zdjęcie główne artykułu pochodzi z pexels.com.