# Krótki przewodnik po Progressive Web App

Autor: Michał Molenda  
Data: 2019-06-25 16:49:00

[Oryginalny artykuł](https://michalmolenda.pl/blog/progressive-web-app)

Progressive Web App to aplikacja w technologii JavaScript, która jest zwykłą stroną internetową, ale wygląda i działa jak natywna aplikacja.

## Progressive Web App

PWA, czyli Progressive Web App to aplikacja internetowa napisana w technologii JavaScript, która uruchamiana jest jak zwykła strona internetowa, ale wygląda i działa jak natywna aplikacja mobilna lub desktopowa. Pojęcie [PWA](https://codeapps.pl/technologie/pwa) zaczęło zyskiwać popularność w 2015 roku wraz z rozwojem technologii, która umożliwiają tworzenie dynamicznych aplikacji webowych.

Przeglądarka internetowa (np. Chrome czy FireFox) zapisują taką stronę w pamięci telefonu. Taka operacja nie tylko rozszerza możliwości naszej aplikacji, ale również przyśpiesza jej działanie. Dodatkowo, użytkownik może stworzyć ikonę aplikacji w swoim telefonie. Dostęp jest więc dużo łatwiejszy, ponieważ nie trzeba za każdym razem wpisywać adresu w przeglądarce internetowej.

Aplikacja Progressive Web App zadziała na wszystkich aktualnych przeglądarkach i urządzeniach mobilnych.

## Korzyści jakie daje PWA

- **Dostępność** – użytkownik pod ikonką ma dostępną aplikację, nie musi się zastanawiać jaki jest adres strony
- **Responsywność** – aplikacje PWA działają na każdym rozmiarze urządzenia
- **Działanie offline** – dzięki wbudowanym tzw. Service Workers, aplikacje PWA mogę częściowo lub w całości działać bez połączenia z internetem
- **Przyjazny wygląd** – aplikacja działa jak zwykła natywna aplikacja, użytkownik nie widzi różnicy
- **Łatwiejsza aktualizacja** – aplikacja wygląda jak aplikacja natywna, ale jednak to dalej jest strona, nie musimy czekać z aktualizacjami aż Apple czy Google je zaakceptują a użytkownik zaktualizuje aplikacje
- **Możliwości** – aplikacje PWA mogą korzystać z wielu wbudowanych funkcji urządzenia jak geolokalizacja czy powiadomienia
- **Rozwój** – aplikacja PWA to jeden kod dla wielu urządzeń, nie musimy tworzyć osobnych programów na iOS a osobnych na Androida
- **Bezpieczeństwo** – protokół HTTPS chroni przesyłane przez nas dane
- **SEO** – aplikacje PWA są nie dość, że są normalnie indeksowane w wyszukiwarkach to jeszcze google promuje takie strony

Należy pamiętać, że PWA to nie tylko [dedykowane aplikacje](https://codeapps.pl/uslugi/dedykowane-oprogramowanie). To również technologia, dzięki której możemy dużo zyskać, jeśli chodzi o nasz biznes. Coraz więcej [sklepów internetowych](https://codeapps.pl/uslugi/sklepy-internetowe) buduje wersje mobilne swoich sklepów w tej technologii, co przynosi realne korzyści.

## Aplikacje PWA

Strona mobilna AliExpress, po przejściu na PWA konwersja na nowych użytkowników wzrosła o 104% a konwersja na przeglądarce Safari o 84%. Warto też wspomnieć o tym, że dwukrotnie wzrosła liczba odwiedzanych stron na sesję a średni czas spędzony na stronie wzrósł o 74% we wszystkich przeglądarkach.

Trivago, jeden z większych serwisów dla podróżujących chwali się tym, że aż pół miliona osób dodało ikonę aplikacji do ekranu domowego swojego smartfona. Tacy użytkownicy są dużo bardziej zaangażowani, konwersja w tym przypadku wzrosła aż o 97%!

Firma Uber chcąc sprawić, aby użytkownicy z wolniejszym internetem mogli korzystać z ich aplikacji zastosowała w wersji mobilnej strony technologię PWA. Spakowana strona ważyła mniej niż 50k i ładowała się poniżej 3 sekund na sieci 2G!

Takich przykładów można wymienić dużo więcej. Jeśli jesteś ciekawy jak PWA wpłynęło pozytywnie na inne firmy, polecamy zobaczyć stroną [PWA Stats](https://www.pwastats.com/). Tam znajdziesz dużo ciekawych smaczków.

Oczywiście, nie ma idealnych technologii. Musimy pamiętać również o minusach PWA:

- w porównaniu do natywnych aplikacji, aplikacje PWA nadal nie mogą korzystać ze wszystkich wbudowanych funkcji w urządzeniach mobilnych (np. Bluetooth czy NFC)
- w aplikacji PWA nie uzyskamy dostępu do danych użytkownika w telefonie
- przeglądarka Safari nie pozwala na obsługę powiadomień Push

## Przykłady stron PWA

Warto również wspomnieć o przykładach stron internetowych stworzonych w technologii PWA a tych jest naprawdę sporo:

- m.aliexpress.com
- instagram.com
- maps.google.com
- m.olx.pl
- m.onet.pl
- trivago.com
- mobile.twitter.com
- m.uber.com

Więcej ciekawych przykładów można zobaczyć na stronie [PWA.rocks](https://pwa.rocks/).

Jak sam widzisz drogi czytelniku, największe internetowe firmy, zarówno w Polsce jak i na świecie, korzystają z tej technologii.

Chyba trudniej o lepszą rekomendację? ?