Blog – 16.02.2018 Czym jest Progressive Web App (PWA) i dlaczego powinno mnie to obchodzić?

Jak trafiłeś na ten wpis na blogu, prawdopodobnie gdzieś słyszałeś termin PWA. To dobrze dla Ciebie – PWA są tym, za co rok 2018 zostanie zapamiętany, więc jesteś tuż przy krawędzi. Jakie to ekscytujące! W tym wpisie na blogu wyjaśniam, co właściwie oznacza ten termin i dlaczego powinieneś się nim zainteresować.
Progresywna aplikacja internetowa

Progressive Web App

(źródło: Google Developer site)

Co to jest PWA?

PWA to skrót od Progressive Web Application. Przeanalizujmy ją dzieląc ją na dwie części. Dwa ostatnie słowa („Web Application”) mówią same za siebie. PWA są aplikacjami webowymi. W tym przypadku webaplikacja oznacza po prostu aplikację działającą jako strona internetowa, jak na przykład Twitter. Pierwsza część terminu – Progressive – oznacza, że doświadczenia użytkownika są wzbogacane stopniowo w oparciu o możliwości przeglądarki. Zasadniczo oznacza to, że aplikacja internetowa działa dobrze w starszych przeglądarkach, ale może wykorzystywać nowsze technologie w celu poprawy doświadczenia, jeśli użytkownik korzysta z przeglądarki obsługującej te technologie. Brzmi prosto, prawda? Skąd więc wziął się ten termin?

Progresywny oznacza, że doświadczenie użytkownika jest ulepszane stopniowo w oparciu o możliwości przeglądarki

Termin ten został wprowadzony przez inżyniera Google Chrome Alexa Russella w jego wpisie na blogu w 2015 roku. Od tego czasu Google aktywnie promuje ich wykorzystanie i udostępnia wiele zasobów na ten temat, takich jak strona wyjaśniająca je bardziej szczegółowo.
Prowadząc prezentacje wokół PWA zawsze w tym momencie spotykam się z tym samym zakłopotaniem. „Więc… Czy to jest technologia? Czy jest to standard? Czy to coś, co jest własnością / opatentowane przez Google?” Nie, żadna z tych rzeczy. Jest to po prostu termin opisujący konkretny sposób projektowania i budowania aplikacji. Następnie spróbujmy zrozumieć, czym one są, przechodząc przez charakterystykę.
Oto oryginalne 9 cech PWA autorstwa Alexa Russella z wyjaśnieniem, co oznaczają w tym kontekście:

  • Responsive: Strona wygląda dobrze na różnych rozmiarach ekranu (np. telefon, tablet, desktop)
  • Connectivity independent: Funkcjonuje bez połączenia z Internetem
  • App-like-interactions: Look’n’feel natywnej aplikacji
  • Fresh: Zawsze aktualna
  • Safe: Utilise secure connection to mitigate multiple types of security threats
  • Discoverable: Przeglądarki automatycznie identyfikują PWA
  • Re-engageable: Może sprowadzić użytkowników z powrotem do aplikacji za pomocą, na przykład, powiadomień Push
  • Installable: Może być przechowywany na ekranie głównym, tak jak natywne aplikacje, ale bez dodatkowych kłopotów z App Store
  • Linkable: Mogą być udostępniane jako zwykłe adresy URL

Dla czytelnika tego wpisu na blogu najważniejsze funkcjonalności to:

  • Instalowalność na ekranie głównym
  • Dostęp do wielu natywnych interfejsów API, takich jak aparat, geolokalizacja, wibracje, płatności itp.
  • Wsparcie dla powiadomień Push
  • Użytkowanie offline
  • Wsparcie dla pełnego ekranu i splash screen

(źródło: Alex Russell’s blog post)

Podsumowując wszystko powyższe, PWA mogą zrobić większość rzeczy, które mogą zrobić aplikacje natywne, a przepaść między tym, co mogą zrobić aplikacje natywne i webowe cały czas się zmniejsza.

Why Now?

Do tej pory możesz myśleć, że to wszystko brzmi tak dobrze, że musi być jakiś haczyk, ponieważ PWA nie są domyślnym sposobem wdrażania aplikacji. Tak, masz rację. Jest pewien haczyk. Brakuje wsparcia dla technologii uprawniających PWA w niektórych środowiskach. Android wspiera PWA już od jakiegoś czasu, począwszy od Androida 5, co oznacza, że ponad 80% (źródło: statystyki Google Android) urządzeń z Androidem na świecie wspiera technologie potrzebne do implementacji PWA. Adopcja jest jeszcze większa, jeśli weźmiemy pod uwagę tylko Europę lub Amerykę Północną. Tak więc wsparcie Androida jest już naprawdę dobre.
Niestety, drugi kluczowy gracz dzielący rynek telefonów komórkowych nie był zbyt chętny do wdrażania technologii (przeczytaj dlaczego). Brakowało wsparcia dla iOS, uniemożliwiając tym samym szerszą adopcję PWA. Jednak od nadchodzącego iOS 11.3, wsparcie będzie dostępne również dla iOS. Na szczęście adopcja nowych wersji iOS jest stosunkowo szybka, więc można założyć, że wysoki poziom wsparcia będzie dostępny jeszcze w tym roku. Dla odniesienia, wersje 10 i 11 stanowią 93% wszystkich wersji iOS używanych tam według Apple.
Pomimo, że uwaga podczas rozmowy o PWA jest często skupiona na środowisku mobilnym, działają one również na desktopie. Na początku tego miesiąca pojawiło się ważne ogłoszenie Microsoftu mówiące, że PWA są teraz obsługiwane przez Edge i Windows 10. Chrome i Firefox obsługują PWA już i tak będzie w następnym wydaniu desktopowego Safari.

Przykład: Twitter Lite

Najbardziej znanym przykładem PWAs jest Twitter w wersji PWA o nazwie Twitter Lite (wypróbuj go z Androidem lub pulpitem na mobile.twitter.com). Twitter opublikował również swoje uzasadnienie dla budowy wersji PWA. Aby podkreślić niektóre fakty z postu, w porównaniu do ich rodzimej aplikacji, rozmiar wersji PWA jest tylko 1-3% i średni czas ładowania jest 30% mniej.
Inne znane przykłady PWA to Forbes, Trivago, Washington Post, Telegram, Alibaba i ostatnio Google Maps Go. Dostępny jest również katalog PWA.

Wnioski

Rok 2018 ma być rokiem dla PWA. Oprzyrządowanie jest już na świetnym poziomie i cały czas wyskakuje coraz więcej PWA. Gdy wsparcie w iOS będzie już wysoce dostępne, PWA staną się realistyczną opcją dla aplikacji natywnych. W przypadku, gdy zastanawiasz się, czy PWA są właściwym wyborem dla Ciebie, sprawdź wkrótce, jak napiszę przewodnik na temat Should I do a PWA instead of a native app?
Gofore ma już doświadczenie w PWA, a także posiada szerokie doświadczenie w budowaniu responsywnych, świetnie wyglądających, offline-first i wydajnych aplikacji internetowych. Niezależnie od tego, czy potrzebujesz pomocy przy wyborze architektury, projektowaniu lub wdrażaniu PWA, nie wahaj się z nami skontaktować.

DALSZE CZYTANIE Z BLOGA GOFORE

Agile Transformation in Action – Part 1
Agile Transformation in Action – Part 2
What’s the point scaling Agile

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.