Krótki przewodnik po Progressive Web App

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 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. 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 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. 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.

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ę? ?