Eine installierbare Web-App erscheint auf dem Homescreen, hat ein eigenes Icon und laeuft ohne Browser-Leiste. Der Nutzer merkt keinen Unterschied zu einer nativen App. Und du sparst dir den App Store.
Pro-Tip — Der schnelle Weg
Zeig den Install-Banner nicht sofort. Warte bis der Nutzer die App mindestens 2 Mal besucht hat oder eine wichtige Aktion abgeschlossen hat. Dann ist die Conversion 3x hoeher.
Seite 1
1
Voraussetzungen erfuellen
Fuer den Install-Banner brauchst du HTTPS, ein Web App Manifest mit mindestens einem 192px und einem 512px Icon, und einen registrierten Service Worker.
2
beforeinstallprompt abfangen
Der Browser feuert ein Event bevor er den Install-Banner zeigt. Fang es ab und zeig deinen eigenen Button statt des Standard-Banners.
Wenn der Nutzer auf deinen Button klickt, triggere den gespeicherten Prompt. Du hast volle Kontrolle ueber Design und Timing.
async function handleInstall() { if (!deferredPrompt) return; (deferredPrompt as any).prompt(); const result = await (deferredPrompt as any).userChoice; if (result.outcome === 'accepted') { setShowInstallButton(false); } deferredPrompt = null; }
4
Installed-Status erkennen
Pruefe ob die App bereits installiert ist und verstecke den Button. Du kannst auch das display-mode Media Query nutzen.
// Pruefe ob im Standalone-Mode const isInstalled = window.matchMedia('(display-mode: standalone)').matches;
// Oder ueber das appinstalled Event window.addEventListener('appinstalled', () => { setShowInstallButton(false); analytics.track('app_installed'); });
5
iOS Fallback
iOS unterstuetzt beforeinstallprompt nicht. Zeige stattdessen eine Anleitung: Teilen-Button antippen und Zum Home-Bildschirm hinzufuegen waehlen.
Seite 2
Warum das funktioniert
Installierte Apps werden 4x oefter geoeffnet als Bookmarks
Kein App Store Review, sofort verfuegbar
Updates werden automatisch ausgeliefert
App-Icon auf dem Homescreen ist taegliche Markenpraesenz
Tipps
Der Install-Prompt kommt nur einmal, speichere das Event
iOS hat keinen automatischen Prompt, zeige eine manuelle Anleitung
Standalone-Mode hat keinen Zurueck-Button, baue eigene Navigation
Tracke Installationen um den Erfolg zu messen
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.