Optymalizacja stron www, RWD
Progresywne aplikacje webowe (PWA) to zyskujący na popularności trend w świecie technologii internetowych. Środowiskiem ich działania są przeglądarki Internetowe, zaś od strony user experience przypominają one aplikacje mobilne.
W rozwoju progresywnych aplikacji webowych stosuje się te same narzędzia programistyczne co w przypadku tradycyjnych stron internetowych: HTML, CSS i Javascript wraz z którąś jego bibliotek, np. Angular lub React.
Kiedy mamy do czynienia z progresywną aplikacją webową?
Aby dana aplikacja mogła być nazywana progresywną aplikacją webową, musi spełniać kilka kryteriów, które świadczą o jej „progresywności”. Chodzi o:
- Pełną responsywność i cross-browserową kompatybilność - PWA powinny poprawnie działać bez względu na używaną przeglądarkę oraz rozdzielczość ekranu używanego urządzenia.
- Interface i nawigacja typowe dla aplikacji mobilnej - Tym co odróżnia aplikację progresywną od klasycznych stron internetowych jest wrażenie u użytkownika, jakby korzystał z aplikacji mobilnej.
- Praca w trybie offline i online – cechą charakterystyczną PWA jest ich możliwość pracy również w trybie offline.
- Konfiguracja powiadomień push – progresywne aplikacje mogą wysyłać powiadomienia push, które są doskonałym narzędziem marketingowym.
- Automatyczne aktualizacje – tym co stanowi o przewadze PWA nad aplikacjami natywnymi są automatyczne aktualizacje, które nie wymagają podejmowania żadnych akcji po stronie użytkownika.
- Bezpieczeństwo – protokół HTTPS stał się już absolutnym must-have dzisiejszego Internetu, ale zdarzają się strony, z którymi łączymy się za pomocą protokołu nieszyfrowanego. W aplikacji progresywnej mamy gwarancję łączenia za pośrednictwem szyfrowanego protokołu HTTPS.
Jak działa PWA?
Progresywne aplikacje korzystają z tych samych narzędzi, co typowe strony www, jednak wykorzystują dodatkowe elementy, dzięki którym upodabniają się one do natywnych aplikacji mobilnych.
Web app manifest
Web App Mainifest jest plikiem w formacie JSON, który przekazuje przeglądarce informacje na temat aplikacji, oraz wskazuje w jaki sposób ma być ona wyświetlana na urządzeniu użytkownika. W manifeście również zawarte są informacje na temat ikony aplikacji, która zostaje dodana do ekranu urządzenia. Aby dodać Web App Manifest do aplikacji, wystarczy w sekcji head każdej strony aplikacji, umieścić link odwołujący się do pliku.
Service worker
Service Worker to komponent, dzięki któremu aplikacja może działać offline. Jest to skrypt JS, który zapisuje w pamięci cache zapytania wysyłane przez aplikację do serwera, dzięki czemu aplikacja może działać nawet gdy nie ma połączenia z Internetem. Komponent ten również odpowiada za wyświetlanie powiadomień push.
Jak sprawdzić czy aplikacja jest już progresywana?
Aby się dowiedzieć, czy strona jest postrzegana jako progresywna aplikacja webowa najlepiej sięgnąć po rozszerzenie Lighthouse dostępne w przeglądarce chrome, które wskaże procentowo poziom w jakim zostały spełnione kryteria PWA. Dodatkowo rozszerzenie pokazuje, jakie kroki należy podjąć w celu ulepszenia aplikacji.
Dlaczego warto stworzyć PWA?
Mimo pewnych mankamentów, PWA posiadają dużą przewagę nad klasycznymi stronami internetowymi i aplikacjami mobilnymi. Zaliczyć do nich należy:
- Pozycjonowanie w wyszukiwarkach. Dużą przewagą w stosunku do rozwiązań natywnych, jest fakt, że progresywne aplikacje webowe tak jak typowe strony pojawiają się w wynikach wyszukiwania Google. Wiadomo, że prawie każdy krok użytkownika w sieci zaczyna się od wpisania frazy w wyszukiwarce, nie trzeba więc nikogo przekonywać, że łatwiej jest wypromować PWA niż aplikacje natywną.
- Oszczędność pieniędzy i czasu. Aplikacja na iOS-a i na Androida to dwie różne aplikacje. PWA to taka jakby strona internetowa wzbogacona o dodatkowe komponenty, więc aby ją stworzyć wystarczy front-end developer lub Web-developer.
- Brak konieczności rejestracji aplikacji w sklepach. Aplikacje progresywne są ogólnie dostępne z poziomu okna przeglądarki, nie trzeba więc ich rejestrować ani w iStore ani w Google Play.
- Niskie zużycie zasobów urządzenia. Dzięki temu, że PWA nie wymagają pobierania i instalacji na urządzeniu, zużywają one znikome zasoby urządzenia.
- Widoczność typowa dla aplikacji mobilnej. PWA można w taki sam sposób przypiąć do ekranu głównego urządzenia, jak aplikacje natywną.
Popularne aplikacje progresywne
Jest wiele znanych aplikacji, które na początku funkcjonowały jako natywne aplikacje, a z czasem zostały stworzone ich wersje progresywne, m.in.
- Uber – gwałtowny wzrost popularności marki na całym świecie stworzył potrzebę dotarcia do szerszego grona użytkowników – sposobem okazało się stworzenie PWA. Zaletami progresywnego Ubera są mała waga i szybkość ładowania.
- Tinder – w przypadku Tindera stworzenie aplikacji progresywnej zaowocowało wzrostem aktywności użytkowników. Jak pokazały statystyki, użytkownicy wykazują większą aktywność korzystając z PWA niż wersji natywnej.
- OLX - w przypadku OLX-a, wprowadzenie na rynek progresywnej aplikacji okazało się znakomitym posunięciem zwiększającym konwersje i sprzedaż wśród użytkowników mobilnych.
Jak widać, kroki podejmowane przez największe firmy pokazują, że przyszłość Internetu jest progresywna. Można przypuszczać, że wzrost popularności tego typu rozwiązań nie osłabnie w najbliższych latach. Warto więc – bez względu na skale prowadzonej działalności, zainwestować (relatywnie nieduże środki) w rozwój swojej PWA.
Spis treści
Podobne artykuły
Optymalizacja stron www
Top lista błędów UX
UX, czyli User Experience (doświadczenie użytkownika), odnosi się do wszystkich aspektów interakcji użytkownika z produktem, stroną...
Optymalizacja stron www
Punkty styku z marką w ecommerce – dlaczego są kluczowe dla biznesu?
Ten rok będzie bardzo ciekawym rokiem dla branży ecommerce. Mówi się, że sklepy internetowe są prowadzone już nie przez firmy...
Optymalizacja stron www
Co to są dyrektywy WCAG 2.0 i kto musi ich przestrzegać?
Internet stanowi otwartą przestrzeń, z której prawie każdy może korzystać bez ograniczeń. Prawie, bo często osoby dotknięte...
Przeczytaj również
Sklepy internetowe
Mechanizmy wspomagające sprzedaż w CMS Sun Group
W 2020 r. rynki handlu elektronicznego w Niemczech, Austrii i Szwajcarii, znane również jako region DACH, osiągnęły skonsolidowany...
Pozycjonowanie
4 sposoby na zdobycie ruchu na stronie
Ludzie zakładają strony internetowe z wielu różnych powodów. Jedni chcą dzielić się swoją wiedzą na konkretny temat, innym marzy...
Wszystkie
Jaka jest różnica pomiędzy UX a UI
Bardzo często w kontekście stron internetowych można napotkać dwa określenia – UX i UI. Wbrew pozorom to nie są one tożsame i...
