PWA (ang. (Progressive Web Apps) jest jedną z najbardziej dyskutowanych zmian technologicznych w sieci i zyskało niezrównany rozmach wśród praktyków w świecie IT. Jeśli budujesz dla sieci, jestem pewien, że PWA jest najnowszym „buzzwordem”, który został dodany do twojego słownika roboczego. Nie ma w tym nic dziwnego, ponieważ PWA sprawiło, że odległe marzenie o instalowaniu aplikacji webowych na telefonie stało się realne.
W ostatnim czasie pojawiło się już wiele spotlightów i 'geekspeaksów' na temat budowania PWA i jego zalet. Większość prób wprowadzenia PWA, szczególnie dla początkujących, wydaje się być wypełniona żargonem lub ma zbyt dużo kodu, który może ich onieśmielić do zrobienia pierwszego kroku. W tym artykule staram się przybliżyć PWA, na tyle, aby rozpocząć proces nauki.
Co to jest Progressive Web App?
„Progressive Web App (PWA) to termin używany do określenia nowej metodologii tworzenia oprogramowania. W przeciwieństwie do tradycyjnych aplikacji, progresywne aplikacje webowe są hybrydą zwykłych stron internetowych (lub witryn) i aplikacji mobilnej. Ten nowy model aplikacji próbuje połączyć funkcje oferowane przez większość nowoczesnych przeglądarek z korzyściami płynącymi z doświadczenia mobilnego.”
Tak o PWA mówi wikipedia. Cóż, może się to wydawać nieco niejasne, a nawet sporne. Spójrzmy więc na PWA w sposób nieformalny.
Jeśli kiedykolwiek to, co najlepsze w sieci i to, co najlepsze w aplikacjach miało swoje klonowane dziecko – jest nim PWA. Albo inaczej, chodzi po prostu o to, że strona internetowa wzięła wszystkie „odpowiednie witaminy”, aby mogła zachowywać się bardziej jak aplikacja pobrana z App Store / Play Store. Zaczyna się jak normalna strona internetowa w przeglądarce, a gdy użytkownik eksploruje stronę, dostaje monit, czy chciałby „Dodać do ekranu głównego”. Gdy użytkownik daje kciuki w górę do tego monitu, VOILA! PWA zostaje dodane do ekranu głównego. Po otwarciu na ekranie głównym, może nawet ukryć kontrolki UI przeglądarki i pojawić się jako aplikacja.
Jest to bardziej jak uwielbiana zakładka, która trafiła w słodki punkt pomiędzy stroną internetową a aplikacjami mobilnymi. Mówię to, ponieważ PWA udało się wypełnić lukę w sieci. Sieć zawsze była spragniona niezawodnej wydajności na równi z natywnymi aplikacjami. Zawsze pragnęła mieć swoje miejsce w zasobniku powiadomień i na ekranie głównym, tak jak aplikacje. Ponad 40% użytkowników odrzuca strony, których ładowanie trwa dłużej niż 3 sekundy. PWA jest rozwiązaniem dla tej „epidemii otyłości internetowej”, z którą borykają się użytkownicy.
Chodzi o usunięcie tarcia i ułatwienie użytkownikom dotarcia do tego, czego chcą.
Całą zasługę za to bezproblemowe doświadczenie należy przypisać Service Worker (skryptowi, który przeglądarka uruchamia w tle, niezależnie od strony internetowej), który jest kręgosłupem każdego PWA. Service Worker umożliwia niezawodne i inteligentne buforowanie, aktualizację treści w tle, powiadomienia push oraz najbardziej atrakcyjną funkcjonalność offline dla wcześniej odwiedzanych stron. Oznacza to, że po pierwszej wizycie na stronie internetowej, strona i aplikacja będą niezawodnie szybkie nawet w niedziałających sieciach.
Można jednak w tym miejscu zadać pytanie – co z szybkim pierwszym ładowaniem przy zachowaniu niezawodnej wydajności? To właśnie wtedy Accelerated Mobile Pages (AMP) spotyka się z service worker. AMP dostarcza niezawodne, szybkie komponenty internetowe do pierwszego załadowania. Komponenty te ładują się znacznie szybciej i są mniej wymagające pod względem ilości danych. Strony internetowe, które wykorzystują combo AMP i Service Worker zapewnią niezawodną szybkość jak w przypadku aplikacji natywnych. Gdy strona zostanie załadowana, witryna skonfiguruje Service Worker, a zasoby będą inteligentnie buforowane. Dzięki temu PWA będzie zawsze aktualne, uwalniając użytkowników od częstych aktualizacji, które trzeba przeprowadzać z App Store.
PWA w pigułce:
- Niezawodne : Szybkie ładowanie i działa w trybie offline
- Szybkie : Płynne animacje, przewijanie bez jankesów i bezproblemowa nawigacja nawet w nieszczelnych sieciach
- Angażujące : Uruchamiane z ekranu głównego i może otrzymywać powiadomienia push
Dlaczego to ważne ?
Mitem jest, że użytkownicy z chęcią ściągną aplikację każdej strony internetowej, którą często odwiedzają. Według Comscore Mobile App Report, ponad 50% użytkowników smartfonów w Ameryce pobiera zero aplikacji miesięcznie, co oznacza, że minęły czasy, kiedy telefon był pełen aplikacji, a faza miodowego miesiąca w smartfonie dobiegała końca. Każdy krok do pobrania aplikacji redukuje 20% użytkowników. PWA redukuje kroki pomiędzy odkryciem aplikacji a umieszczeniem jej na ekranie głównym, a tym samym eliminuje tarcie związane z instalacją aplikacji. To daje bardzo żyzne podłoże dla firm, które chcą wprowadzić PWA.
Następujące trzy metryki mogą być podkreślone, aby zrozumieć znaczenie PWA w kształtowaniu przyszłej sieci.
a. Zasięg : W ciągu ostatnich kilku lat mobilna publiczność internetowa rosła w zawrotnym tempie. Google poinformowało, że Chrome ma 1 miliard użytkowników mobilnych w porównaniu do 400 milionów użytkowników w 2016 roku. Zgodnie z raportem Comscore, zasięg mobilnej sieci jest 2,5 razy większy niż aplikacji, biorąc pod uwagę 1000 najlepszych stron i aplikacji. To jest powód, dla którego decyzja Flipkart, Myntra itp. o porzuceniu swojej strony internetowej i byciu „app only” się nie powiodła. Jeśli moglibyśmy zapewnić lepsze doświadczenie dla szerszej publiczności, możemy z pewnością uzyskać przewagę konkurencyjną nad innymi.
b. Pozyskiwanie użytkowników: Kolejnym poważnym problemem, z którym borykają się aplikacje mobilne, jest ich wykrywalność przez użytkowników w porównaniu do stron internetowych. Koszt pozyskania użytkownika w sieci będzie 10 razy tańszy niż w przypadku aplikacji natywnych. Dzięki większej ekspozycji i niskiemu poziomowi tarcia w procesie uruchamiania, PWA może pozyskać więcej użytkowników przy bardzo niskich kosztach.
c. Konwersja: Bezproblemowe doświadczenie użytkownika end to end, nawet w przypadku sieci flaky dostarczanych przez PWA zwiększa liczbę udanych konwersji. Flipkart uruchomił swoje PWA 'Flipkart-lite', które jak twierdzą dostarczyło wzrost współczynnika konwersji o 70% przy niższych kosztach pozyskania.
Podsumowując : PWA pomaga poprawić konwersje poprzez zwiększenie potencjalnego zasięgu przy niskich kosztach akwizycji.
Jak zacząć ?
Jak już poznasz nową technologię, następnym wyzwaniem jest decyzja o jej zaadoptowaniu. Większość ludzi dostaje się do dylematu w tym momencie. Decyzja powinna być napędzana przez konkretne potrzeby biznesowe. Poniższe dwa przypadki mogą pomóc Ci zidentyfikować metodę, która pasuje do wdrożenia PWA.
a) Od zera
Rozważmy scenariusz, w którym firma buduje nową stronę internetową lub przechodzi przez redesign. W tym przypadku, budowanie PWA od zera ma sens i jest wykonalne. Dzięki temu firma będzie mogła wykorzystać moc PWA dzięki AMP, service workers, App shell i Web Manifest. Na przykład. Według Ali Express, po przekształceniu swojej strony internetowej w PWA, byli w stanie zwiększyć współczynnik konwersji dla nowych użytkowników o 104%, uzyskali 2x więcej stron odwiedzanych na sesję na użytkownika we wszystkich przeglądarkach i 74% wzrost czasu spędzonego na sesji we wszystkich przeglądarkach.
b) Prosta wersja lub pojedyncza funkcja
Gdy budowanie od zera nie jest realistyczne, zawsze można zbudować prostą wersję strony internetowej lub skupić się na pojedynczej funkcji, która ma duży wpływ na użytkowników końcowych. Należy skupić się na dostarczeniu szybkiego, angażującego i niezawodnego doświadczenia. AirBerlin jest odpowiednim przykładem w tym przypadku. W swoim PWA skupili się na doświadczeniach po dokonaniu rezerwacji. Po dokonaniu odprawy pasażer może uzyskać dostęp do szczegółów podróży i karty pokładowej nawet bez połączenia z Internetem.
4. Wyzwania związane z PWA
Istnieją pewne wyzwania związane z PWA, które należy wziąć pod uwagę przy wyborze PWA.
a) Wsparcie dla różnych przeglądarek: Podczas gdy Chrome, Opera i przeglądarka androidowa Samsunga obsługują PWA, IE, Edge i Safari nie rozszerzyły jeszcze swojego wsparcia.
b) Ograniczona funkcjonalność: PWA nie ma wsparcia dla żadnego sprzętu, który nie jest obsługiwany przez HTML5
c) Ograniczona legalność: Ponieważ nie ma centralnego sklepu z plikami do pobrania dla PWA, brakuje im poczucia legalności i zaufania, które zwykle dają aplikacje natywne z Play Store/App Store.
d) Wsparcie logowania przez aplikację : Aplikacje natywne mają możliwość rozmawiania z innymi aplikacjami i uwierzytelniania loginów (Facebook, Twitter, Google). Jako strona internetowa, PWA nie ma możliwości komunikowania się z innymi zainstalowanymi aplikacjami.
Wnioski
Nie możemy powiedzieć, że PWA zabije aplikacje natywne w przyszłości. Ale wciąż rośnie zainteresowanie tym podejściem w społeczności. PWA są wciąż w powijakach i czeka je jeszcze wiele wyzwań. Mają jednak potencjał, aby zmienić sposób działania sieci.
Do przemyślenia
Według Henrika Joretega, „PWA to największa rzecz, jaka wydarzyła się w mobilnej sieci od czasu, gdy Steve wprowadził iPhone’a!”
Dyskutowalne? Kontrowersyjne? Do przyjęcia?
Zastanów się, zanim upłynie czas!
Dyskutowalne?