Progressive Web App - ewolucyjny następca RWD

Progresywne aplikacje internetowe, z j. ang. Progressive Web Apps (PWA), to strony internetowe nowej generacji, wzbogacone o możliwości dotąd nieosiągalne z poziomu przeglądarki internetowej. To nowy standard tworzenia stron www, którego głównym założeniem jest dostarczanie najwyższej jakości doświadczeń użytkownika, poprzez połączenie najlepszych cech stron internetowych oraz aplikacji mobilnych. Jakie są najważniejsze zalety stron wykonanych w standardzie PWA?

Wydajność na miarę oczekiwań użytkowników

Progressive Web Apps są przede wszystkim szybkie. Jednym z głównych celów PWA jest osiągnięcie wydajności zbliżonej do aplikacji mobilnych, gdzie przechodzenie pomiędzy ekranami odbywa się niemalże natychmiast. Jest to możliwe, dzięki zastosowaniu architektury App Shell oraz Cache API, które pozwala w bardzo efektywny sposób cache'ować stałe elementy witryny na urządzeniu użytkownika. To z kolei, pozwala na błyskawiczne wyświetlanie na ekranie podstawowych elementów interfejsu, dzięki czemu redukujemy liczbę żądań wysyłanych do serwera oraz ilość przesyłanych danych, a odczuwalna przez użytkownika szybkość strony (z j. ang. perceived performance) zdecydowanie wzrasta.

Idealne dostosowanie do specyfiki urządzeń

Strony www wykonane w standardzie Responsive Web Design (RWD), czyli dostosowujące się do rozdzielczości ekranu, na którym są wyświetlane, to dziś absolutne minimum dla każdego kto myśli poważnie o swojej obecności w internecie. PWA idzie jeszcze o krok dalej, potrafi bowiem wyglądać jak aplikacja mobilna. Może posiadać własną ikonkę na pulpicie smartfonu, uruchamiać się w trybie pełnoekranowym bez widocznego interfejsu przeglądarki, a nawet posiadać własny ekran powitalny.

Jak to działa?

Z poziomu Progressive Web App możemy wyświetlić użytkownikowi baner z pytaniem, czy chce on przypiąć aplikację do ekranu głównego swojego smartfona. Kliknięcie w baner powoduje automatyczną "instalację" PWA na urządzeniu użytkownika. Proces ten trwa zaledwie chwilę i jest on zdecydowanie bardziej przyjazny dla użytkownika, niż w przypadku aplikacji mobilnej, gdzie konieczne jest pobranie z App Store paczki instalacyjnej. Od tego momentu użytkownik zyskuje szybki dostęp do naszej strony www i może korzystać z niej jak z aplikacji mobilnej.

Możliwość pracy w trybie offline

W przypadku PWA pierwsza wizyta użytkownika na stronie, powoduje zwykle zapisanie podstawowych elementów witryny w pamięci podręcznej. Możliwe jest także cache'owanie kolejnych zasobów takich jak treści, czy informacje o produktach, w miarę poruszania się użytkownika po stronie. Dzięki temu wszystkie widoki, które przeglądał odwiedzający mogą być dla niego dostępne nawet w trybie offline. Co więcej, Progressive Web App bez dostępu do sieci może być nadal w pełni funkcjonalne i interaktywne, może przyjmować formularze wysyłane przez użytkownika, czy w przypadku e-commerce – składane zamówienia. W rzeczywistości takie zamówienie zapisywane jest na urządzeniu użytkownika, a następnie wysłane do e-sklepu natychmiast po odzyskaniu połączenia internetowego. Zdolność PWA do pracy w trybie offline, gwarantuje użytkownikowi stały dostęp do treści oraz zapobiega utracie wprowadzonych danych w momencie, gdy podczas zatwierdzania formularza połączenie sieciowe zostanie zerwane.

Z jakich technologii korzystają progresywne aplikacje internetowe?

Z technicznego punktu widzenia, PWA opiera się na trzech technologiach, które są obecnie wspierane we wszystkich wiodących przeglądarkach:

• Web App Manifest – plik w formacie JSON zawierający instrukcje dla przeglądarki, dzięki któremu PWA może m.in. imitować aplikację mobilną w zakresie uruchamiania się w trybie pełnoekranowym, czy „instalowania" na urządzeniu użytkownika
• Service Worker – skrypt napisany w języku JavaScript, wykorzystujący interfejsy API, umożliwiające głębszą niż kiedykolwiek integrację z urządzeniem końcowym, który pośredniczy pomiędzy systemem operacyjnym a przeglądarką internetową. To dzięki niemu możliwe jest np. korzystanie z PWA w trybie offline, czy wysyłanie powiadomień push
• SSL – protokół szyfrowania informacji, który pozwala na bezpieczną wymianę danych pomiędzy serwerem a przeglądarką. Bezpieczne połączenie HTTPS jest konieczne ze względu na to, że PWA może posiadać szereg dodatkowych uprawnień w systemie operacyjnym użytkownika.

Czysto technicznie, powyższe wymagania stanowią definicję Progressive Web App. Jednak w praktyce, PWA to zdecydowanie więcej, niż tylko technologie. To idea budowania stron www zorientowana na użytkownika, która redefiniuje pojęcie stron internetowych i rewolucjonizuje ich postrzeganie, poprzez całkowite zatarcie granic pomiędzy światem www a światem aplikacji mobilnych.

PWA to idea kreowania satysfakcjonujących doświadczeń użytkownika, dostosowanych do specyfiki poszczególnych urządzeń końcowych. To idea, za którą stoją potężne technologie, stanowiące olbrzymi potencjał, który będziemy odkrywać jeszcze w ciągu kilku kolejnych lat. Głębsza integracja z urządzeniem użytkownika daje nam niespotykane dotąd możliwości. Natalia Skorwider, Front-End Developer w 2ClickShop

Przyszłość należy do Progressive Web Apps

PWA stawia użytkownika w centrum, oferując znaczącą poprawę User Experience (UX). Nic więc dziwnego, że internauci tak entuzjastycznie reagują na zupełnie nową jakość doświadczeń, za sprawą których korzystanie z internetu staje się tak szybkie i tak przyjemne jak nigdy dotąd. Progressive Web Apps doskonale przyjęły się już na rynkach azjatyckich i zaczynają popularyzować się również w Europie. Dziś posiadanie progresywnej aplikacji internetowej pozwala jeszcze na uzyskanie przewagi konkurencyjnej, jednak pozostaje jedynie kwestią czasu aż stanie się to koniecznością.

Przeczytaj nasze case study wdrożenia dla marki NeoNail