Web Design Blog / Web:

Projektowanie Progressive Web Apps (PWA)

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:

https://www.pwabuilder.com/

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.

Źródła

Projektowanie Progressive Web Apps (PWA)
4.5 (90%) głosów: 6



Autor:

Służę pomocą w razie wykonania lub odnowienia strony internetowej dla twojej firmy niezależnie od lokalizacji czy skali przedsięwzięcia. Masz pytania? Pisz w komentarzu.

Zadaj pytanie lub skomentuj


Wyrażam zgodę na przetwarzanie moich danych osobowych przez firmę Paweł Mansfeld z siedzibą w Jastrzębiu-Zdroju, ul. Plebiscytowa 10, w celu udzielenia odpowiedzi, w tym przedłożenia oferty jeśli o nią pytam. Moje dane osobowe będą przetwarzane do czasu cofnięcia zgody lub przez okres niezbędny do ustalenia, dochodzenia lub obrony roszczeń. Mam prawo dostępu do danych, sprostowania, usunięcia lub ograniczenia przetwarzania, prawo sprzeciwu, prawo wniesienia skargi do organu nadzorczego i prawo do przeniesienia danych.

Komentarze publiczne

Brak komentarzy.
Otrzymuj powiadomienie o nowych artykułach

Wyrażam zgodę na przetwarzanie moich danych osobowych przez firmę Paweł Mansfeld z siedzibą w Jastrzębiu-Zdroju, ul. Plebiscytowa 10, w celu udzielenia odpowiedzi, w tym przedłożenia oferty jeśli o nią pytam. Moje dane osobowe będą przetwarzane do czasu cofnięcia zgody lub przez okres niezbędny do ustalenia, dochodzenia lub obrony roszczeń. Mam prawo dostępu do danych, sprostowania, usunięcia lub ograniczenia przetwarzania, prawo sprzeciwu, prawo wniesienia skargi do organu nadzorczego i prawo do przeniesienia danych.

*Bez obaw, nie udostępniam nikomu twojego adresu e-mail