Michał Szklarski

Head of Digital Solutions

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

PWAE-commerceCustomer ExperiencePortale

W połowie 2018 roku ruch generowany w serwisach WWW przez urządzenia mobilne po raz pierwszy był większy niż ten pochodzący z laptopów i komputerów stacjonarnych.

Wraz ze zmianą przyzwyczajeń użytkowników zmieniają się również standardy technologii - najnowocześniejsze serwisy buduje się teraz tak, by działały jak natywne aplikacje na telefonie. W odpowiedzi na rosnące wymagania użytkowników mobilnych powstał standard PWA.

Czym jest PWA?

W skrócie: strona zbudowana zgodnie z PWA pozwala jej twórcom na wykorzystanie pełni możliwości współczesnych przeglądarek www: zaczynając od optymalizacji czasów wczytywania i ogólnej szybkości, poprzez możliwość dostępu do geolokalizacji, czujników, kamer, bluetootha, pracy w trybie offline, a kończąc na opcji instalacji na każdym typie urządzenia, na którym taka strona aktualnie jest wyświetlana.

Standard ten, w zasadzie zbiór dobrych praktyk i wytycznych, opracowali już w 2015 roku twórcy przeglądarki Google Chrome, a Google rekomenduje go po dziś. PWA może zabrzmieć jako technologiczny buzzword, ale liczne wdrożenia potwierdzają, że to kolejny krok w tworzeniu przyjaznych dla użytkowników serwisów WWW, który pozwala nam na eksplorację praktycznie nieskończonych możliwości, takich jak pełen tryb offline (jak w wypadku sklepu internetowego Flipkart, przepisanego na PWA) czy wykorzystanie geolokalizacji na stronie GdziePoLek).

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.

Pobierz darmowego ebooka

PWA: jak to działa?

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.

TABELA 1. Zestawienie kluczowych dla m-commerce cech natywnych aplikacji mobilnych oraz PWA

Aplikacja mobilna

PWA

Tworzenie, utrzymywanie i rozwijanie oddzielnych projektów na poszczególne systemy operacyjne (iOS, Android) oraz przeglądarkę Tworzenie, utrzymywanie i rozwijanie jednego projektu na wszystkie systemy operacyjne (iOS, Android, Windows, MacOS, Linux) oraz przeglądarkę
Możliwość wysyłania powiadomień push i angażowania klienta Możliwość wysyłania powiadomień push i angażowania klienta (bez platformy iOS)
Działanie w trybie offline Działanie w trybie offline, jednocześnie utrzymując wszystkie cechy strony internetowej
Możliwe niespójności i luki w doświadczeniu użytkownika na różnych urządzeniach Jednorodne customer experience na wszystkich urządzeniach
Prowizje i koszty od aplikacji/transakcji od pośredników lub platform z aplikacjami (Google Play Store lub Apple App Store) Brak dodatkowych lub ukrytych kosztów i prowizji
Odkrywalność jedynie przez sklepy z aplikacjami (można znaleźć aplikację jedynie wyszukując ją w sklepie z aplikacjami) Odkrywalność poziomu stron internetowych - wyszukiwarki, SEO, reklamy i promocje ruchu
Pełne wykorzystanie możliwości / zasobów / mocy obliczeniowych / kart graficznych urządzeń natywnych Limitowane wykorzystanie zasobów – kontekst obsługi przez przeglądarkę internetową
Obsługa płatności zbliżeniowych i rozpoznawania linii papilarnych (biometria) Brak tych możliwości

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.