Progressive Web Apps w 5 krokach – poradnik.

PWA to stosunkowo nowa technologia, która zyskuje szybko coraz więcej zwolenników. Dzięki niej możesz nie tylko zmienić Twój sklep w aplikację, ale też spowodować, żeby działał offline! Zobacz, czym są Progressive Web Apps i wykorzystaj ten rodzaj aplikacji w Twoim sklepie.

Niedawno pisaliśmy o headless, jako o nowoczesnej technologii pozwalającej na oddzielenie sekcji frontendowej od backendowej. Dostosowanie aplikacji do tego podejścia wymaga dużo pracy, ponieważ zasadniczo zmieniamy architekturę danego rozwiązania. Jednak Progressive Web Apps jest czymś, co znacznie łatwiej można uzyskać, a jednocześnie rozwiązaniem, które gwarantuje świetne możliwości.

Co to jest Progressive Web Apps?

PWA to pojęcie, które powstało w 2015 roku. Autorem tej nazwy jest Alex Russel – deweloper pracujący dla Google’a. W 2015 roku napisał artykuł, który można częściowo uznać za manifest tego, czym jest Progressive Web Apps. Opisał technologię, która już istniała – zebrał w jednym miejscu kilka założeń, które spełniały strony, które stosowały tę technologię i przede wszystkim nazwał je.

Czym jest więc Progressive Web App? Jest to strona, która spełnia większość z wyznaczników PWA określonych przez Google’a. Strona, żeby być zakwalifikowana, jako PWA, musi spełnić większość wymagań zawartych poniżej:

1. Strona musi być obsługiwana przez HTTPS;
2. Musi być responsywna (tj. dobrze się wyświetlać na tabletach i smartfonach);
3. Strona (aplikacja) powinna pokazywać jakieś treści offline;
4. Posiada plik Web App Manifest;
5. Pierwsze ładowanie strony powinno być szybkie, nawet przy słabym połączeniu (np. internecie 3G);
6. Strona powinna być przetestowana na różnych przeglądarkach;
7. Przejścia między stronami powinny być szybkie i przypominające aplikacje mobilne;
8. Każda podstrona powinna mieć osobny url.

Zwróćcie uwagę, że nie napisaliśmy, że musi spełniać wszystkie. Musi spełniać ich większość. W pewnym sensie jest to więc spektrum, gdzie nasza strona, może być bliżej albo dalej od bycia PWA. Poza 8 głównymi założeniami Google ma też znacznie więcej sugestii dla stron dążących do bycia Progressive Web Apps.

Progressive Web App, a działanie offline

Kiedy czytałeś powyższą listę, zapewne najciekawsze wydało Ci się działanie systemu offline. Rzeczywiście – w dzisiejszych czasach strony mogą działać bez obecności internetu. A przynajmniej częściowo.

Aplikacje PWA wykorzystują narzędzie, które się nazywa Service Worker oraz naszą przeglądarkę, do przechowywania znacznej ilości danych. Dodatkowo obecnie przeglądarki są w stanie przeliczać znaczną liczbę danych, o które wcześniej trzeba było pytać serwer. Strony PWA podczas pierwszego wejścia cache’ują więc dużo informacji i przy każdym kolejnym wejściu pozwalają na pobranie tych treści z przeglądarki. Dzieje się tak w przypadku kiedy sieć nie jest dostępna albo ma gorszą jakość.

Co to pozwala osiągnąć? No cóż – strony na których już byliśmy, mogą działać w pełni. Strony, na których nie byliśmy (np. karty produktu), mogą posiadać już niektóre informacje, ale zamiast zdjęcia posiadać wypełnienie. Wreszcie niektóre systemy potrafią umożliwić złożenie zamówienia nawet bez dostępu do sieci (formalnie składane jest ono w momencie uzyskania połączenia). Żeby zobaczyć taki sklep w akcji, warto zapoznać się z Polymer Project – trzeba wejść na tę stronę, odrobinę eksplorować, a następnie wyłączyć internet i zobaczyć co się dalej dzieje.

Stworzenie “pseudo” aplikacji

Jednym z punktów PWA jest tzw. manifest. W tym pliku deklaruje się różne elementy dotyczące naszej aplikacji, między innymi to, czy nie chcemy, żeby była ona dostępna, jako aplikacja na telefonie. W praktyce wygląda to następująco: Wchodzimy na stronę, aplikacja pyta nas, czy chcemy dodać ją na naszym pulpicie, a po zaakceptowaniu pojawia się u nas na smartfonie ikonka sklepu. Ikonka może nas przenosić do specjalnej wersji strony mobilnej, m.in. z pominięciem wszystkich górnych/dolnych elementów przeglądarki (np. paska url). Dzięki temu nasz sklep ma 100% uwagi naszych użytkowników.

W manifeście można zadeklarować jak ma włączać się nasza aplikacja (np. w pionie czy w poziomie, jaką ma mieć ikonkę, jakie ma mieć tło, czy ma się otwierać w przeglądarce).

Największą zmianę niesie to dla producentów aplikacji mobilnych. Nie ma już potrzeby angażowania dwóch zespołów programistów (do technologii iOS i Android). Nie ma też potrzeby wydawania kolejnych funduszy na aplikację mobilną. Strona zbudowana w tym podejściu przychodzi razem z nią.

Ciekawostką jest też łatwość aktualizacji. W przypadku aplikacji tradycyjnej użytkownik musi pobrać uaktualnienie, aplikację PWA wystarczy jednak włączyć. Jeżeli tylko będzie połączenie z internetem – pobierze najnowszą wersję.

Angażujące aplikacje

W rozumieniu Google’a aplikacja PWA powinna spełniać 3 założenia. Być dostępna, szybka i angażująca. Ostatni punkt dotyczy nie tylko założenia, że strona powinna otwierać się w pełni rozwiniętym oknie, mieć zwinne i ciekawe dla użytkownika animacje, ale też dotyczy to angażowania użytkowników na tyle, żeby wracali do naszej witryny.

Z pomocą przychodzą nam powiadomienia push. Dzięki PWA możemy powiadomić naszych użytkowników o nowej promocji, artykule, opuszczonym koszyku lub czymkolwiek innym, co przywróci jego zainteresowanie. Powiadomienia push są dostępne już w dużej części przeglądarek (m.in. Firefox czy Chrome) i są kolejnym kanałem dotarcia do Klienta. Są trochę jak wysłanie mailingu, tylko z mniejszą ilością tekstu.

Czy warto stosować Progressive Web Apps?

Czy warto stosować PWA?Odpowiadając bardzo krótko – warto. Jest to podejście ewidentnie kierowane do urządzeń mobilnych, które obecnie zaczynają być popularniejsze od desktopowych. Co więcej, jest to podejście, które za cel stawia sobie bezpieczeństwo i szybkość działania, a także łatwość użytkowania – cechy stron, które cenią sobie zarówno Google, jak i użytkownicy.

Wdrożeń opartych na PWA nie ma jeszcze zbyt dużo, jednak te, które już to zrobiły, mogą pochwalić się zazwyczaj dobrymi wynikami. M.in. jest to AliExpress, które po wdrożeniu PWA zwiększyło średnią konwersję o 104%, a 82% dla samych urządzeń systemów iOS. Jest to też Forbes, który po wprowadzeniu Progressive Web Apps zwiększył liczbę sesji per użytkownik o 43%. Jest to też Housing.com. OLX. Twitter. Całkiem sensowne portfolio.

Główne problemy

Głównymi problemami wydają się być dwie rzeczy. Po pierwsze – nie wszystkie przeglądarki wspierają PWA. Na szczęście Safari już dołączyła, przynajmniej częściowo, do gry w okolicach marca 2018, jednak dalej nie wszystkie przeglądarki wspierają wszystkie funkcje. Po drugie, pod niektórymi względami tradycyjne aplikacje dalej wygrywają – potrafią czerpać mniej baterii, a co więcej – mają dostęp do niektórych funkcji telefonu, których PWA nie może wykorzystać (np. Bluetooth czy NFC).

Mamy nadzieję, że artykuł zainteresował Cię i masz już lepsze zrozumienie, czym jest Progressive Web Apps i jakie przewagi daje to podejście. Czy widzisz zastosowanie w Twoim sklepie?