28. Progressive Web Apps

O czym jest ta prezentacja?

Progressive Web Apps

PWA to strona internetowa, która zachowuje się jak aplikacja mobilna: działa offline, można ją zainstalować na ekranie głównym, wysyła powiadomienia push. Korzystają z nich Twitter, Pinterest, Starbucks i Uber. Ta prezentacja wyjaśnia trzy filary PWA: service worker, manifest i HTTPS.

Kluczowe pytania do odpowiedzi

Co odróżnia PWA od zwykłej strony? — installability, offline, push notifications
Co to jest Service Worker? — skrypt działający w tle, przechwytywanie żądań
Jakie są ograniczenia PWA? — dostęp do hardware, iOS vs Android

Zakres merytoryczny

Problem: mobilne aplikacje webowe bez sklepu
Trzy wymagania PWA: HTTPS + Service Worker + Web App Manifest
Web App Manifest — JSON definiujący ikonę, nazwę, kolor, tryb wyświetlania
Service Worker — cykl życia, rejestracja, interceptowanie żądań
Cache API — przechowywanie zasobów offline
Install prompt — beforeinstallprompt event
Porównanie: PWA vs Natywna aplikacja mobilna

Wymagane elementy wizualne

Schemat Service Worker

Cykl życia: install → activate → fetch/intercept

manifest.json

Przykład pliku manifest z opisem każdego pola

Warianty realizacji

Minimum:

Definicja PWA i trzy wymagania
Przykład manifest.json
Dwa przykłady zastosowań PWA

Forma: 10 slajdów, 10 minut

Ocena: 3.0

Scenariusze i przykłady

{
  "name": "Moja Aplikacja",
  "short_name": "MojaApp",
  "description": "Przykładowa PWA",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#0070f3",
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

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

// sw.js — podstawowy Service Worker z cache
const CACHE_NAME = 'v1';
const ASSETS = ['/', '/style.css', '/app.js'];

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(cached => cached || fetch(event.request))
    );
});

Wskazówki do wystąpienia

Pokaż na telefonie

Otwórz dowolną PWA (np. twitter.com) na telefonie i dodaj do ekranu głównego — live demo

Lighthouse screenshot

Zrób screenshot audytu Lighthouse dla wybranej strony i pokaż wynik PWA

Zasoby

MDN: Progressive web apps Dokumentacja PWA na MDN

web.dev: Learn PWA Kurs PWA od Google

MDN: Service Worker API Dokumentacja Service Worker