Michał Szklarski

Solutions Architect

14 najczęstszych pytań o Progressive Web Apps (PWA)

Jeśli myślisz poważnie o swoich użytkownikach mobilnych, pewnie słyszałeś o PWA: technologii, która pozwala połączyć to, co najlepsze, w aplikacjach mobilnych i webowych. 

Na czym to dokładnie polega i jak przekłada się na realizację celów biznesowych? Oto odpowiedzi na najczęstsze pytania dotyczące Progressive Web Apps.

Co to jest PWA?

PWA, czyli Progressive Web Application to aplikacja napisana w języku webowym (JavaScript + frameworki), która działa jak natywna aplikacja mobilna czy desktopowa: wyświetla powiadomienia, działa w trybie offline oraz w tle, może wykorzystywać funkcje urządzenia (aparat, geolokalizacja, nawigacja gestami). Jednocześnie, w przeciwieństwie do aplikacji, nie trzeba jej pobierać.

Co PWA zmienia z perspektywy użytkownika?

Aplikacja napisana w PWA łączy to, co najlepsze w doświadczeniu korzystania z internetu przez przeglądarkę i przez aplikację. Tak jak przeglądarka, pozwala na łatwy dostęp bezpośrednio z wyszukiwarki i nie wymaga dodatkowych działań związanych z instalacją. Tak jak aplikacja, pozwala wykorzystać natywne funkcje urządzenia mobilnego (powiadomienia push, aparat, kody QR/kreskowe, geolokalizacja) do zwiększania zaangażowania. Dzięki temu użytkownik może wygodnie przeglądać treści, wyszukiwać informacje czy kupować na urządzeniu mobilnym bez konieczności instalowania dedykowanej aplikacji. Spodoba mu się też zapewne fakt, że PWA działa (w całości lub częściowo) w trybie offline oraz to, że gdy doda PWA do ekranu domowego swojego urządzenia, zajmie ona wielokrotnie mniej miejsca niż tradycyjna aplikacja mobilna.

Czy wszystkie przeglądarki wspierają PWA?

Tak. Wszystkie współczesne przeglądarki internetowe mobilne i desktopowe wspierają technologie użyte do budowy PWA, jak i sam standard, łącznie z Microsoft Edge. Oczywiście najlepsze wsparcie znajdziemy u źródła, czyli w Google Chrome.

Czy PWA zadziała na każdym urządzeniu mobilnym?

Jeżeli dana strona spełnia wymagania tzw. PWA Checklist oraz pozytywnie przechodzi benchmark narzędzia Google Lighthouse - z pewnością tak. Pomijamy oczywiście urządzenia z przeterminowanymi wersjami systemów operacyjnych.

Czy PWA nie jest tylko przelotną modą, kolejnym technologicznym buzzwordem?

Zdecydowanie nie! PWA zostanie z nami na dłużej, ponieważ zmienił się sposób, w jaki użytkownicy korzystają z urządzeń mobilnych. Pobierają coraz mniej aplikacji, korzystają regularnie z zaledwie kilku, a jednocześnie przeglądają dużo treści w internecie na smartfonach i oczekują, że będzie to wygodne - nawet gdy nie zainstalują dedykowanej aplikacji.

Znamienne, że PWA wdrażają rynkowi liderzy, jak Trivago, Forbes, Aliexpress, czy też z polskiego podwórka - serwis NaTemat. Technologie, używane do tworzenia aplikacji progresywnych, mają już kilka lat i są aktywnie rozwijane przez technologicznych gigantów: Facebooka i Google.

Ile czasu zajmie wdrożenie?

Średni czas trwania takiego projektu to 3-4 miesiące. W wypadku gotowego zastosowania, jak e-point PWA Commerce Accelerator, ten czas jest w stanie spaść nawet do 1-2 miesięcy.

W jakich branżach PWA przyniesie największe korzyści?

Z uwagi na to, że PWA wyznacza tak naprawdę przyszłość internetu, to rozwiązania tej klasy sprawdzą się w każdej branży - od FMCG po portale newsowe. Najwięcej zalet jednak będzie widocznych w branżach związanych z handlem, zarówno w B2B, jak i B2C. PWA wspiera świetnie omnikanałową ścieżkę klienta, który często w sklepie stacjonarnym szuka dodatkowych informacji o produkcie.

PWA może też dostarczyć nową jakość w serwisach obsługi klienta: możemy informować klienta na bieżąco za pomocą powiadomień push bezpośrednio z przeglądarki o fakturach do opłacenia, zamówieniach do odbioru, itd. Ponadto PWA oznacza jednolite customer experience (CX) na wszystkich urządzeniach.

Jakie realne korzyści biznesowe płyną z wdrożenia PWA?

Wdrożenie PWA przyniesie następujące korzyści:

  • Optymalizacja kosztów (jeden zespół i jedna technologia zamiast odrębnych zespołów dla przeglądarek i poszczególnych aplikacji mobilnych)
  • Lepsza widoczność w wyszukiwarkach (więcej na ten temat poniżej)
  • Szybsze działanie strony
  • Łatwiejsze i tańsze pozyskiwanie nowych użytkowników w porównaniu do aplikacji mobilnej
  • Zwiększenie zaangażowania użytkowników, co przekłada się na wzrost konwersji i obniża współczynnik odrzuceń
  • Brak typowych problemów związanych z mobilnymi aplikacjami mobilnymi (długich czasów wdrażania i aktualizacji, konieczności pobierania przez dedykowane app store, weryfikacji Apple/Google)
  • Integracja z dowolnym istniejącym (lub nowym) systemem działającym jako źródło danych - back-end.

Jakie są najlepsze przykłady działającego PWA?

Jest masa inspirujących przykładów w różnych branżach, ale wskazałbym na 3 modelowe:

  • Aliexpress: (z uwagi na szybkość działania oraz realne efekty - wzrost liczby nowych użytkowników we wszystkich przeglądarkach o 104%; wzrost konwersji o 82% na iOS;
  • Forbes: nowa strona ładuje się w 0.8 sekundy. Dzięki wdrożeniu PWA użytkownicy mobilni dłużej przeglądają stronę, oglądają więcej treści, a tym samym - więcej reklam, dzięki czemu Forbes nie tylko dostarcza lepszą jakość swoim czytelnikom, ale ma też więcej do zaoferowania reklamodawcom;
  • Trivago: aż pół miliona osób dodało PWA Trivago do swojego ekranu domowego. Są oni dużo bardziej zaangażowani, a konwersja wzrosła o 97%.

Pobierz darmowego ebooka

PWA w praktyce: 11 case studies

Jakie role uwzględnia projekt PWA?

Projekt wdrożenia strony zgodnej ze standardem PWA wymaga podobnych nakładów osobowych, jak projekty wyłącznie front-endowe (łącznie z projektowaniem). Co oznacza, że najczęściej w zespole znajdą się:

  • Front-end Developerzy (JavaScript, HTML, CSS, frameworki)
  • Full-stack Developerzy (JavaScript, frameworki)
  • Eksperci UX
  • Architekci (PWA)
  • Project Managerowie

Od czego zacząć?

Jeśli chcesz dostarczać swoim użytkownikom lepsze doświadczenie na urządzeniach mobilnych:

  • zacznij od tego, by zdiagnozować aktualną kondycję serwisu. Wykorzystaj do tego celu opinie użytkowników oraz narzędzia takie jak Lighthouse
  • zastanów się nad korzyściami biznesowymi, które może przynieść PWA lub wyzwaniami, które zaadresuje
  • zbierz wiedzę na temat obecnej architektury technicznej i informacyjnej
  • wyznacz jasną granicę:  za co ma odpowiadać front serwisu, a za co systemy wspierające (back-end)
  • zdecyduj się na jedną z 3 opcji: czy chcesz odświeżyć obecną wersję portalu czy platformy, dostosowując ją do standardu PWA, czy wolisz zastosować gotowe rozwiązanie (jak PWA Commerce Accelerator), czy też wykonasz od podstaw cały front serwisu.

Te decyzje i informacje to fundament dla sukcesu we wdrażaniu PWA.

Czy PWA wspiera SEO?

Wbrew popularnemu mitowi, PWA samo z siebie nie zapewnia lepszego pozycjonowania strony w wyszukiwarkach, jednak z tego standardu możemy uzyskać checklistę wymagań. Jeśli je spełnimy, trzymając się wszystkich punktów, bez pominięć czy uproszczeń, nasza aplikacja webowa znajdzie się wyżej w rankingu niż inne, które nie spełniają tych założeń.

Jaka technologia: Vue czy React?

Vue.js jest świetnym zestawem narzędzi (frameworkiem) dla projektów mniejszych, skoncentrowanych na prostocie funkcjonalnej. Istotną wadą Vue jest brak wsparcia potężnej korporacji, co zapewniłoby stabilność w dynamicznym świecie technologii JavaScript. Odwrotnie jest w wypadku React.js, który ma backing Facebooka. Na korzyść Reacta przemawia też duża i bogata społeczność osób go wspierających.

W e-point wybraliśmy technologię React.js z uwagi na dostępność informacji, większą kontrolę nad architekturą projektów (React nie narzuca żadnych specyficznych wymogów, w przeciwieństwie do Angulara), lepsze dopasowanie do sektora enterprise z uwagi na wydajność, stabilność i bezpieczeństwo, a także dobrej jakości biblioteki towarzyszące (Redux, React Router, Next.js).

Czy istnieją rozwiązania dedykowane dla konkretnych platform e-commerce?

W świecie PHP istnieje już kilka podobnych rozwiązań, ale dla systemów i serwisów, które są ulokowane w stabilnym i bezpiecznym ekosystemie Javy, pierwszym, dedykowanym tego typu rozwiązaniem jest PWA Commerce Accelerator e-point.