Krótki przewodnik po Progressive Web App - Michał Molenda

Krótki przewodnik po 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.

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

Michał Molenda

Autor wpisu:

Michał Molenda

Od ponad 16 lat jako full-stack developer a obecnie zewnętrzny CTO wspieram firmy w tworzeniu oprogramowania, optymalizacji procesów i kosztów oraz pomagam startupom w dojściu do produkt market fit.

Najczęściej czytane

Biznes

MVP, czyli jak zweryfikować swoje założenia
MVP, czyli jak zweryfikować swoje założenia

Minimum Viable Product (MVP), czyli minimalna wersji produktu, który wystarczy do weryfikacji naszych założeń biznesowych.

Czytaj więcej

Biznes

Wycena prac programistycznych
Wycena prac programistycznych

Wycena prac programistycznych to temat rzeka. Omówimy dwie najpopularniejsze metody. Rozliczenie stałe i rozliczenie na podstawie przepracowanych godzin.

Czytaj więcej

Biznes

Oprogramowanie pod sklep internetowy
Oprogramowanie pod sklep internetowy

Oprogramowanie pod sklep internetowy to najważniejsza decyzja każdego e-przesiębiorcy. Zobacz, na co warto zwrócić uwagę.

Czytaj więcej

Biznes

Ile kosztuje stworzenie strony internetowej
Ile kosztuje stworzenie strony internetowej

Najważniejsze pytanie każdej osoby, która chce wejść w świat internetu. Ile kosztuje stworzenie strony internetowej i jak nie przepłacić.

Czytaj więcej

Biznes

Moje przemyślenia po "Software House Scale It Up!"
Moje przemyślenia po "Software House Scale It Up!"

Konferencja Software House Scale It Up to pierwsza konferencja dla właścicieli firm IT, zobacz moje przemyślenia i wnioski.

Czytaj więcej

Zróbmy razem
fajny projekt.

Aby poznać mnie lepiej, odwiedź moje profile w mediach społecznościowych lub po prostu napisz do mnie, abyśmy mogli porozmawiac o Twoim projekcie.

Napisz do mnie
Michał Molenda