# React PWA Install Prompt für Chrome, Edge und iPhone > React PWA Install Prompt in Next.js: beforeinstallprompt in Chrome und Edge abfangen, auf dem iPhone „Zum Home-Bildschirm“ zeigen und wissen, wann Fragen stört. - Autor: [Serban Rusu](https://wingo-ui.com/blog/authors/serban), Founder of Wingo UI - Veröffentlicht: 9. Okt. 2026 - Kategorie: [Mobile UI mit React](https://wingo-ui.com/de/blog/category/mobile-ui) - Lesezeit: 10 Min. - Kanonische URL: https://wingo-ui.com/de/blog/react-pwa-install-prompt - Englische Fassung: https://wingo-ui.com/blog/react-pwa-install-prompt ## Kurz gesagt Ein React PWA Install Prompt braucht zwei Wege. In Chrome, Edge und Samsung Internet fängst du beforeinstallprompt in einer Client-Komponente ab, die das Root-Layout rendert, rufst preventDefault auf, speicherst das Event und rufst dessen prompt() über deinen eigenen Installieren-Button auf; auf iPhone und iPad feuert kein Browser dieses Event, also zeigst du dort die Schritte „Teilen“, dann „Zum Home-Bildschirm“. Frag erst, wenn die Leute einen Nutzen hatten, nie in der installierten App, in einem In-App-Browser oder mitten in einer Registrierung, und merk dir ein „Nicht jetzt“ für ein paar Wochen. Ein React PWA Install Prompt muss zwei Arten von Browsern abdecken. Chrome, Edge und Samsung Internet feuern `beforeinstallprompt`, also kann dein eigener Button den Installationsdialog des Browsers öffnen. Auf iPhone und iPad feuert kein Browser dieses Event. Dort geht es nur über „Teilen“, dann „Zum Home-Bildschirm“, und deine App muss den Leuten zeigen, wo das ist. Die typischen Bugs: ein Listener in einer Komponente, die zu spät mountet, und ein Banner, das schon beim ersten Seitenaufruf fragt. Dieses Tutorial baut beide Wege in Next.js, damit die Leute deine PWA installieren können, und zeigt dann, wann du gar nicht fragen solltest. ## Welche Browser lassen eine Seite den Installationsdialog öffnen? Nur Chromium-Browser. Überall sonst installieren die Leute, wenn überhaupt, über ein Browsermenü, und die Seite kann nur erklären, wo es ist. Stand Oktober 2026, laut [caniuse](https://caniuse.com/mdn-api_beforeinstallpromptevent), dem [Installierbarkeits-Guide von MDN](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Guides/Making_PWAs_installable) und den [Release Notes von Firefox 143](https://www.firefox.com/en-US/firefox/143.0/releasenotes/): | Browser | `beforeinstallprompt` | So wird installiert | Was deine UI tun sollte | | --- | --- | --- | --- | | Chrome und Edge auf dem Desktop | ja | dein Button ruft `prompt()` auf, oder das Icon in der Adressleiste | ein Installieren-Button | | Chrome und Samsung Internet auf Android | ja | dein Button, oder das Browsermenü | ein Installieren-Button | | Safari auf iPhone und iPad, dazu Chrome, Edge, Firefox und Orion dort seit iOS 16.4 | nein | Teilen, dann Zum Home-Bildschirm | die Schritte zeigen | | Safari 17+ auf macOS Sonoma oder neuer | nein | Ablage, dann Zum Dock hinzufügen | die Schritte zeigen | | Firefox auf Android | nein | eine Verknüpfung auf dem Home-Bildschirm, die im Browser öffnet | nichts | | Firefox auf dem Desktop | nein | keine über ein Manifest; unter Windows kann Firefox 143+ eine Seite an die Taskleiste anheften | nichts | | In-App-Browser (Instagram, TikTok, Facebook) | nein | keine, bis die Seite in einem echten Browser öffnet | nichts | Auf dem iPhone hilft dir kein Polyfill für beforeinstallprompt iOS, denn kein iOS-Browser hat einen Installationsdialog, den eine Seite öffnen könnte. WebKit hat die Anfrage von 2019 für `BeforeInstallPromptEvent` ([Bug 193959](https://bugs.webkit.org/show_bug.cgi?id=193959)) als WONTFIX geschlossen. Auf der Chromium-Seite nennen die [Release Notes von Chrome 157](https://chromestatus.com/release-notes/157) eine [Web Install API](https://chromestatus.com/feature/5183481574850560) (`navigator.install()`, zuerst auf dem Desktop) und ein ``-Element, und laut [Chromium Dash](https://chromiumdash.appspot.com/schedule) erscheint Chrome 157 am 3. November 2026 als Stable. Die [Standards Position](https://github.com/WebKit/standards-positions/issues/463) von WebKit zu dieser API lautet „oppose“, auf dem iPhone ändert sich also nichts. Bau heute auf `beforeinstallprompt`. ## Was braucht Chrome, bevor es beforeinstallprompt feuert? Ein Manifest, HTTPS und etwas Interaktion. Die [Installationskriterien auf web.dev](https://web.dev/articles/install-criteria) verlangen eine App, die noch nicht installiert ist, über HTTPS läuft und deren Manifest Folgendes enthält: `name` oder `short_name`, ein Icon in 192px und eines in 512px, `start_url` und als `display` einen der Werte `standalone`, `fullscreen`, `minimal-ui` oder `window-controls-overlay`. Die Person muss außerdem einmal auf die Seite geklickt oder getippt und 30 Sekunden dort verbracht haben, zu irgendeinem Zeitpunkt. Deshalb kann dein PWA Install Button beim ersten Besuch versteckt bleiben, selbst mit einem perfekten Manifest. In den Chrome DevTools zeigt dir Application, dann Manifest, woran die Installierbarkeit scheitert. Ein Service Worker ist laut MDN für die Installierbarkeit optional. Chromes Beitrag [Revisiting Chrome's installability criteria](https://developer.chrome.com/blog/update-install-criteria) (zuletzt aktualisiert im Dezember 2023) hat die Pflicht zu einem `fetch()`-Handler für die Installation über das Menü gestrichen (Chrome 108 auf Mobilgeräten, 112 auf dem Desktop), aber festgehalten, dass der automatische Install Prompt weiter davon abhängt. Wenn du dich auf das Event verlässt, registrier trotzdem einen Service Worker mit Fetch-Handler; Offline-Support braucht ihn ohnehin. Im App Router ist das Manifest eine Dateikonvention: ```ts // app/manifest.ts import type { MetadataRoute } from "next"; export default function manifest(): MetadataRoute.Manifest { return { id: "/", name: "Northwind CRM", short_name: "Northwind", start_url: "/", display: "standalone", background_color: "#ffffff", theme_color: "#ffffff", icons: [ { src: "/icon-192.png", sizes: "192x192", type: "image/png" }, { src: "/icon-512.png", sizes: "512x512", type: "image/png" }, { src: "/icon-maskable-512.png", sizes: "512x512", type: "image/png", purpose: "maskable" }, ], }; } ``` ## Wie fängst du beforeinstallprompt in React ab? In einem Store auf Modulebene, der zu lauschen beginnt, sobald das Root-Layout mountet, nicht im State einer Komponente. Der Browser feuert das Event, sobald die Seite die Kriterien erfüllt, oft direkt nach dem Laden. Ein Event, das vor deinem Listener gefeuert hat, ist weg, also hört ein Listener auf einer Einstellungsseite, die später mountet, es nie. Ruf `preventDefault()` auf, damit Chromes eigene Mini-Infobar wegbleibt, speicher das Event und ruf `prompt()` aus einem Klick heraus auf. Das [Codelab auf web.dev](https://web.dev/articles/codelab-make-installable) ruft es im Click-Handler des Buttons auf, weil es aus einer Nutzergeste kommen muss, und setzt das gespeicherte Event zurück, weil `prompt()` nur einmal funktioniert. Der Event-Typ steht nicht in `lib.dom.d.ts`, weil er nur in Chromium existiert und nicht standardisiert ist ([MDN](https://developer.mozilla.org/en-US/docs/Web/API/BeforeInstallPromptEvent)). ```ts // hooks/use-before-install-prompt.ts import { useSyncExternalStore } from "react"; type BeforeInstallPromptEvent = Event & { prompt: () => Promise; userChoice: Promise<{ outcome: "accepted" | "dismissed"; platform: string }>; }; let deferred: BeforeInstallPromptEvent | null = null; let listening = false; const listeners = new Set<() => void>(); const notify = () => listeners.forEach((listener) => listener()); function subscribe(listener: () => void) { // beim ersten subscribe im Browser angehängt und für die Lebensdauer der Seite behalten if (!listening) { listening = true; window.addEventListener("beforeinstallprompt", (event) => { event.preventDefault(); // keine Mini-Infobar: die App entscheidet, wann sie fragt deferred = event as BeforeInstallPromptEvent; notify(); }); window.addEventListener("appinstalled", () => { deferred = null; notify(); }); } listeners.add(listener); return () => { listeners.delete(listener); }; } export function useBeforeInstallPrompt() { const event = useSyncExternalStore(subscribe, () => deferred, () => null); // aus einem Click-Handler aufrufen async function install() { const current = deferred; if (!current) return "unavailable" as const; deferred = null; // prompt() funktioniert einmal pro Event notify(); await current.prompt(); const { outcome } = await current.userChoice; return outcome; } return { canInstall: event !== null, install }; } ``` Ruf den Hook in einer Client-Komponente auf, die das Root-Layout rendert, und zeig deinen Button nur, solange `canInstall` true ist. `useSyncExternalStore` liefert auf dem Server und während der Hydration `null`, also verursacht der Button nie einen Hydration Mismatch. `userChoice` meldet, was im Dialog passiert ist, den dein Button geöffnet hat; `appinstalled` feuert bei jeder Installation, auch bei einer über die Adressleiste. Laut [web.dev](https://web.dev/articles/customize-install) feuert der Browser nach einer Ablehnung meist direkt nach dem Auflösen von `userChoice` ein frisches Event, und der Store nimmt es auf. ## Wie erklärst du „Zum Home-Bildschirm hinzufügen“ auf iOS? Erkenne iPhone und iPad, überspring die installierte App und In-App-Browser und zeig die Schritte mit den Icons, nach denen die Leute suchen werden. iPadOS meldet einen Mac-User-Agent, also prüf auch die Touch-Punkte. Der [PWA-Guide in der Next.js-Doku](https://nextjs.org/docs/app/guides/progressive-web-apps) testet nur `/iPad|iPhone|iPod/`, übersieht damit aktuelle iPads, und sein Button für „Zum Home-Bildschirm“ hat keinen Handler. ```ts // in einem Effect oder einem Store-Snapshot aufrufen, nie während des Server-Renders export function getInstallContext() { const ua = navigator.userAgent; const ios = /iPhone|iPod|iPad/.test(ua) || (/Macintosh/.test(ua) && navigator.maxTouchPoints > 1); // Instagram, Facebook, TikTok und Android-WebViews haben keinen Installationsweg const inApp = /FBAN|FBAV|Instagram|musical_ly|TikTok|; wv\)/i.test(ua); const standalone = window.matchMedia("(display-mode: standalone)").matches || (navigator as Navigator & { standalone?: boolean }).standalone === true; return { ios, inApp, standalone }; } ``` iOS 26 hat zwei Dinge geändert. Laut WebKits [Ankündigung der Safari 26 Beta](https://webkit.org/blog/16993/news-from-wwdc25-web-technology-coming-this-fall-in-safari-26-beta/) öffnet jede Website, die zum Home-Bildschirm hinzugefügt wird, jetzt standardmäßig als Web-App, mit einem Schalter „Als Web-App öffnen“, den man abschalten kann. Und im Standard-Tab-Layout „Kompakt“ liegt Teilen hinter dem Mehr-Button (⋯), also fehlt älteren Anleitungen für „Zum Home-Bildschirm hinzufügen“ auf iOS ein Antippen. App-Entwickler haben das im September 2025 in [einem Thread der Glide-Community](https://community.glideapps.com/t/ios-26-add-to-home-screen-workflow-change/84599) gemeldet, und die [Anleitung von iPhone Life zu iOS 26.4](https://iphonelife.com/content/tip-day-turn-your-favorite-website-home-screen-icon) ergänzt vor „Zum Home-Bildschirm“ ein Antippen von „Mehr anzeigen“. Die Layouts „Unten“ und „Oben“ behalten Teilen in der Symbolleiste, also schreib Schritte, die in allen drei funktionieren. ## Wie deckt der Install Prompt von Wingo UI beide Wege ab? Er ist eine Komponente für beide Wege. Der [Install Prompt](https://wingo-ui.com/components/install-prompt) hält das Event in einem seitenweiten Store, wie der Hook oben, und ergänzt, was der Hook auslässt: Plattformerkennung für Chromium, iPhone, iPad und Safari auf dem Mac, die Prüfungen auf Standalone und In-App-Browser, ein gemerktes „Nicht jetzt“ und die UI. Wo es keinen Installationsweg gibt, rendert er nichts. > Live-Demo (Install Prompt): Warte eine Sekunde auf das Banner und tippe dann auf Installieren: Auf dem iPhone gibt es keinen Browserdialog, also listet ein Sheet die drei Schritte mit den Icons, nach denen man sucht. Das × blendet es 14 Tage lang aus; Show again holt es zurück. Probier sie unter [Install Prompt](https://wingo-ui.com/components/install-prompt) aus und installier sie mit `npx wingo-ui@latest add install-prompt`. Die Demo erzwingt `platform="ios"`; in deiner App erkennt der Standardwert `auto` die Plattform selbst. Das Banner erscheint `delay` Millisekunden (standardmäßig 3000), nachdem eine Installation möglich wird, nimmt nie den Fokus und sitzt dank `--bottom-bar-offset` und der [Safe Area Insets](https://wingo-ui.com/de/blog/tailwind-safe-area-insets) über einer [Bottom Tab Bar](https://wingo-ui.com/components/bottom-tab-bar) und dem Home-Indikator. Auf dem iPhone öffnet Installieren einen [Drawer](https://wingo-ui.com/components/drawer) mit nummerierten Schritten und einem Pfeil zu Safaris Teilen-Button; ab 768px wird daraus ein zentrierter Dialog. Auf dem Mac bekommt Safari die Schritte „Ablage“, dann „Zum Dock hinzufügen“ direkt im Banner. > Live-Demo (Install Prompt): Tippe auf Installieren: Die Demo spielt Chromes Installationsdialog nach, der Button zeigt einen Spinner, dann Installed mit Häkchen, und das Banner verschwindet. Show again spielt es erneut ab. Probier sie unter [Install Prompt](https://wingo-ui.com/components/install-prompt) aus und installier sie mit `npx wingo-ui@latest add install-prompt`. Mounte ihn einmal, möglichst weit oben im Baum. Dieser Wrapper hält ihn außerdem von Screens fern, auf denen er eine Aufgabe unterbrechen würde, und schreibt die iPhone-Schritte für iOS 26 um: ```tsx // components/app-install-prompt.tsx, gerendert von app/layout.tsx nach {children} "use client"; import { usePathname } from "next/navigation"; import { InstallPrompt, useInstallPrompt } from "@/components/ui/install-prompt"; // Screens, auf denen ein Banner eine Aufgabe unterbrechen würde const BUSY = /^\/(welcome|signup|checkout)(\/|$)/; export function AppInstallPrompt() { // startet den beforeinstallprompt-Listener auch dann, wenn die erste geöffnete Seite auf der BUSY-Liste steht useInstallPrompt(); const pathname = usePathname(); if (BUSY.test(pathname)) return null; return ( ); } ``` Für eine Einstellungsseite platziert `variant="card"` denselben Prompt inline. Für einen Menüeintrag liefert `useInstallPrompt()` die Werte `platform`, `canInstall`, `isStandalone` und `promptInstall()`, dessen Promise `accepted`, `dismissed` oder `unavailable` liefert. ## Wann solltest du nicht zur Installation auffordern? Frag, nachdem die Leute einen Nutzen hatten, und sei überall sonst still. Die [Muster zur Installationswerbung auf web.dev](https://web.dev/articles/promote-install) halten fest, dass störende Hinweise Bedienbarkeit und Engagement schaden, dass man ein Registrierungsformular nicht unterbrechen soll und dass ein abgelehnter Hinweis ausgeblendet bleiben soll, bis sich etwas ändert, etwa eine Anmeldung oder ein Kauf. Lass den Hinweis weg: - **Bei der Ankunft.** Chrome wartet schon auf einen Tipp und 30 Sekunden; das iPhone hat keine solche Hürde, also ist dein `delay` die einzige. - **Mitten in einer Aufgabe.** Registrierung, Checkout und Onboarding stehen oben auf der `BUSY`-Liste. Bei einem mehrstufigen Ablauf wartest du, bis der letzte Schritt erledigt ist. - **In der installierten App.** Prüf `display-mode: standalone` und `navigator.standalone`. Die Komponente behandelt auch `minimal-ui` und `window-controls-overlay` als installiert. - **In einem In-App-Browser.** Ein Link, der aus Instagram oder TikTok geöffnet wird, hat keinen Installationsweg, und der Install Prompt rendert dort nichts. Kommt viel Traffic auf diesem Weg, hat die MIT-lizenzierte Web-Komponente [pwa-install](https://github.com/khmyznikov/pwa-install) in [0.7.0](https://github.com/khmyznikov/pwa-install/releases/tag/v0.7.0) (September 2026) eine Erkennung von In-App-Browsern mit geführten Schritten ergänzt, etwa den Link in Safari zu öffnen. Unsere Komponente kann das nicht. - **Über einem anderen Banner.** Immer nur eine schwebende Nachricht. Fixierte Install-Banner reihen sich hintereinander ein, aber die Reihenfolge mit einem Cookie-Banner legst du selbst fest. - **Gleich wieder nach „Nicht jetzt“.** Das × speichert einen Zeitstempel in localStorage unter `storageKey` und blendet den Prompt für `dismissDays` aus (standardmäßig 14; `0` heißt nur für diese Sitzung). ## Wie kombinierst du den Install Prompt mit dem Onboarding? Bitte nach dem Onboarding um die Installation, und frag auf dem iPhone in der installierten App nach Benachrichtigungen. WebKits [Ankündigung zu iOS 16.4](https://webkit.org/blog/13878/web-push-for-web-apps-on-ios-and-ipados/) hat Web Push für Web-Apps auf dem Home-Bildschirm eingeführt, wobei die Berechtigungsanfrage an eine direkte Nutzerinteraktion gebunden ist. Der [Onboarding Flow](https://wingo-ui.com/components/onboarding-flow) fragt auf einem eigenen Schritt nach Benachrichtigungen und Standort, also lass die Karte für Benachrichtigungen in einem Safari-Tab weg: > Live-Demo (Onboarding Flow): Tippe auf jeder Karte auf Allow: Diese Demo antwortet wie ein Browser, der zugestimmt hat. Continue bleibt aktiv, beide Berechtigungen sind also optional. Probier sie unter [Onboarding Flow](https://wingo-ui.com/components/onboarding-flow) aus und installier sie mit `npx wingo-ui@latest add onboarding-flow`. ```tsx // app/welcome/page.tsx "use client"; import { useRouter } from "next/navigation"; import { OnboardingFlow, type OnboardingPermission } from "@/components/blocks/onboarding-flow"; import { useInstallPrompt } from "@/components/ui/install-prompt"; export default function WelcomePage() { const router = useRouter(); const { platform, isStandalone } = useInstallPrompt(); // Web Push funktioniert auf iPhone und iPad in der Home-Bildschirm-App, ein Safari-Tab lässt die Karte also weg const permissions: OnboardingPermission[] = platform === "ios" && !isStandalone ? ["location"] : ["notifications", "location"]; return ( { await fetch("/api/onboarding", { method: "POST", body: JSON.stringify(result) }); // /welcome steht auf der BUSY-Liste, das Install-Banner wartet also auf die Startseite router.push("/"); }} /> ); } ``` Slides, Interessen, Beispielnutzer und Labels des Blocks zeigen standardmäßig seinen Demo-Inhalt Acme Market. Gib also `slides`, `interests`, `user` und `labels` für deine eigene App mit, bevor du live gehst. Sind die Leute fertig, erscheint das Banner nach seinem `delay` auf der Startseite: Sie haben die App gerade eingerichtet, und kein Formular konkurriert um den Bildschirm. Für den Rest der mobilen Ebene lies [Mobile-first React-Komponenten](https://wingo-ui.com/de/blog/mobile-first-react-components), ergänze [Pull to Refresh für die PWA](https://wingo-ui.com/de/blog/react-pull-to-refresh) oder stöber in [Mobile UI in React](https://wingo-ui.com/de/blog/category/mobile-ui). ## Was installierst du als Nächstes? Füg die Komponente hinzu, dann das Manifest und den Wrapper für das Root-Layout von oben. `npx wingo-ui@latest add install-prompt` kopiert sie mit Button, Drawer und den Hooks, die sie importiert, und installiert die npm-Pakete, die diese nutzen (`motion`, `lucide-react`, `vaul` und drei Radix-Primitives). Install Prompt und Onboarding Flow gehören zu [Wingo UI Pro](https://wingo-ui.com/de/pricing), also melde dich zuerst mit `npx wingo-ui@latest login` an; Button und Drawer darunter sind kostenlos. Das [Tutorial zum React Onboarding Flow](https://wingo-ui.com/de/blog/react-onboarding-flow) zeigt, wo das Installationsangebot nach den Willkommens-Slides und den Berechtigungsanfragen hinpasst, und [React Native vs PWA](https://wingo-ui.com/de/blog/react-native-vs-pwa) klärt, wann eine installierte Web-App reicht. ## Komponenten in diesem Artikel - [Install Prompt](https://wingo-ui.com/components/install-prompt) (Pro): A React PWA install prompt: the browser's install dialog in Chrome and Edge, and an Add to Home Screen guide on iPhone and Mac. Installation: `npx wingo-ui@latest add install-prompt` - [Onboarding Flow](https://wingo-ui.com/components/onboarding-flow) (Pro): A React onboarding flow for a marketplace app: welcome slides, notification and location asks, a short profile, preferences and a finish. Installation: `npx wingo-ui@latest add onboarding-flow` ## Häufige Fragen ### Funktioniert beforeinstallprompt auf iOS? Nein. Kein Browser auf iPhone oder iPad feuert es, und WebKit hat die Anfrage von 2019, BeforeInstallPromptEvent einzubauen (Bug 193959), als WONTFIX geschlossen. Installiert wird über das Teilen-Menü, in Safari oder seit iOS 16.4 auch in anderen Browsern, die die Option ergänzt haben, etwa Chrome und Edge. Eine Seite kann also nur diese Schritte zeigen. ### Warum feuert beforeinstallprompt nicht? Chrome feuert es nur für eine App, die noch nicht installiert ist, über HTTPS ausgeliefert wird und ein Manifest mit name, Icons in 192px und 512px, start_url und einem standalone-artigen display hat, und erst, nachdem die Person einmal auf die Seite getippt und irgendwann 30 Sekunden dort verbracht hat. Oft feuert es direkt nach dem Laden, also verpasst ein Listener, der später auf einer anderen Route mountet, das Event; in den Chrome DevTools zeigt Application, dann Manifest, was fehlt. ### Wie erkenne ich, ob meine PWA schon installiert ist? In der installierten App trifft matchMedia('(display-mode: standalone)') zu, und auf iOS ist zusätzlich navigator.standalone true. In Chromium feuert das Event appinstalled im Moment der Installation auf der Seite, egal welcher Button sie gestartet hat. ### Kann ich den Install Prompt nach einer Ablehnung erneut zeigen? Jedes beforeinstallprompt-Event kann prompt() einmal aufrufen; nach einer Ablehnung wartest du, bis der Browser ein neues Event feuert, laut web.dev meist direkt nachdem userChoice aufgelöst ist. Dein eigenes Banner sollte sich ein „Nicht jetzt“ ebenfalls eine Weile merken; der Install Prompt von Wingo UI blendet sich standardmäßig 14 Tage lang aus. ### Ist der Install Prompt von Wingo UI kostenlos? Nein. Der Install Prompt und der Block Onboarding Flow sind Pro-Items, der Button und der Drawer, auf denen der Prompt aufbaut, sind kostenlos. Mit einem Pro-Konto, angemeldet über npx wingo-ui@latest login, kopiert npx wingo-ui@latest add install-prompt die Komponente samt allem, was sie importiert, in dein Projekt. --- Quelle: https://wingo-ui.com/de/blog/react-pwa-install-prompt