Zrozumienie Progressive
Web Applications (PWA)

PWA to technologie, które istnieją już od kilku lat, a od wiosny 2018 roku są wspierane przez wszystkie główne przeglądarki internetowe. Mimo wielu zalet, takich jak szybkie ładowanie, możliwość pracy offline czy zwiększona wydajność, ich popularność nadal pozostaje stosunkowo niska. Powody tego mogą być różne, ale najczęściej wynika to z braku świadomości o ich potencjale oraz z przekonania, że wdrożenie tych technologii jest skomplikowane.

Eksperci z Google, w tym także ci publikujący na platformach takich jak Habr, dostarczają wielu wartościowych i kompetentnych informacji na temat Progressive Web Applications. Jednak ich wskazówki często są skierowane do osób, które już znają podstawy tematu i potrafią wdrożyć zaawansowane funkcje. Tymczasem PWA to technologie, które mogą być wdrażane stopniowo, bez konieczności całkowitej przebudowy istniejących projektów.

Niniejszy materiał ma na celu przybliżenie technologii PWA i pokazanie, że wcale nie są one trudne do zastosowania. W rzeczywistości, każdy deweloper stron internetowych może już teraz wprowadzić te rozwiązania w swoich projektach, niezależnie od ich skali czy przeznaczenia. Dzięki PWA strona internetowa może działać szybciej, lepiej odpowiadać na potrzeby użytkowników i oferować funkcje zbliżone do aplikacji natywnych. Warto więc poznać te technologie i rozważyć ich implementację w swoich projektach.

Filozofia PWA

Nie istnieje jednoznaczna definicja Progressive Web Applications (PWA). Są to aplikacje, które można rozwijać stopniowo, dostosowując funkcjonalności do konkretnych potrzeb użytkowników oraz możliwości technicznych projektu. W rzeczywistości PWA to pewna idea, a nie sztywno zdefiniowany standard. Na skali PWA mogą znaleźć się zarówno proste strony internetowe, które dodają ikonę na ekran główny użytkownika dzięki Web App Manifest, jak i zaawansowane aplikacje przypominające natywne, które działają niezwykle szybko, bezbłędnie offline i są wygodne w użytkowaniu.

Kluczowym elementem filozofii PWA jest ich „progresywność”. Oznacza to, że technologie te mogą być wdrażane etapami. Można zacząć od prostych funkcji, takich jak poprawa szybkości ładowania strony, i stopniowo dodawać bardziej zaawansowane rozwiązania, takie jak pełne wsparcie dla pracy offline z wykorzystaniem Service Worker. Dzięki temu PWA są dostępne dla wszystkich deweloperów, niezależnie od skali projektu, nad którym pracują, i ich poziomu doświadczenia w zaawansowanych technologiach webowych.

Progresywny charakter PWA jest ich największą zaletą, ponieważ pozwala na wdrażanie tych technologii bez konieczności całkowitej przebudowy istniejących projektów. To sprawia, że zarówno małe strony internetowe, jak i duże platformy mogą stopniowo przechodzić na model PWA, zwiększając wydajność i komfort użytkowania.

Filozofia PWA zakłada również silne wsparcie dla użytkowników mobilnych. Aplikacje te pozwalają na pełne wykorzystanie możliwości nowoczesnych przeglądarek internetowych, oferując doświadczenie zbliżone do natywnych aplikacji, ale bez konieczności instalacji czy zajmowania miejsca w pamięci urządzenia. To sprawia, że PWA są wyjątkowo atrakcyjną alternatywą dla tradycyjnych rozwiązań, łącząc najlepsze cechy aplikacji internetowych i natywnych.

Architektura i kluczowe elementy PWA

Kluczowy elementOpis
Niezawodność (Reliable) Aplikacja ładuje się i działa poprawnie, niezależnie od jakości połączenia sieciowego.
Szybkość (Fast) Szybka wymiana danych w sieci, płynny i responsywny interfejs użytkownika.
Atrakcyjność (Engaging) Zapewnia komfortowe i przyjemne doświadczenie użytkownika, które zachęca do ponownego korzystania z aplikacji.
Narzędzia Service Worker, Push Notifications i inne technologie wspierające szybkie i bezproblemowe działanie aplikacji.
Cel Strona/aplikacja powinna działać szybko, być dostępna offline i niezawodna na słabym połączeniu.

Architektura PWA opiera się na kilku kluczowych technologiach, które sprawiają, że aplikacje działają niezawodnie i szybko.

Cel PWA

Porównanie z aplikacjami natywnymi

To, że PWA wizualnie przypominają aplikacje natywne, można uznać za kosmetyczne rozwiązanie (choć istotne z psychologicznego punktu widzenia użytkownika). Natomiast fakt, że PWA są do nich podobne pod względem wewnętrznym – ponieważ wszystkie kluczowe zasoby aplikacji mogą być przechowywane lokalnie, a przez sieć przesyłane są jedynie zmieniające się treści – to ogromne osiągnięcie.

Można to wręcz nazwać ukrytą rewolucją. W praktyce przeglądarka staje się swego rodzaju maszyną wirtualną, która przechowuje i uruchamia aplikację PWA. Podobnie jak Android pełni rolę maszyny wirtualnej dla aplikacji androidowych, tak przeglądarka działa jako platforma dla PWA. Tak jak aplikacja natywna korzysta z systemu plików do zarządzania swoimi zasobami, tak PWA odwołuje się do swoich zasobów – choć za pomocą protokołu HTTP, to jednak przechowywanych lokalnie.

Co więcej, to podejście działa w ten sam sposób we wszystkich najpopularniejszych przeglądarkach i na wszystkich głównych platformach, co czyni je uniwersalnym i przyszłościowym rozwiązaniem.

Kluczowe technologie PWA

Service Worker

Service Worker to serce PWA, które działa jako warstwa pośrednia między frontendem a backendem, zarządzając danymi i umożliwiając pracę aplikacji offline. Dzięki temu rozdzieleniu na dwa niezależne poziomy transformacja tradycyjnej strony internetowej w PWA jest prostsza niż kiedykolwiek wcześniej.

Service Worker oferuje dostęp do dwóch głównych mechanizmów przechowywania danych: Cache Storage, które umożliwia przechowywanie zasobów internetowych, oraz IndexDB, które pozwala na bardziej zaawansowaną obsługę danych. Jednak jego największą zaletą jest pełna elastyczność w definiowaniu logiki aplikacji.

Dzięki Service Worker można skonfigurować sposób obsługi żądań przeglądarki w zależności od stanu sieci. Na przykład w przypadku braku połączenia z Internetem można pobierać dane z pamięci podręcznej i zwracać je do przeglądarki, która "pomyśli", że otrzymała odpowiedź od serwera. Albo też odpowiedź nie zostanie zwrócona – wszystko zależy od decyzji programisty. To umożliwia budowanie kompletnych aplikacji webowych, które działają płynnie w każdych warunkach.

Co istotne, Service Worker to technologia oparta na czystym JavaScript, która nie wymaga korzystania z zewnętrznych frameworków. Chociaż dostępne są różne narzędzia do automatyzacji generowania kodu, ręczne pisanie logiki pozwala lepiej zrozumieć i kontrolować działanie aplikacji.

Pod względem technicznym Service Worker to plik JavaScript, który jest dodawany do kodu strony HTML. W tym pliku programista definiuje funkcjonalność, taką jak obsługa żądań z frontendu czy zarządzanie pamięcią podręczną. Dzięki tej elastyczności Service Worker staje się kluczowym narzędziem w procesie tworzenia nowoczesnych aplikacji PWA.

HTTPS

PWA wymaga, aby wszystkie zasoby strony były przesyłane za pomocą protokołu HTTPS. Certyfikat SSL można uzyskać za darmo, a niektórzy dostawcy hostingu oferują jego automatyczną konfigurację. Ważne jest jednak, aby na stronie nie było odnośników do niezabezpieczonych zasobów, ponieważ niektóre przeglądarki mogą odmówić wyświetlenia witryny w takim przypadku.

Najczęstszym problemem w takich sytuacjach są obrazy. Często redaktorzy lub komentujący umieszczają w materiałach odnośniki do obrazów z internetu, które czasem automatycznie trafiają do treści. Aby uniknąć problemów, należy zapisywać obrazy lokalnie na serwerze lub korzystać z usług hostingu obrazów, które zapewniają dostęp przez HTTPS.

Application Shell

Application Shell, czyli tzw. szkielet aplikacji, to podstawowa struktura interfejsu użytkownika, która zawiera wszystkie statyczne elementy aplikacji, takie jak nagłówki, menu czy stopki. Jest to fundament, na którym opiera się działanie PWA, pozwalający na szybkie ładowanie podstawowej części aplikacji jeszcze przed załadowaniem dynamicznych treści.

Wyobraźmy sobie typowy serwis internetowy z nagłówkiem, dwoma kolumnami i stopką. Jeśli usuniemy z niego dynamiczne elementy, takie jak treści, pozostanie to, co można nazwać Application Shell. Taki szkielet jest przechowywany lokalnie na urządzeniu użytkownika i wczytywany natychmiast po uruchomieniu aplikacji. Następnie, dynamiczne treści, takie jak artykuły czy dane użytkownika, są ładowane z serwera za pomocą żądań AJAX.

Zaletą tego podejścia jest szybkość działania – użytkownik widzi w pełni funkcjonalny interfejs użytkownika niemal natychmiast, nawet jeśli dane potrzebne do wypełnienia aplikacji jeszcze się ładują. Co więcej, App Shell pozwala zachować estetykę aplikacji, ponieważ może zawierać elementy takie jak "loadery", które wskazują na postęp ładowania danych.

Application Shell to także klucz do postrzegania PWA jako aplikacji natywnych. Można patrzeć na PWA w taki sam sposób, jak na klasyczną aplikację natywną – z wyraźnie zdefiniowaną "obudową", która obsługuje dynamiczne treści. Dzięki temu proces projektowania i implementacji staje się bardziej intuicyjny.

Co ważne, projektowanie Application Shell można zaplanować na wczesnym etapie tworzenia aplikacji. Struktura ta jest niezależna od platformy i przeglądarki, co czyni ją uniwersalnym rozwiązaniem, które może działać na każdym urządzeniu. Wdrożenie tej architektury znacznie upraszcza przejście do modelu PWA, czyniąc aplikacje szybszymi i bardziej efektywnymi.

Web App Manifest

Web App Manifest to plik JSON, który odgrywa kluczową rolę w transformacji strony internetowej w aplikację PWA. Jest to deklaratywny plik, który dostarcza przeglądarce informacje o aplikacji, takie jak jej nazwa, ikony, tryb działania (np. fullscreen, standalone, minimal-ui) oraz inne parametry, które wpływają na sposób jej wyświetlania i funkcjonowania.

Dzięki Web App Manifest aplikacja może zostać „zainstalowana” na ekranie głównym urządzenia użytkownika, co nadaje jej wygląd i działanie zbliżone do aplikacji natywnych. Użytkownik nie musi korzystać z przeglądarki, aby otworzyć aplikację – wystarczy kliknięcie w ikonę, podobnie jak w przypadku tradycyjnych aplikacji zainstalowanych na smartfonie czy tablecie.

Warto zauważyć, że manifest jest łatwy w implementacji. Wystarczy stworzyć plik JSON, dodać do niego odpowiednie właściwości, a następnie podlinkować go w sekcji <head> strony HTML. Przykład:

{
  "name": "Moja aplikacja",
  "short_name": "Aplikacja",
  "icons": [
    {
      "src": "icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "/index.html",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000"
}

Manifest wspiera również różne funkcje ułatwiające korzystanie z aplikacji, takie jak określenie strony startowej (start_url), co pozwala użytkownikowi na szybki dostęp do głównej treści aplikacji.

Powiadomienia Push

Jeśli przejrzeć internet przy użyciu Chrome DevTools na zakładce "Application", można zauważyć, jak niewiele stron korzysta z technologii PWA. Spośród tych, które to robią, około 90% używa ich wyłącznie w celu wysyłania powiadomień Push.

Powiadomienia Push są obecnie najpopularniejszą, ale jednocześnie najbardziej nadużywaną technologią PWA. W ciągu ostatnich miesięcy liczba stron internetowych, które od razu po wejściu na nie proponują subskrypcję powiadomień, wydaje się gwałtownie wzrosła. Dla wielu użytkowników pierwszym odruchem jest odnalezienie i kliknięcie przycisku „Zablokuj” na wyskakującym okienku.

Niestety, takie podejście często przypomina spam i może zniechęcać użytkowników do korzystania z danej strony. Tymczasem istnieje bardziej subtelne i skuteczne rozwiązanie – oferowanie subskrypcji powiadomień dopiero podczas drugiej lub trzeciej wizyty użytkownika na stronie, kiedy wiadomo już, że odwiedzający jest zainteresowany treścią lub usługami oferowanymi przez witrynę.

Podsumowanie

PWA to nowoczesne podejście do tworzenia aplikacji internetowych, które łączą zalety aplikacji natywnych i webowych. Oferują one szybkie i niezawodne rozwiązania dla użytkowników na różnych urządzeniach i platformach.