Progresywne aplikacje webowe (ang. Progressive Web Apps, w skrócie: PWA) to technologia, która wynosi standardowe strony internetowe stworzone według (obecnie już tradycyjnego) podejścia Responsive Web Design na wyższy poziom.
Doszliśmy do takiego momentu rozwoju technologii internetowych i narzędzi służących do ich tworzenia (HTML5, CSS 3, JavaScript i wszelkiego rodzaju rozszerzenia i frameworki), że dosłownie nie ma sensu tworzyć standardowych aplikacji mobilnych. Około 95% funkcjonalności, jakie zawsze zapewniały aplikacje mobilne da się uzyskać w standardowej przeglądarce za pomocą nowoczesnych stron internetowych.
PWA rozszerza możliwości aplikacji internetowych aby ta różnica dzieląca aplikacje mobilne i internetowe była jeszcze mniejsza.
Teoretyczne aspekty Progressive Web Apps
Co to jest Progressive Web Apps? Strony typu PWA mają w założeniu zapewnić podobne doświadczenia użytkowania jakich zawsze dostarczały mobilne aplikacje. W zaletach i wadach aplikacji mobilnych, można przeczytać, że przewagą aplikacji jest między innymi to, że działają one bez połączenia z internetem a każdorazowe ich otwieranie nie jest poprzedzone ich ładowaniem, które – przyznać trzeba – mało ma wspólnego z wygodą.
Dodatkową zaletą aplikacji mobilnych jest to, że można je personalizować i wykorzystywać w nich funkcje, których nie mają standardowe strony, między innymi powiadomienia Push czy lokalne bazy danych…
W tym momencie wkracza technologia PWA. Tak naprawdę powiadomienia Web Push już są dostępne, od kilku aktualziacji przeglądarek, (przecież klikamy wszędzie „nie zezwalaj na pokazywanie powiadomień”) a przechowywanie danych w lokalnych bazach danych, jest możliwe nawet od kilku lat – fakt – mało kto je stosuje.
Jeżeli chcesz sprawdzić jak działają lokalne bazy Web SQL zapraszam do przewodnika dotyczącego tworzenia aplikacji za pomocą technologii Cordova: Tworzenie aplikacji PhoneGap, tam w jednym z kroków pokazuję jak stworzyć zapisywać i czytać dane w API Web SQL Database.
Działanie strony bez połączenia z Internetem też już się da wykonać – zaskoczenie? Czytaj dalej a po obejrzeniu przykładów wszystko stanie się dla Ciebie jasne.
PWA eliminuje też największe wady aplikacji natywnych. Nie trzeba ich instalować i tworzyć oddzielnych aplikacji na wszystkie systemy – wystarczy jedno: przeglądarka internetowa.
Tworzenie aż trzech natywnych aplikacji mobilnych w Swift / Android Studio / Kotlin, było do tej pory największych hamulcem (oczywiście chodzi o głównie finanse) dla małych firm mogących wykorzystać potencjał aplikacji mobilnych.
Progressive Web Apps w praktyce
Jak działają PWA? Strony można instalować po prostu je odwiedzając. Jeżeli wejdziesz na moją stronę w normalnym trybie przeglądarki a potem wyłączysz połączenie internetowe, wchodząc na moją stronę nie będziesz grać w dino:
Tylko po prostu moja strona ci się wyświetli:
Co więcej, do twojej dyspozycji będą wszystkie podstrony, które wcześniej odwiedzono i miały szansę się zapisać. Możesz też utworzyć skrót na pulpicie, w końcu mamy do czynienia z aplikacją. A korzystanie ze strony będzie jeszcze przyjemniejsze, szybsze i wygodniejsze.
Wejdź np. na moją stronę główną i w przeglądarce kliknij przycisk odpowiedzialny za dodatkowe opcje. Potem wybierz opcję „Zainstaluj aplikację Paweł Mansfeld”:
Możesz też ją w każdej chwili odinstalować za pomocą podobnego menu w aplikacji. Jeżeli nie chcesz wykonywać całej procedury przygotowałem filmik:
Wygląd Progresywnych Webowych Aplikacji
Wygląd strony PWA może niczym się nie różnić od zwykłej strony. Jednak biorąc pod uwagę nowoczesne standardy tworzenia stron internetowych, warto stworzyć ją zgodnie z podejściem Mobile-First i zastosować jeden z dostępnych wzorców projektowych, np. Material Design albo oprzeć ją na szablonie Frameworka Bootstrap 4.
Dzięki temu uzyskamy prawdziwy „native-like experience” i nikomu nie będzie głupio nazwać twoją stronę zgodną z PWA pełnowartościową aplikacją:
Techniczne ujęcie PWA
Service Worker, będący nieodzownym elementem aplikacji PWA, pozwala na wykonywanie się różnych procesów na raz (może się aktualizować, odbierać i wysyłać informacje). Steruje też tym jak aplikacja się zachowuje w danych okolicznościach.
Aby nasza strona działała jako Progressive Web App, należy na początku
- wymyślić dla niej nawę (może to być nawa domeny lub nazwa jaka znajduje się w tagu title),
- wykonać zestaw ikon (takie jak favicona tylko większe),
- utworzyć przewodnią kolorystykę (głównie kolor tła)
- oraz zdecydować czy użytkownicy mają mieć dostęp do treści kiedy Internet jest odłączony czy nie – ma się pojawić personalizowana informacja,
- wyposażyć ją w certyfikat SSL. Czytaj jak przekierować stronę na adres HTTPS.
Wszystkie podstawowe informacje należy zapisać w wymaganym formacie i zapisać jako plik manifest.json, który musi znajdować się w głównym folderze strony.
Następnie wymagana jest rejestracja wspomnianego Service Workera. Jego kod można wygodnie wygenerować za pomocą kreatorów online:
Podsumowanie
Progresywne aplikacje webowe to oferujące wiele możliwości rozszerzenie standardowych stron internetowych. Od dawna można było korzystać z lokalnych baz danych, z localStorage lub po prostu z zaawansowanych skryptów JavaScript. Progressive Web Apps to kolejny krok dalej.
Odpowiedz lub skomentuj