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 von der Browserwahl - 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 mit app-typischen Interaktionen - Sicher - Werden ueber HTTPS ausgeliefert, um Manipulation zu verhindern - 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 registered'))
    .catch(error => console.log('SW registration failed'));
}

// 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 => {
        // Gecachte Version zurueckgeben oder vom Netzwerk abrufen
        return response || fetch(event.request);
      })
      .catch(() => {
        // Offline-Seite fuer Navigationsanfragen zurueckgeben
        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 => {
          // Erfolgreiche Antworten cachen
          const responseClone = response.clone();
          caches.open(CACHE_NAME)
            .then(cache => cache.put(event.request, responseClone));
          return response;
        })
        .catch(() => caches.match(event.request))
    );
  }
});

Installation und App-aehnliches Erlebnis¶

Install-Prompt¶

Den Install-Prompt programmatisch behandeln:

let deferredPrompt;

window.addEventListener('beforeinstallprompt', e => {
  // Chrome 67 und frueher daran hindern, den Prompt anzuzeigen
  e.preventDefault();

  // Event fuer spaeteren Ausloeser speichern
  deferredPrompt = e;

  // Installations-Button anzeigen
  showInstallButton();
});

function showInstallPrompt() {
  if (deferredPrompt) {
    deferredPrompt.prompt();
    deferredPrompt.userChoice.then(result => {
      if (result.outcome === 'accepted') {
        console.log('User accepted install');
      }
      deferredPrompt = null;
    });
  }
}

App-Shell-Architektur¶

Implementieren Sie das App-Shell-Muster fuer sofortiges Laden:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>My PWA</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link rel="manifest" href="/manifest.json">

  <!-- Critical CSS inlined -->
  <style>
    .app-shell { /* minimal shell styles */ }
  </style>
</head>
<body>
  <div class="app-shell">
    <header class="header">
      <!-- App header -->
    </header>
    <main class="main">
      <!-- Dynamic content loaded here -->
    </main>
    <nav class="navigation">
      <!-- App navigation -->
    </nav>
  </div>

  <script src="/js/app.js"></script>
</body>
</html>

Push-Benachrichtigungen¶

Implementieren Sie Push-Benachrichtigungen fuer Nutzerengagement:

// Berechtigung anfordern
Notification.requestPermission().then(permission => {
  if (permission === 'granted') {
    subscribeToNotifications();
  }
});

// Push-Benachrichtigungen abonnieren
function subscribeToNotifications() {
  navigator.serviceWorker.ready.then(registration => {
    return registration.pushManager.subscribe({
      userVisibleOnly: true,
      applicationServerKey: urlBase64ToUint8Array(publicVapidKey)
    });
  }).then(subscription => {
    // Abonnement an Server senden
    fetch('/api/subscribe', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(subscription)
    });
  });
}

// Push-Events im Service Worker behandeln
self.addEventListener('push', event => {
  const options = {
    body: event.data.text(),
    icon: '/icons/icon-192x192.png',
    badge: '/icons/badge-72x72.png',
    actions: [
      { action: 'open', title: 'Open App' },
      { action: 'close', title: 'Close' }
    ]
  };

  event.waitUntil(
    self.registration.showNotification('PWA Notification', options)
  );
});

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.