Progressive Web Apps (PWA) — Ein vollstaendiger Leitfaden 2025

Ein vollstaendiger Leitfaden zur Erstellung von Progressive Web Apps. Service Workers, Web App Manifest, Offline-Strategien, Push-Benachrichtigungen und Geraeteinstallation.

Einfuehrung in PWA¶

Progressive Web Apps (PWAs) kombinieren das Beste aus Web- und mobilen Anwendungen. Sie bieten native Erlebnisse und bleiben dabei Webanwendungen, die auf allen Geraeten und Plattformen funktionieren.

Wichtige PWA-Eigenschaften: - Progressiv - Funktionieren fuer jeden Nutzer, unabhaengig vom Browser - Responsiv - Passen sich jedem Formfaktor an: Desktop, Mobile, Tablet - Offline-Funktionalitaet - Funktionieren offline oder bei schlechter Verbindung - App-aehnlich - Fuehlen sich wie native Apps an - Sicher - Werden ueber HTTPS ausgeliefert - Installierbar - Koennen auf dem Startbildschirm installiert werden

Kerntechnologien¶

1. Web App Manifest¶

Die Manifest-Datei liefert Metadaten ueber Ihre Anwendung:

{
  "name": "My PWA App",
  "short_name": "PWA App",
  "description": "A progressive web application",
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#2196F3",
  "background_color": "#ffffff",
  "icons": [
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

2. Service Workers¶

Service Workers ermoeglichen Offline-Funktionalitaet und Hintergrundsynchronisierung:

// Service Worker registrieren
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
    .then(registration => console.log('SW registriert'))
    .catch(error => console.log('SW-Registrierung fehlgeschlagen'));
}

// sw.js - Service Worker
const CACHE_NAME = 'my-pwa-v1';
const urlsToCache = [
  '/',
  '/styles/main.css',
  '/scripts/main.js',
  '/offline.html'
];

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

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

3. Offline-Strategien¶

Verschiedene Caching-Strategien fuer verschiedene Inhaltstypen:

// Cache first - fuer statische Assets
self.addEventListener('fetch', event => {
  if (event.request.url.includes('/assets/')) {
    event.respondWith(
      caches.match(event.request)
        .then(response => response || fetch(event.request))
    );
  }
});

// Network first - fuer API-Daten
self.addEventListener('fetch', event => {
  if (event.request.url.includes('/api/')) {
    event.respondWith(
      fetch(event.request)
        .then(response => {
          const responseClone = response.clone();
          caches.open(CACHE_NAME)
            .then(cache => cache.put(event.request, responseClone));
          return response;
        })
        .catch(() => caches.match(event.request))
    );
  }
});

Best Practices¶

1. Mit App Shell beginnen - Kern-UI sofort laden
2. Cache-Strategie - Passende Strategien fuer verschiedene Inhalte verwenden
3. Offline-Erlebnis - Sinnvolle Offline-Funktionalitaet bereitstellen
4. Performance - Fuer mobile Netzwerke optimieren
5. Progressive Enhancement - Ohne Service Workers funktionieren
6. Install-Erlebnis - Nutzer durch die Installation fuehren

PWAs bieten eine leistungsstarke Moeglichkeit, app-aehnliche Erlebnisse auf der Web-Plattform bereitzustellen, die die Reichweite des Web mit dem Engagement nativer Anwendungen kombinieren.