⚡Mobile Development

Progressive Web App bauen

Deine Web-App fuehlt sich an wie eine echte App

Progressive Web Apps kombinieren das Beste aus Web und Native. Deine Nutzer koennen die App installieren, offline nutzen und Push-Nachrichten empfangen. Und du brauchst keinen App Store.

Pro-Tip — Der schnelle Weg

Teste deine PWA immer auf einem echten Handy. Der Lighthouse PWA-Check in Chrome DevTools zeigt dir genau was noch fehlt fuer die volle Installierbarkeit.

Seite 1

Manifest erstellen

Erstelle eine manifest.json im public-Ordner mit App-Name, Icons in verschiedenen Groessen und Theme-Color. Das ist die Visitenkarte deiner PWA fuer das Betriebssystem.

// public/manifest.json
{
"name": "Meine PWA App",
"short_name": "MeineApp",
"start_url": "/",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff",
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
]
}

Service Worker registrieren

Der Service Worker ist das Herzstuck deiner PWA. Er laeuft im Hintergrund und ermoeglicht Offline-Funktionalitaet und Caching. In Next.js nutzt du dafuer next-pwa.

npm install next-pwa

// next.config.js
const withPWA = require('next-pwa')({ dest: 'public' });
module.exports = withPWA({ /* deine Config */ });

Meta-Tags einbinden

Fuer iOS-Support brauchst du apple-touch-icon und apple-mobile-web-app-capable Meta-Tags im Head. Ohne diese Tags funktioniert die Installation auf iPhones nicht korrekt.

Lighthouse testen

Oeffne Chrome DevTools, geh auf Lighthouse und starte einen PWA-Audit. Du brauchst gruene Haekchen bei Installable, PWA Optimized und Performance. Jeder Fehler wird erklaert.

Deploy und installieren

PWAs brauchen HTTPS. Deploye auf Vercel und oeffne die Seite auf deinem Handy. Im Browser erscheint automatisch ein Install-Banner oder du kannst manuell ueber das Menue installieren.

Seite 2

Warum das funktioniert

Kein App Store Review Prozess, sofort live
Ein Codebase fuer Web und Mobile spart Entwicklungszeit
Installierte PWAs haben hoehere Retention als normale Websites
Updates werden automatisch ausgeliefert ohne Store-Update

Tipps

HTTPS ist Pflicht, ohne Zertifikat kein Service Worker
Icons in mindestens 192x192 und 512x512 bereitstellen
Teste auf Android und iOS, beide verhalten sich anders
Der Splash Screen wird aus Manifest-Daten automatisch generiert

Seite 3

Bereit für den nächsten Schritt?

KIWorld VibeCoding Masterclass

Du willst nicht nur einzelne Tools einrichten, sondern wirklich lernen wie du mit KI komplette Apps, Websites und SaaS-Produkte baust? Über 700 Videos — von Anfänger bis Fortgeschritten — in jedem Bereich. Von der Idee bis zum fertigen Produkt, ohne eine Zeile Code selbst zu schreiben.

Jetzt Masterclass ansehen