Czym są Progressive Web Apps?

Progressive Web Apps (PWA) to aplikacje internetowe, które dzięki nowoczesnym technologiom przeglądarki oferują doświadczenie zbliżone do aplikacji natywnych. Mogą działać offline, wysyłać powiadomienia push, być instalowane na ekranie głównym urządzenia — a wszystko to bez konieczności publikacji w sklepie z aplikacjami.

Termin PWA został wprowadzony przez Google w 2015 roku, ale technologie stojące za nim — przede wszystkim Service Workers i Web App Manifest — ewoluują od tego czasu i dziś oferują znacznie większe możliwości niż na początku.

Kluczowe technologie

Web App Manifest

Manifest to plik JSON (manifest.json), który definiuje, jak aplikacja powinna wyglądać po zainstalowaniu na urządzeniu:

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

Parametr display: "standalone" sprawia, że po zainstalowaniu aplikacja wygląda jak natywna — bez paska adresu przeglądarki. Ikony i kolory pozwalają na pełne dostosowanie wyglądu na ekranie głównym.

Service Workers

Service Worker to skrypt JavaScript działający w tle, niezależnie od strony internetowej. Pełni rolę proxy między aplikacją a siecią, co pozwala na przechwytywanie żądań HTTP i zarządzanie cachem.

Rejestracja Service Workera:

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
    .then(reg => console.log('SW zarejestrowany'))
    .catch(err => console.log('Błąd rejestracji SW:', err));
}

W pliku sw.js definiujemy strategię cachowania:

const CACHE_NAME = 'app-v1';
const ASSETS = ['/', '/css/style.css', '/js/app.js', '/offline.html'];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => cache.addAll(ASSETS))
  );
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => response || fetch(event.request))
  );
});

Ten prosty przykład implementuje strategię Cache First — najpierw sprawdza cache, a dopiero gdy zasób nie jest dostępny, pobiera go z sieci.

Tryb offline

Dzięki Service Workerowi aplikacja PWA może działać bez połączenia z internetem. Kluczowe jest przygotowanie strony offline wyświetlanej, gdy użytkownik próbuje otworzyć zasób, którego nie ma w cache:

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => response || fetch(event.request))
      .catch(() => caches.match('/offline.html'))
  );
});

Dla aplikacji z dynamicznymi danymi warto rozważyć strategię Network First — najpierw próba pobrania z sieci, a cache jako fallback. Daje to użytkownikowi zawsze najświeższe dane, gdy jest online, i ostatnią dostępną wersję, gdy jest offline.

Zalety PWA

Brak bariery instalacji — użytkownik nie musi odwiedzać sklepu z aplikacjami. Wystarczy odwiedzić stronę i zaakceptować propozycję instalacji. To znacząco obniża próg wejścia.

Jedna baza kodu — zamiast utrzymywać osobne aplikacje na iOS, Android i web, utrzymujesz jedną aplikację webową. Aktualizacje są natychmiastowe — bez procesu recenzji w sklepie.

Niski koszt wdrożenia — jeśli masz już responsywną stronę internetową, przekształcenie jej w PWA wymaga dodania manifestu i Service Workera. To często kwestia kilku godzin pracy.

Lekkie i szybkie — PWA zajmują znacznie mniej miejsca na urządzeniu niż natywne aplikacje. Typowa PWA to kilkaset kilobajtów, podczas gdy natywna aplikacja to często dziesiątki megabajtów.

SEO — w przeciwieństwie do natywnych aplikacji, treść PWA jest indeksowana przez wyszukiwarki, co przekłada się na widoczność w wynikach wyszukiwania.

Ograniczenia PWA

Mimo wielu zalet, PWA mają swoje ograniczenia:

  • iOS — Apple historycznie ograniczał możliwości PWA na iOS. Brak powiadomień push na iOS był główną bolączką, ale od wersji 16.4 (2023) Safari wspiera tę funkcję. Nadal jednak integracja z systemem jest słabsza niż na Androidzie.
  • Dostęp do sprzętu — PWA nie mają pełnego dostępu do funkcji urządzenia: Bluetooth, NFC, zaawansowane operacje na plikach są ograniczone lub niedostępne.
  • Sklepy z aplikacjami — brak obecności w App Store i Google Play oznacza brak tego kanału dystrybucji, choć PWA można publikować w Google Play za pomocą TWA (Trusted Web Activity).

Kiedy PWA to dobry wybór?

PWA sprawdza się doskonale w następujących scenariuszach:

  • Strony firmowe i informacyjne — szybki dostęp offline do podstawowych informacji
  • Aplikacje narzędziowe — kalkulatory, konwertery, listy zadań
  • Panele administracyjne — dashboardy z często odświeżanymi danymi
  • E-commerce — szybkie przeglądanie produktów z możliwością offline

PWA nie jest najlepszym wyborem dla gier wymagających GPU, aplikacji intensywnie korzystających ze sprzętu (np. edycja wideo) lub aplikacji wymagających głębokiej integracji z systemem operacyjnym.

Podsumowanie

Progressive Web Apps to dojrzała technologia, która wypełnia lukę między stronami internetowymi a natywnymi aplikacjami. Nie zastąpi w pełni aplikacji natywnych w każdym scenariuszu, ale dla wielu projektów — szczególnie firmowych stron, narzędzi i lekkich aplikacji — oferuje idealny stosunek możliwości do kosztu wdrożenia. Jeśli Twoja aplikacja nie wymaga głębokiego dostępu do sprzętu urządzenia, PWA jest rozwiązaniem, które warto poważnie rozważyć.