Co zmieniają Progressive Web Applications? Wszystko, co musisz wiedzieć o PWA

PWA z perspektywy użytkownika

PWA to aplikacja internetowa, która może być zainstalowana (lub dodana do ekranu domowego) na dowolnym urządzeniu - również na komputerach stacjonarnych. Działa optymalnie przy wolnych połączeniach z internetem oraz w warunkach braku tego połączenia - bazując na danych wczytanych do pamięci podręcznej podczas ostatnich odwiedzin. Przekłada się to na lepsze doświadczenie użytkownika.

Tworzenie PWA

Budując PWA, dostarczasz produkt, który działa jak natywna aplikacja mobilna, ale proces jego wytworzenia jest prostszy. PWA bazują na możliwościach przeglądarki użytkownika i składa się z 3 fundamentalnych komponentów:

• Plik manifestu: dostarcza możliwości znanych z apek natywnych - ikonki, URL startowego, prezencji w menu urządzenia oraz sposobu wyświetlania treści (z paskiem przeglądarki, bez oraz tryb pełnoekranowy),
• Service worker: skrypt (lub kilka skryptów), który działa w tle jako samodzielna usługa, co pozwala na działania takie jak dostarczanie powiadomień push, pre-ładowanie materiałów, które mogą być użyte w trybie off-line potem,
• Model app shell: budowa serwisu, która sprawia, że najczęściej aktualizują się tylko treści w wyznaczonych miejscach, a struktura i layout pozostają w głównej mierze takie same.

Czym PWA różni się od aplikacji natywnej?

Aplikacja to samodzielny program, który działa na smartfonie - analogicznie, jak działają programy na komputerze, na przykład Microsoft Word. Z kolei PWA to strona internetowa, która wygląda jak aplikacja mobilna. Przypomina bardziej Google Docs - robi to samo, co program taki jak Word, ale przez przeglądarkę internetową. Przede wszystkim, w przeciwieństwie do tradycyjnej aplikacji, PWA nie jest ograniczona przez jedną platformę - może działać na każdej przeglądarce, na każdym systemie operacyjnym i na każdym urządzeniu. W przeciwnym wypadku nie może być nazywana PWA.

Czym PWA różni się od responsywnej strony internetowej?

Użytkownicy korzystają dziś z internetu za pomocą wielu urządzeń. Strony zaprojektowane responsywnie dopasowują się do konkretnego urządzenia danego użytkownika. To fundament działania PWA - to podstawowe wymaganie benchmarku Lighthouse. Jednocześnie responsywność to dopiero początek: PWA oferuje znacznie więcej możliwości wykorzystania potencjału przeglądarek i często ma strukturę aplikacji mobilnej - jest bardziej interaktywna, angażuje użytkownika, może też być dodana do ekranu domowego urządzenia - wygląda wówczas jak zwykła apka.

W przeciwieństwie do strony w RWD, PWA podobnie jak aplikacja może działać (przynajmniej częściowo, w core-owych funkcjach) bez połączenia z internetem lub kiedy połączenie jest bardzo słabe. Można to zrobić na dwa sposoby - wprowadzając prosty “placeholder” - stronę informującą, że straciliśmy połączenie z internetem (efekt dość podobny jak smutny dinozaur z Chrome - nic użytkownikom nie daje) lub zaawansowany - dając dostęp do pewnych treści lub elementów ze ścieżki użytkownika bez internetu. Dzieje się tak głównie dzięki cache’owaniu, czyli wcześniejszemu ładowaniu danych do pamięci na skalę, która nie była wykorzystywana wcześniej, a teraz dodatkowo za pomocą service workera może dziać się to w tle, podczas wykonywania innych czynności.

Dlaczego potrzebujemy Progressive Web Applications (PWA)?

PWA pozwala odpowiedzieć na kluczowe problemy, które dotyczą mobile experience:

• prędkość internetu po stronie użytkownika,
• brak ficzerów i instalowalności rodem z aplikacji mobilnych,
• powolne ładowanie się stron,
• niskie zaangażowanie użytkowników,
• niska konwersja.

Dzięki PWA strony ładują się szybko i działają płynnie - przeglądanie treści czy proces zakupowy nie są przerywane. Zmniejszamy tym samym ryzyko utraty użytkowników czy potencjalnych klientów, znużonych zbyt długim czekaniem lub poirytowanych zerwaniem procesu przez utratę dostępu do sieci i koniecznością rozpoczynania go od początku (np. wypełniania formularza po raz kolejny). Ponadto zaraz po tym, jak użytkownik zdecyduje się pobrać PWA, może zacząć z niej korzystać.

Jak zbudować PWA?

Przede wszystkim, musimy zadbać o prawidłowe wdrożenie 4 minimalnych wymagań, dzięki którym uzyskamy pozytywny wynik w benchmarku PWA, Google Lighthouse:

1. Plik manifest.json

To dość krótki plik w formacie JSON, rozumiany i odczytywany przez współczesne przeglądarki internetowe. Każda aplikacja PWA musi go posiadać. Definiuje on następujące rzeczy:

• Pełną i skróconą nazwę - do menu telefonu/komputera
• Ikony aplikacji PWA
• Ekran ładowania
• Tryb wyświetlania: czy PWA ma być pełnoekranowe, czy standardowo w przeglądarce z paskiem adresu
• Preferowany tryb rotacji ekranu
• Kolorystykę elementów UI przeglądarek

2. Service Worker

Service Worker to specjalny skrypt JS (standardowego języka aplikacji webowych, obok wspomagających HTML i CSS), który pośredniczy między aplikacją a przeglądarką. Może on zbierać informacje o kliencie, odpowiada za zapisywanie po stronie przeglądarki danych możliwych do ponownego wykorzystania (pliki, treści, etc), oraz umożliwia pracę offline.

3. Ikony aplikacji

Aplikacje PWA powinny zawierać zbiór ikon, który pozwoli poprawnie je wyświetlać na menu oraz ekranach startowych wielu urządzeń różnych typów - będą to tablety, smartfony, komputery, a nawet telewizory. W związku z tym powinny mieć one wiele rozmiarów, minimalnie podstawowe 192px oraz 512px wysokości i szerokości. Narzędzia jak na przykład to, pomagają wygenerować taki zestaw z jednej bazowej ikony w wysokiej rozdzielczości.

4. Szyfrowane połączenie - HTTPS

By być w pełni PWA, cała nasza aplikacja webowa musi być dostarczana poprzez bezpieczny standard połączenia HTTP, czyli HTTPS. Jest to raczej kwestia hostingowa - dzięki usługom takim jak CloudFlare, Incapsula czy też LetsEncrypt można bardzo łatwo szyfrować ruch między naszymi serwerami a urządzeniami końcowymi. To nie tylko dobra praktyka - strona taka odznacza się jako zaufana i nie budzi zbędnych podejrzeń wśród użytkowników, że ich dane mogą zostać przechwycone i wykradzione.

Podsumowanie

PWA staje się dziś główną siłą w świecie tworzenia aplikacji. Dostarcza zupełnie nową jakość mobile experience, a jednocześnie wymaga mniejszych nakładów niż tradycyjne aplikacje mobilne. Łącząc zalety strony i aplikacji, PWA oferuje zupełnie nową jakość: nie tylko pozwala w pełni wykorzystać potencjał urządzeń mobilnych, ale również optymalizować koszty inwestycji w ten kanał. Widocznym dowodem potencjału PWA jest to, jak chętnie liderzy - zarówno za granicą, jak i na rodzimym rynku - wdrażają z sukcesem to rozwiązanie.