Web Design Blog / Web:

Projektowanie Progressive Web Apps (PWA)

Data publikacji: 3 maja 2019

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.6 (91.43%) głosów: 7


Komentarze

Brak komentarzy.

Dodaj swój komentarz