Co to jest PWA (Progressive Web App) i jak działa?
Coraz większym zainteresowaniem cieszą się aplikacje typu PWA. Zastanawiasz się co oznacza ten skrót i o jaki rodzaj aplikacji chodzi? Służymy Ci pomocą.
Z dnia na dzień rośnie zainteresowanie tematem aplikacji webowych PWA. Są one projektowane z zasadą „mobile first”. Oznacza to, że ich projekt tworzy się z myślą o urządzeniach mobilnych, aby korzystanie z witryny na smartfonie było w pełni komfortowe. Tym samym wzrasta wartość User Experience, czyli pozytywnych doświadczeń użytkowników aplikacji. Dlaczego zasada „mobile first” jest ważna? Z dnia na dzień rośnie ilość osób, które wyświetlają strony internetowe przez przeglądarki w urządzeniach mobilnych.
Z tego artykułu dowiesz się:
- Co oznacza termin PWA
- Jakie cechy powinna posiadać aplikacja PWA
- Jak zainstalować aplikację PWA na smartfonie
- Jakie są różnice i podobieństwa pomiędzy aplikacjami mobilnymi a aplikacjami PWA
Co oznacza termin PWA?
PWA to skrót od wyrazów Progressive Web App (tłumacząc na język polski: Progresywna Aplikacja Internetowa). Jej celem jest zapewnienie najwyższej jakości odbioru stron internetowych przez wszystkie systemy operacyjne, a także bez względu na jakość połączenia z internetem. Po wejściu na stronę typu PWA, zawartość aplikacji zapisywana jest w pamięci urządzenia. Dzięki zapisanym danym, ponowne wejście na stronę PWA może odbyć się również w trybie offline. To stanowi przewagę stron PWA nad innymi rodzajami stron internetowych.
Dlaczego funkcja pobierania aplikacji PWA jest ważna? Dzięki temu użytkownik twojej strony, po ściągnięciu jej na smartfon, będzie mógł otworzyć ją w trybie offline. To oznacza, że będzie mógł przeglądać zawartość strony nawet podczas podróży pociągiem czy samolotem.
Jakie atrybuty powinna posiadać aplikacja PWA?
PWA jest aplikacją webową (napisaną w językach HTML + JS + CSS), która została rozwinięta o kilka atrybutów (tak zwanych PWA checklist):
- Responsywność: strona powinna mieć responsywny projekt, czyli taki, który dostosowuje się do rozmiaru ekranu. Dzięki temu wygląda dobrze zarówno na przeglądarkach w komputerze, jak i tych w telefonach.
- Niezależność od łączności: umożliwia pracę w trybie offline. Dzieje się to dzięki Service Worker (mechanizm próbujący rozwiązać problem z dostępem offline do aplikacji webowych).
- Bezpieczeństwo: aplikacje PWA obsługiwane są przez protokół TLS, który szyfruje dane i monitoruje integralność.
- Aktualność: aplikacji PWA nie trzeba ich aktualizować samodzielnie, ponieważ są one nieustannie poddawane procesowi aktualizacji przez mechanizm Service Worker.
- Szybkość: strona PWA ładuje się szybko nawet przy wolnym połączeniu internetowym.
- Reaktywność: aplikacja szybko reaguje na akcje użytkownika (takie jak kliknięcie, otwieranie menu).
- Możliwość powiadomień typu Push: PWA pozwala na korzystanie z powiadomień push. Z punktu widzenia sprzedaży w Internecie są one bardzo korzystne. Pozwalają informować o aktualnych ofertach, ułatwiać ścieżkę zakupową czy też przeprowadzać retargeting.
- Możliwość Instalacji: strona typu PWA posiada plik ‘manifest.json’, dzięki któremy można zapisać ją na ekranie głównym urządzenia mobilnego. Czynność ta nie wymaga wchodzenia na sklep z aplikacjami (taki jak App Store czy Google Play).
Jak zainstalować aplikację PWA na smartfonie?
W przypadku urządzeń z systemem Android:
1. Należy wejść w oknie przeglądarki na wybraną stronę PWA.
2. Na stronie pojawi się komunikat o możliwości dodania aplikacji do ekranu głównego. Należy w niego kliknąć.
3. Aplikacja PWA zainstaluje się w kilka sekund na ekranie początkowym.
W przypadku urządzeń z systemem iOS:
1. Należy wejść w oknie przeglądarki na wybraną stronę PWA, a następnie kliknąć przycisk „więcej”.
2. Z menu wybieramy przycisk „Do ekranu początkowego”.
3. Pojawi się pole, w którym możemy zmienić nazwę aplikacji.
4. Aplikacja PWA zainstaluje się w kilka sekund na ekranie początkowym.
Jakie są różnice i podobieństwa pomiędzy aplikacjami mobilnymi a aplikacjami PWA?
Nazwa „Aplikacja Webowa” może kojarzyć się z aplikacją na smartfony. Jednak są to dwa oddzielne terminy, które należy odróżniać.
Zacznijmy od podobieństw. Progressive Web Apps zacierają granice z aplikacjami mobilnymi. Obydwa rodzaje aplikacji mają za zadanie działać w trybie offline. Łączy je również podobny wygląd.
Zasadniczą różnicą pomiędzy PWA a aplikacjami mobilnymi jest taka, że te drugie wymagają zainstalowania na urządzenia mobilne. Ponadto aplikacje mobilne są dedykowane dla konkretnego systemu. To oznacza, że jeśli chcesz, aby twój sklep internetowy posiadał aplikację mobilną, to musisz zlecić oddzielnie stworzenie aplikacji na system iOS i oddzielnie na system Android. Jeśli zdecydujesz się na aplikację PWA, wówczas będzie się ona otwierała prawidłowo zarówno na systemie iOS, Android, jak i Windows. Nie będziesz więc musiał zlecać tworzenia aplikacji mobilnych.
Ponadto badania przeprowadzone Comscore pokazują, że miesięcznie niemal połowa użytkowników smartfonów nie pobiera żadnej aplikacji mobilnych. Powody mogą być różne: długość instalacji, brak potrzeby kolejnej aplikacji na telefonie. Warto podkreślić, że aplikacje PWA zapisują się na smartfonie błyskawicznie i równie szybko można je usunąć. Jest to dobre rozwiązanie np. dla osoby w podróży. Przed podróżą może pobrać stronę, aby móc ją przeglądać nie mając internetu. Ponadto aplikacje PWA po ściągnięciu na smartfona mogą ważyć nawet kilkanaście razy mniej niż aplikacje mobilne.
| Aplikacje PWA | Aplikacje Mobilne | |
|---|---|---|
| Posiadają responsywny projekt | TAK | TAK |
| Możliwość bardzo szybkiej instalacji | TAK | NIE |
| Mogą wysyłać powiadomienia typu Push | TAK | TAK |
| Automatycznie aktualizowane poprzez mechanizm Service Worker | TAK | NIE |
| Rozpoznają lokalizację użytkownika | TAK | TAK |
| Konieczność pobrania | NIE | TAK |
| Możliwość podlinkowywania podstron | TAK | NIE |
| Działają w trybie offline | TAK | TAK |
| Działają na wszystkich systemach | TAK | NIE |
Podoba Ci się idea Progressive Web Apps?
Planujesz wdrożyć PWA na Magento?
Zapraszamy do zapoznania się z artykułem: Progressive Web Apps (PWA) w Magento – wszystko, co powinieneś wiedzieć.
Podsumowanie:
PWA (Progressive Web Apps) to aplikacje webowe rozwinięte o kilka atrybutów (PWA checklist). Z wyglądu przypominają one aplikacje mobilne, jednak nie należy ich ze sobą mylić. Aplikacje PWA w łatwy sposób można pobrać na telefon, omijając sklep z aplikacjami. PWA mają za zadanie działać w trybie offline. Ponadto, są one najszybciej działającymi stronami na rynku. PWA otwierają się poprawnie bez względu na system, na którym są przeglądane. Są one dostosowane do każdego rodzaju smartfonów. PWA zyskują na popularności wraz ze wzrostem użytkowników urządzeń mobilnych.