Podsumowanie artykułu
- PWA łączą cechy stron internetowych i aplikacji mobilnych — działają w przeglądarkach, ale można je instalować, działają offline i wysyłają powiadomienia push.
- Są lekkie, szybkie i dostępne na różnych urządzeniach — nie wymagają pobierania ze sklepu, automatycznie się aktualizują i zużywają mniej zasobów.
- Opierają się na dwóch kluczowych elementach — pliku manifestu i service workerze, który umożliwia m.in. cache’owanie i działanie offline.
- Sprawdzają się w e-commerce, mediach i usługach cyfrowych — korzystają z nich m.in. Starbucks, TikTok, Pinterest, Disney+, Uber i Financial Times.
- Nie są rozwiązaniem uniwersalnym — nie oferują pełnego dostępu do funkcji urządzenia, a wsparcie różni się w zależności od przeglądarki i systemu. PWA to świetny wybór dla firm oferujących treści i usługi online, ale nie zastąpią zaawansowanych aplikacji natywnych.
Jednym z najważniejszych osiągnięć w rozwoju stron internetowych w ostatniej dekadzie było pojawienie się progresywnych aplikacji internetowych, czyli Progressive Web Applications (PWA). Wiele firm działających w modelu B2C dostosowało swoje witryny do formatu PWA, a niektóre całkowicie zastąpiły nimi swoje natywne aplikacje (czyli te pobierane z App Store, Google Play czy Microsoft Store). Z tego artykuły dowiesz się, jakie są zalety i wady aplikacji PWA oraz w jakich scenariuszach biznesowych sprawdzą się one najlepiej.
Progressive web app — technologia i jej historia
Na początek warto wyjaśnić, czym właściwie jest „aplikacja internetowa”. To witryny stworzone z myślą o konkretnej funkcji lub zestawie funkcji — jak koszyki zakupowe czy poczta elektroniczna (przykładem może być Gmail). Tego typu aplikacje określa się mianem „jednostronicowych” (single-page applications), ponieważ nie ładują osobnych stron przy każdej zmianie danych. Zamiast tego całość aktualizuje się dynamicznie w czasie rzeczywistym. To kluczowe, by aplikacja webowa działała i była odbierana jak klasyczna aplikacja natywna.
Uczynienie aplikacji internetowej „progresywną” oznacza przyjęcie filozofii projektowania, w której punktem wyjścia jest prosta, funkcjonalna wersja aplikacji, a kolejne, bardziej zaawansowane funkcje są stopniowo dodawane użytkownikom korzystającym z nowoczesnych przeglądarek i urządzeń. Kluczową ideą jest zapewnienie podstawowej funkcjonalności, która będzie działać na możliwie najszerszej gamie przeglądarek i sprzętów. Dzięki temu także osoby z mniej wydajnymi urządzeniami czy wolniejszym połączeniem internetowym mogą korzystać z aplikacji bez przeszkód.
Choć to Google uznaje się powszechnie za promotora tej koncepcji i twórcę samego terminu w 2016 roku, to pierwsze kroki w kierunku odejścia od aplikacji natywnych na rzecz aplikacji webowych stawiali już w 2010 roku Steve Jobs i Apple. Microsoft natomiast szybko podążył śladem Google — przeglądarka Edge oparta na Chromium w pełni wspiera aplikacje PWA.
Czym charakteryzuje się progressive web app?
Eksperci są zgodni co do tego, że progresywne aplikacje webowe wyróżnia dziesięć podstawowych cech:
- Jest progresywna — to oczywiste. Aplikacja webowa musi działać na każdym urządzeniu, pobierając i uruchamiając coraz bardziej zaawansowane funkcje w zależności od możliwości przeglądarki i sprzętu użytkownika. Wszystkie nowoczesne przeglądarki radzą sobie z PWA całkiem dobrze, nawet jeśli nie obsługują w 100% wszystkich funkcji. Przez „radzą sobie” rozumie się, że strona nie powinna być zniekształcona, elementy nie mogą się na siebie nakładać, a aplikacja nie powinna się zawieszać, jeśli jakaś funkcja nie jest obsługiwana przez przeglądarkę.
- Można ją zainstalować. Użytkownik otrzymuje możliwość dodania aplikacji do ekranu głównego lub pulpitu. Dzięki temu…
- …ikona wygląda jak ikona każdej innej aplikacji natywnej i faktycznie otwiera się w osobnym oknie, a nie w nowej karcie przeglądarki. Aplikacja unika też nadmiernego odświeżania stron.
- PWA działa na bardzo szerokim wachlarzu ekranów i przeglądarek, co oznacza, że interfejs użytkownika musi być odpowiednio elastyczny i dostosowywać się do różnych warunków.
- Aplikacja jest łatwa do znalezienia. Wyszukiwarki wciąż mają problemy z indeksowaniem aplikacji natywnych dostępnych w App Store Apple’a, Google Play czy Microsoft Store. Tymczasem aplikacje PWA są widoczne zarówno w wyszukiwarce, jak i w niektórych sklepach z aplikacjami (Google i Microsoft umożliwiają ich instalację). Co więcej wyszukiwarka powinna jednoznacznie informować, że znalazła aplikację webową, a nie stronę internetową czy aplikację natywną.
- Użytkownik może zapisać adres URL aplikacji lub go udostępnić.
- Aplikacja powinna umożliwiać łatwy powrót do jej używania. Często sama przypomina o sobie, wysyłając powiadomienia zachęcające do ponownego skorzystania — co może być dużą zaletą dla młodszych użytkowników (ale uciążliwością dla starszych, zwłaszcza gdy powiadomienia są zbyt częste).
- Aplikacja powinna dawać się uruchomić nawet bez dostępu do Internetu lub przy bardzo słabym połączeniu. Nawet jeśli tryb offline nie ma większego sensu w danym zastosowaniu, aplikacja powinna jasno informować, które funkcje będą niedostępne bez połączenia.
- Gdy połączenie jest dostępne, aplikacja PWA automatycznie odświeża treści, tak aby użytkownik zawsze miał dostęp do najnowszych danych.
- Aplikacje PWA muszą być obsługiwane przez protokół HTTPS, aby zapobiegać atakom typu „man-in-the-middle” — to kluczowe ze względu na sposób ich działania i budowy.
Dwa kluczowe elementy progressive web apps
Aby aplikacja spełniała wymienione wcześniej cechy charakterystyczne dla PWA, musi zawierać dwa podstawowe komponenty.
Po pierwsze, potrzebny jest manifest aplikacji webowej. To zwykły plik tekstowy w formacie JSON, w którym przeglądarki znajdują informacje takie jak nazwa aplikacji, autor, wersja, opis, wykorzystywane ikony i lista zasobów niezbędnych do jej działania (i nie tylko). Manifest pozwala twórcom aplikacji określić, jak duży fragment interfejsu przeglądarki ma być widoczny podczas korzystania z aplikacji: tryb standalone (bez paska narzędzi), full-screen (pełnoekranowy, maksymalnie zbliżony do aplikacji natywnej), minimal-UI (z podstawową nawigacją, np. „wstecz” i „odśwież”) lub browser (pełna przeglądarka).
Manifest jest również wykorzystywany podczas instalacji aplikacji na urządzeniu mobilnym użytkownika — określa m.in. URL startowy uruchamiany po kliknięciu ikony. Przeglądarki oparte na Chromium (np. Chrome) wymagają obecności manifestu i spełnienia wszystkich warunków, by wyświetlić sugestię „Dodaj do ekranu głównego”.
Drugim kluczowym elementem jest service worker — plik JavaScript działający po stronie klienta, który pełni rolę pośrednika między przeglądarką a serwerem. To on odpowiada za funkcje działające w tle, które upodabniają PWA do aplikacji natywnych: powiadomienia push, buforowanie plików i zasobów, a także obsługę zapytań i odpowiedzi sieciowych. To ostatnie umożliwia aktualizowanie aplikacji w tle bez pogarszania czasu ładowania.
Które firmy oferują swoim użytkownikom aplikacje PWA?
Aplikacje PWA znalazły już zastosowanie w wielu branżach, a obserwowanie ich dalszego rozwoju zapowiada się ciekawie, szczególnie dla tych, którzy śledzą nowinki technologiczne.
Na czoło wysuwają się narzędzia, z których większość korzystała w trakcie pandemii: Zoom, Teams i Google Meet — wszystkie dostępne jako progresywne aplikacje, zarówno w trybie standalone, jak i pełnoekranowym.
Także media społecznościowe korzystają z PWA: X (dawniej Twitter), Tinder i Pinterest. Pinterest to ciekawy przypadek ze względu na konieczność wyświetlania tysięcy obrazów na ekranach o różnych rozmiarach. Facebook, z kolei, po rocznej nieobecności powrócił do Microsoft Store w postaci aplikacji PWA, zastępując wcześniejszą wersję natywną.
W ostatnich latach do grona tych firm dołączył TikTok, który w 2022 roku pojawił się jako aplikacja w Microsoft Store – w rzeczywistości będąca progresywną aplikacją webową. Na Chromebookach oraz desktopach TikTok PWA dostępna jest również poprzez przeglądarkę lub Sklep Play. Interfejs został zoptymalizowany pod większe ekrany, co pokazuje rosnącą rolę PWA jako alternatywy dla tradycyjnych aplikacji mobilnych, także w przypadku dynamicznych, wideo-centrycznych platform.
W handlu elektronicznym aplikacje PWA wykorzystywane są przez firmy z bardzo różnych sektorów: Trivago (planowanie podróży), Starbucks (kawa), McDonald’s (fast food), Target i Walmart (handel detaliczny). Nawet marki premium, takie jak BMW czy Lancôme, zdecydowały się na wdrożenie progresywnych aplikacji.
Wśród firm stawiających na innowacyjność wyróżniają się Uber i Airbnb. Uber postawił na PWA, by dotrzeć do rynków, gdzie jakość połączenia nie pozwala na efektywne korzystanie z aplikacji o dużej liczbie graficznych komponentów.
Również media informacyjne wykorzystują ten format: Washington Post, Financial Times, Wired, Forbes, a także Medium — serwis z pogranicza blogowania i dziennikarstwa. Większość z nich działa w modelu subskrypcyjnym, oferując dostęp tylko dla płacących użytkowników lub limitując liczbę bezpłatnych artykułów miesięcznie.
Lista nie kończy się jednak na tym. PWA są obecne w takich dziedzinach jak gry, komunikacja (Telegram), streaming muzyki (Spotify), podróże (United Airlines) i wiele innych. Warto zwrócić uwagę na mniej oczywiste przykłady, takie jak code.nasa.gov (katalog otwartego oprogramowania NASA), Soundslice (narzędzie dla muzyków do wspólnego ćwiczenia i uzyskiwania informacji zwrotnej, przypominające w idei Duolingo), Lotto.de (niemiecka loteria) czy Yummly (wyszukiwarka przepisów kulinarnych dostosowanych do preferencji użytkownika i dostępnych składników).
Do tego grona dołączył również Disney+, który pod koniec 2023 roku zastąpił natywną aplikację UWP na Windows 10/11 wersją PWA opartą na silniku Edge/WebView2. Choć nowe rozwiązanie nie oferuje już możliwości pobierania offline, to decyzja o migracji na PWA pokazuje kierunek, w jakim zmierzają nawet giganci streamingowi – w stronę uproszczonego, webowego modelu dystrybucji aplikacji także na desktopach.
Jakie są zalety budowania aplikacji PWA?
Istnieje wiele powodów, dla których warto rozważyć udostępnienie użytkownikom aplikacji progresywnej zamiast natywnej lub klasycznej aplikacji webowej.
Przede wszystkim aplikacja PWA może być łatwiejsza do zbudowania niż aplikacja natywna, szczególnie jeśli już istniejący projekt powstał w JavaScripcie. Tworząc nową aplikację od podstaw, trzeba pamiętać o złożoności pisania trzech wersji natywnych — na iOS, Androida i Windows 10/11. Stworzenie jednej aplikacji działającej wszędzie to ogromna oszczędność czasu i zasobów.
Dodatkowo, w przeciwieństwie do aplikacji natywnych, aplikacja PWA przenosi dużą część obliczeń z urządzenia na serwer, dzięki czemu zużywa mniej pamięci urządzenia.
Z drugiej strony, właśnie to przeniesienie niektórych procesów na stronę klienta (a nie tylko serwera, jak w klasycznych stronach WWW) ma wpływ na SEO — bez manifestu aplikacja może być trudniejsza do zindeksowania. Ale client-side rendering i odpowiednie buforowanie to nieodzowne elementy, jeśli aplikacja ma działać offline. Na przykład, przyciski „wstecz” w trybie pełnoekranowym muszą działać w obrębie aplikacji, bo pasek narzędzi przeglądarki nie jest widoczny — i powinny błyskawicznie przywoływać wcześniej odwiedzoną, zbuforowaną stronę. To istotne, gdy użytkownik chwilowo traci dostęp do sieci, np. w windzie, tunelu czy górskiej dolinie.
Aplikacje PWA zmniejszają też liczbę kroków potrzebnych do rozpoczęcia korzystania z aplikacji, co przekłada się na wyższe zaangażowanie użytkownika. Aktualizacje są wdrażane automatycznie po stronie serwera — nie wymagają działania ze strony użytkownika, jak w przypadku aplikacji natywnych. „Instalacja” jest natychmiastowa i nie wymaga odwiedzania sklepu z aplikacjami. To duży atut dla firm, które nie chcą dzielić się prowizją od subskrypcji z pośrednikami — choć kwestia ta nie jest jeszcze w pełni uregulowana.
Równocześnie progressive web apps są obecne także w sklepach z aplikacjami, co zwiększa ich widoczność dla użytkowników szukających aplikacji. Niezależnie od sposobu instalacji, aplikacja pojawia się jako ikona na ekranie urządzenia, gotowa do działania i wysyłania powiadomień.
Nie zawsze warto wybierać aplikacje PWA
Istnieją jednak pewne ograniczenia, które należy wziąć pod uwagę.
Po pierwsze, progresywne aplikacje webowe nie sprawdzą się w przypadku zaawansowanych aplikacji czy gier wymagających dużej mocy obliczeniowej. Użytkownicy aplikacji PWA zazwyczaj korzystają z nich w jasno określonym celu — traktują je jako narzędzie.
Po drugie, obsługa PWA nie jest jeszcze powszechna. Przeglądarki oparte na silniku Mozilla nie pozwalają na instalację PWA (czyli dodanie ikony do ekranu głównego) bez użycia dodatkowych rozszerzeń — fani Firefoksa muszą korzystać z przeglądarek opartych na Chromium.
Obsługa powiadomień push dla aplikacji PWA na iPhone’ach i iPadach została wprowadzona dopiero w iOS 16.4, pod warunkiem że aplikacja została dodana do ekranu głównego. Wcześniejsze wersje systemu nie umożliwiały korzystania z tej funkcji. Sama możliwość dodawania aplikacji webowych do ekranu głównego istnieje od iOS 14 i nadal działa. Choć nie wszystkie funkcje dostępne są na urządzeniach Apple, wsparcie dla PWA systematycznie się poprawia.
Po trzecie, PWA nadal nie mają dostępu do wszystkich funkcji urządzeń mobilnych — choć postęp w tym zakresie jest szybki. Obecnie dostępne są już m.in. funkcje Bluetooth, NFC, a nawet czytniki linii papilarnych, choć wsparcie może się różnić w zależności od platformy i przeglądarki.
Na koniec, PWA nie są w stanie logować użytkowników przy pomocy kont Facebooka, Google czy LinkedIn bezpośrednio z poziomu urządzenia, jak robią to aplikacje natywne. Logowanie przez te serwisy jest możliwe, ale tylko online, nawet jeśli użytkownik jest już zalogowany w aplikacji danego serwisu społecznościowego.
Czy progresywna aplikacja internetowa to dobre rozwiązanie dla Twojego biznesu?
Lista kategorii, w których wykorzystuje się PWA, jest niemal przytłaczająca, ale łączy je jedno — aplikacje te realizują stosunkowo wąski zakres funkcji w prostym środowisku, nawet jeśli oferują dostęp do dużej ilości treści.
Dla małych firm lub startupów bez ambitnych planów rozwoju w zupełności wystarczy tradycyjna strona internetowa. To prostsze i tańsze rozwiązanie, pozwalające na zaistnienie w sieci. W takim przypadku inwestycja w progresywną aplikację najprawdopodobniej się nie zwróci — to nie jest narzędzie dla nowicjuszy ani okazjonalnych entuzjastów technologii.
Z kolei większe, ugruntowane firmy, które oferują szeroki wachlarz usług cyfrowych, powinny raczej postawić na aplikację natywną. Nie chodzi tu tylko o oczywiste zastosowania, takie jak gry czy media społecznościowe. Banki i instytucje finansowe muszą zapewniać najwyższy poziom doświadczenia użytkownika, a do tego często potrzebują pełnego dostępu do funkcji urządzenia — czego PWA wciąż jeszcze nie gwarantuje. W takim przypadku koszty tworzenia aplikacji dla kilku platform nie są barierą.
Jeśli firma już posiada aplikację natywną — na komputer, Androida czy iOS — nie ma konieczności jej zastępowania wersją progresywną. Taka aplikacja może oferować funkcje i poziom dopracowania, których PWA nie da się na razie odtworzyć.
Pomiędzy tymi dwiema skrajnościami znajdują się firmy, dla których internet to nie tylko punkt kontaktu z klientem, ale także kanał dostarczania usług. Takie biznesy nie muszą prowadzić osobnych kampanii promujących aplikację — użytkownicy mogą ją „zainstalować” bezpośrednio ze strony. Jeśli aplikacja i strona spełniają współczesne standardy technologiczne i UX, klienci będą zadowoleni. Jakie branże powinny szczególnie rozważyć PWA? E-commerce, media oraz twórcy narzędzi produktywnościowych. Innymi słowy, jeśli aplikacja ma służyć bezpośrednio konsumentom — do dostarczania treści, usług czy zakupów — progresywna aplikacja internetowa to opcja, której warto się przyjrzeć.
Podsumowanie
Skoro tak duża część życia przeniosła się na urządzenia mobilne, żadna firma nie może już ignorować tej wygody. Aplikacje PWA powstały właśnie w odpowiedzi na to zapotrzebowanie — przenoszą doświadczenie znane z dużych ekranów na te, z których korzysta się codziennie w komunikacji, pracy i rozrywce.
Wdrożenie aplikacji PWA może oznaczać lepsze doświadczenie użytkownika, większe zaangażowanie klientów i wzrost konwersji. To trzy korzyści, które w wielu przypadkach okazują się warte każdej zainwestowanej złotówki.
