Progressive Web App

Service Worker + Offline

Cache zasoby i API responses. Aplikacja działa bez połączenia.

Service Worker API, Workbox, Cache API

Add to Home Screen

Użytkownik instaluje PWA jak natywną app bez App Store.

Web App Manifest, beforeinstallprompt

Push Notifications

Powiadomienia push nawet gdy app jest zamknięta.

Push API, Notification API, Service Worker

Background Sync

Kolejkuj operacje offline, wykonaj gdy połączenie wróci.

Background Sync API, Service Worker

App Shortcuts

Long-press na ikonie → quick actions jak natywna app.

Web App Manifest shortcuts

Share Target API

PWA może odbierać content udostępniany z innych aplikacji.

Web Share Target API, Manifest

Co to jest Progressive Web App (PWA) i jakie ma zalety?

Progressive Web App (PWA) to aplikacja webowa która używa nowoczesnych technologii webowych aby zapewnić doświadczenie podobne do natywnej aplikacji mobilnej — instalacja na ekranie głównym, praca offline, push notifications, szybkie ładowanie. Kluczowe cechy PWA (wg Google): Reliable — działa offline lub przy słabym połączeniu (Service Worker). Fast — szybkie ładowanie i płynna animacja (Performance optimizations). Engaging — instalacja na home screen, push notifications, full-screen. Trzy filary PWA: Service Worker — JavaScript worker działający w tle, poza stroną. Przechwytuje requesty sieciowe, cache'uje zasoby, obsługuje push notifications. Web App Manifest — plik JSON opisujący aplikację (name, icons, start_url, display mode). Odpowiada za 'Add to Home Screen'. HTTPS — PWA wymagają HTTPS (Service Workers działają tylko na secure origin). Zalety vs. natywna aplikacja: brak konieczności publikacji w App Store. Automatyczne aktualizacje (jak strona, nie jak app). Jeden codebase (web + mobile). Mniejszy rozmiar. Linkable (URL). Wyzwania: słabsze API dostęp vs. natywne (Camera, Bluetooth pełne możliwości). iOS Safari ma historycznie słabsze PWA wsparcie (choć poprawiło się od iOS 16.4). Przykłady PWA: Twitter Lite, Pinterest, Uber, Flipkart (50% redukcja rozmiaru, 3x faster load).

Service Worker — jak działa i jak go implementować?

Service Worker (SW): Service Worker to JavaScript plik działający w osobnym wątku od głównej strony — w tle, bez dostępu do DOM. Jest proxy sieciowym — może przechwytywać i modyfikować network requests. Lifecycle: Install — SW pobierany i instalowany. Activate — SW aktywowany, stary SW deregistrowany. Fetch — SW interceptuje requesty. Rejestracja: if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw.js'); }. Strategie cache: Cache First — sprawdź cache, jeśli brak → network. Idealny dla statycznych zasobów (JS, CSS, images). Network First — sprawdź network, jeśli offline → cache. Idealny dla API data. Stale While Revalidate — zwróć cache natychmiast, zaktualizuj cache w tle. Network Only — zawsze network (nie cache). Cache Only — zawsze cache (pre-cached resources). Offline support: pre-cache w Install evencie kluczowe zasoby (HTML shell, JS, CSS). W Fetch evencie — zwróć cache gdy offline. Background Sync: kolejkuj operacje gdy offline → wykonaj gdy połączenie wróci. Narzędzia: Workbox (Google) — biblioteka do SW management. Pozwala na declarative caching strategies. next-pwa — plugin dla Next.js. Vite PWA Plugin — dla Vite projektów. Push Notifications: Service Worker odbiera push events od serwera nawet gdy strona jest zamknięta.

Web App Manifest — jak skonfigurować instalację PWA?

Web App Manifest: Plik JSON który kontroluje jak aplikacja wygląda gdy jest zainstalowana. Podstawowa konfiguracja manifest.json: name — pełna nazwa aplikacji. short_name — skrócona nazwa na ekranie głównym. description — opis. icons — tablica ikon w różnych rozmiarach (minimum: 192x192 i 512x512 PNG). start_url — URL który otwiera się po kliknięciu ikony. display — 'standalone' (wygląda jak natywna app), 'fullscreen', 'minimal-ui', 'browser'. background_color — kolor splash screen. theme_color — kolor paska nawigacji. Linkowanie w HTML: link rel='manifest' href='/manifest.json'. Add to Home Screen (A2HS): Chrome na Android automatycznie proponuje 'Add to Home Screen' gdy spełnione kryteria (HTTPS, Service Worker, Manifest). iOS: użytkownik musi ręcznie użyć 'Add to Home Screen' przez Safari Share menu. iOS nie wyświetla automatycznego banera. Instalacja prompt: beforeinstallprompt event w Chrome. Możesz opóźnić lub customizować prompt. window.addEventListener('beforeinstallprompt', (e) => { e.preventDefault(); // show your own button }). Splash Screen: generowany automatycznie z icons, name i background_color. Shortcuts — app shortcuts (jak long-press na Android): 'shortcuts' array w manifest. Scope: ogranicza które URL-e są traktowane jako część aplikacji.

PWA vs. natywna aplikacja vs. React Native — kiedy wybrać PWA?

PWA vs. Native vs. React Native vs. Flutter: Native iOS/Android: pełen dostęp do wszystkich APIs urządzenia. Najlepsza performance. App Store distribution (discovery). Wymaga osobnych codebases (lub React Native/Flutter). React Native / Flutter: jeden codebase dla iOS + Android. Lepszy dostęp do native APIs vs. PWA. Nadal wymaga App Store publikacji. PWA: jeden codebase web + mobile. Brak App Store. Ograniczony dostęp do native APIs. Nie wymaga instalacji (może być używana jak strona). Kiedy PWA jest właściwym wyborem: Budżet — PWA tańszy w budowie i maintenance. Jeden team webowy bez potrzeby native dev. Aplikacja content-driven (e-commerce, news, social). Użytkownicy z wolniejszym internetem lub starszymi telefonami (Twitter Lite!). B2B narzędzie gdzie users desktopowi dominują ale potrzebujesz mobilnego. Szybki time-to-market. Kiedy native lub RN jest lepszym wyborem: gry (high-performance graphics, Bluetooth, ARKit/ARCore). Aplikacje z deep integration z systemem (VPN, contacts, health). AR/VR aplikacje. App Store presence jest ważna dla discovery. API Gap: PWA nie ma pełnego dostępu do: Bluetooth (ograniczone — Web Bluetooth API na Chrome). NFC (limitowane). Background sync zaawansowane. Contacts API (ograniczone). Push Notifications na iOS historycznie problematyczne (fix iOS 16.4+).

Jak mierzyć i optymalizować PWA performance?

PWA Performance: Core Web Vitals dla PWA: LCP (Largest Contentful Paint) — powinno być poniżej 2.5s. INP (Interaction to Next Paint) — poniżej 200ms. CLS (Cumulative Layout Shift) — poniżej 0.1. Narzędzia: Lighthouse — audyt PWA + Performance + Best Practices. Sprawdza: Service Worker, Manifest, offline support, add to home screen. PWABuilder (Microsoft) — generuje manifest, Service Worker, MSIX package dla Windows Store. Chrome DevTools → Application → Service Workers. Installability checklist: HTTPS, Service Worker, Manifest z wymaganymi polami, icons 192 i 512. Performance optimizations dla PWA: App Shell Pattern — cache HTML shell (navigation, layout) osobno od content. Treść ładuj dynamicznie przez API. Pre-cache critical routes w Service Worker. Code splitting per route. Lazy load images (Intersection Observer). Critical CSS inlining. Offline page — dedykowana strona offline gdy sieć niedostępna i content nie jest w cache. Metryki specyficzne dla PWA: Install rate — odsetek użytkowników którzy instalują PWA. Engagement installed vs. not-installed (zainstalowane PWA mają zwykle wyższy engagement). Session length per installed users. Lighthouse PWA score — sprawdź listę wymagań. TWA (Trusted Web Activity): publikuj PWA w Google Play Store przez TWA — wrapper który uruchamia PWA w Chrome Custom Tab bez browser UI. Pełna integracja z Play Store.

Wyślij zapytanie