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

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 e2m storefront (dawniej PWA Commerce Akcelerator), 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%.

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 e2m storefront), 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 e2m storefront.