PWA Install Prompt UX

Overview

The beforeinstallprompt event fires when the browser determines the PWA is installable. Capture it, then show a custom UI instead of relying on the browser's default mini-infobar — which users often dismiss and can never recover.

Step 1 — Listen for the event

let deferredPrompt: BeforeInstallPromptEvent | null = null;

window.addEventListener('beforeinstallprompt', (e) => {
  e.preventDefault();
  deferredPrompt = e;
  // Show your custom install button
});

Step 2 — Trigger the prompt

async function handleInstall() {
  if (!deferredPrompt) return;
  deferredPrompt.prompt();
  const { outcome } = await deferredPrompt.userChoice;
  console.log(`User response: ${outcome}`);
  deferredPrompt = null;
}

Step 3 — Detect already-installed

if (window.matchMedia('(display-mode: standalone)').matches) {
  // Already running as installed PWA — hide prompt
}

UX Guidelines

• •Never show the prompt on first visit — wait for a meaningful interaction.
• •Use a subtle banner or FAB, not a modal that blocks content.
• •Explain the benefit: “Install for offline access and faster load times.”
• •Provide a dismiss action that respects the user — don't nag.

Fallback for iOS

Safari does not support beforeinstallprompt. Detect iOS and show instructions: “Tap the Share button, then Add to Home Screen.”