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

Chcesz otrzymywać newsletter z poradami dla właścicieli biznesów, startupów i osób zainteresowanych programowaniem?
 
Podaj swój adres e-mail.

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

Prowadzę firmę Code Apps w której wraz z zespołem tworzymy startupy i wersji MVP produktów dla naszych klientów oraz rozwijamy Streply, narzędzie do analizy błędów i zachowania użytkowników w aplikacjach PHP.

Na mojej stronie poczytasz o uruchamianiu startupów, tworzeniu wersji MVP, rozwoju aplikacji webowych i programowaniu w PHP + Laravel.

Komentarze (1)

Przemek

Przemek

29.01.2020

Super! Wkład PWA w efektywność tych stron jest naprawdę imponujący.

Dodaj komentarz

Michał Molenda

Michał Molenda

Z tej strony Michał, programista PHP z 16 letnim doświadczeniem.

Prowadzę firmę Code Apps w której wraz z zespołem tworzymy startupy i wersji MVP produktów dla naszych klientów oraz rozwijamy Streply, narzędzie do analizy błędów i zachowania użytkowników w aplikacjach PHP.

Na mojej stronie poczytasz o uruchamianiu startupów, tworzeniu wersji MVP, rozwoju aplikacji webowych i programowaniu w PHP + Laravel.

Polecane wpisy

Biznes

Strona internetowa, co powinna zawierać
Strona internetowa, co powinna zawierać

Strona internetowa to niezbędny element każdej firmy, która chce pozyskiwać klientów z internetu. Zobacz, co powinna zawierać dobra strona www.

Czytaj więcej

Biznes

35 narzędzi, które poprawią Twoją efektywność
35 narzędzi, które poprawią Twoją efektywność

Zobacz wpis w którym przedstawiam aż 35 narzędzi, które poprawią Twoją produktywność podczas pracy.

Czytaj więcej

Biznes

Brief strony internetowej, co powinien zawierać
Brief strony internetowej, co powinien zawierać

Brief strony internetowej to dokument dla wykonawcy, zawierający zestaw informacji o tym jak strona internetowa ma wyglądać, działać i jaki jest jej cel.

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

Umowa z software house
Umowa z software house

Współpraca z software house może spędzać sen z powiek. Nie jest to straszne, ale warto zadbać o dobre zapisy w umowie. Zapraszam!

Czytaj więcej

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

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

Pracownik czy freelancer, kogo wybrać
Pracownik czy freelancer, kogo wybrać

Pracownik czy freelancer, o to jest pytanie! Zadaje je sobie bardzo dużo przedsiębiorców. Zobacz wpis w którym spisałem plusy i minusy obu form współpracy.

Czytaj więcej

Biznes

Jak przejść na model zdalnej pracy w firmie?
Jak przejść na model zdalnej pracy w firmie?

Proces przejścia na zdalną pracę firmy może wydawać się stresujący, ale przy odpowiednim podejściu to naprawdę nic strasznego.

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

Newsletter.

Podaj swój adres e-mail, jeśli chcesz otrzymywać newsletter z poradami dla właścicieli biznesów, startupów i osób zainteresowanych programowaniem. Zero SPAM'u!