PWA (Progressive Web Apps) Leitfaden: Web-Apps wie mobile Apps machen

Was ist eine PWA?

PWA (Progressive Web Apps) sind mit Web-Technologien entwickelte Webanwendungen, die ein natives mobiles App-Erlebnis bieten.

PWAs nutzen moderne Web-Technologien wie Service Worker, Web App Manifest und HTTPS. Sie funktionieren in jedem Browser und benötigen keinen App Store.

Kernfunktionen: Offline-Funktionalität, Zum Startbildschirm hinzufügen, Push-Benachrichtigungen, Hintergrundsynchronisation, Vollbildmodus.

Vorteile: Eine Codebasis (Web + Mobil), keine App Store-Genehmigung nötig, sofortige Updates, niedrigere Entwicklungskosten, SEO-freundlich.

Web App Manifest

Die manifest.json-Datei definiert PWA-Metadaten: name, short_name, start_url, display, background_color, theme_color, icons.

Beispiel-Manifest: { "name": "Utilgo", "short_name": "Utilgo", "start_url": "/", "display": "standalone", "background_color": "#ffffff", "theme_color": "#4a90d9", "icons": [{"src": "/icon-192.png", "sizes": "192x192"}] }.

display: standalone ermöglicht, dass die App ohne Browser-UI (Adressleiste, Navigation) läuft. fullscreen und minimal-ui Optionen sind ebenfalls verfügbar.

Icons: Mindestens 192x192 und 512x512 Pixel PNG-Icons erforderlich. Maskable Icon-Unterstützung erstellt adaptive Icons.

Manifest im <head> verknüpfen mit <link rel="manifest" href="/manifest.json">. Browser liest Manifest und aktiviert PWA-Funktionen.

Service Worker

Service Worker ist eine JavaScript-Datei, die zwischen Browser und Netzwerk läuft. Läuft im Hintergrund und bietet Offline-Zugriff, Caching und Push-Benachrichtigungen.

Registrierung: Service Worker wird registriert mit navigator.serviceWorker.register('/sw.js'). Muss auf HTTPS oder localhost laufen.

Caching-Strategien: Cache First (zuerst Cache, dann Netzwerk), Network First (zuerst Netzwerk, dann Cache), Stale While Revalidate (aus Cache liefern, im Hintergrund aktualisieren).

Cache API: Statische Assets werden gecacht mit caches.open('v1').then(cache => cache.addAll(['/index.html', '/style.css', '/app.js'])).

Offline-Fallback: Zeigen Sie eine benutzerdefinierte Seite an, wenn offline. self.addEventListener('fetch', (e) => { e.respondWith(caches.match(e.request).then(r => r || fetch(e.request))); });

PWA-Anforderungen und Lighthouse

HTTPS: PWAs müssen auf HTTPS laufen (außer localhost). SSL-Zertifikat erforderlich.

Responsives Design: Da PWA auf mobilen Geräten läuft, ist responsives Design Pflicht. Viewport Meta-Tag hinzufügen.

Schnelles Laden: Erste Ladung sollte unter 3 Sekunden liegen. Beschleunigen mit Code Splitting, Lazy Loading und Caching.

Lighthouse PWA-Audit: Führen Sie PWA-Audit in Chrome DevTools Lighthouse-Tab durch. Prüft alle PWA-Kriterien (installierbar, funktioniert offline, schnelles Laden).

Installierbarkeit: Browser zeigt automatisch 'Zum Startbildschirm hinzufügen' Button, wenn Manifest- und Service Worker-Bedingungen erfüllt sind.

PWA vs Native App

PWA-Vorteile: Eine Codebasis, sofortige Updates, kein App Store nötig, SEO-freundlich, geringere Kosten, kleine Größe.

Native App Vorteile: Voller Hardware-Zugriff (Kamera, Bluetooth, NFC), bessere Leistung, App Store-Sichtbarkeit, Push-Benachrichtigungs-Zuverlässigkeit.

Auswahlkriterien: PWA wenn Budget begrenzt und schneller Launch nötig. Native App wenn voller Hardware-Zugriff und maximale Leistung nötig.

Hybrid-Ansatz: Mit PWA starten, bei wachsender Nutzerbasis zu Native App wechseln. Oder PWA mit Capacitor/Ionic in Native App konvertieren.

PWA-Beispiele und Tools

Erfolgreiche PWA-Beispiele: Twitter Lite (65% weniger Daten), Pinterest (44% mehr Nutzerengagement), Starbucks (Offline-Bestellung).

Entwicklungstools: Workbox (Googles Service Worker Bibliothek), PWA Builder (Microsoft), Lighthouse (Audit), Chrome DevTools (Debugging).

Framework-Unterstützung: Next.js (next-pwa), Nuxt.js (@nuxtjs/pwa), React (Create React App PWA Template), Vue (Vue CLI PWA Plugin).

Testen: Überprüfen Sie Service Worker, Cache und Manifest im Chrome DevTools Application-Tab. Messen Sie PWA-Score mit Lighthouse.