PWA Guide

PWA install: Chrome vs Safari / iOS

What makes a site installable, how Chrome prompts work, and what iOS Safari actually allows.

1. Install checklist

Requirement	Why it matters
HTTPS	Required for SW and install flows
Web App Manifest	name/short_name, icons, start_url, display
Service Worker with fetch	Needed for Chrome installability
Icons (192 + 512)	Install UI and home screen
start_url inside scope	Broken scope = broken install

2. Chrome / Android

Chrome can show an install prompt when criteria are met. You can catch the event and show your own button:

let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
  e.preventDefault();
  deferredPrompt = e;
  document.getElementById('install-btn').hidden = false;
});

async function installApp() {
  if (!deferredPrompt) return;
  deferredPrompt.prompt();
  await deferredPrompt.userChoice;
  deferredPrompt = null;
}

Do not call prompt() without a user gesture.

3. Safari / iOS

No beforeinstallprompt.
User installs via Share - Add to Home Screen.
Add apple-touch-icon and useful meta tags.
Prefer display: standalone in manifest.
iOS capabilities are improving, but still behind Chromium for many PWA APIs.

<link rel="apple-touch-icon" href="/icons/apple-touch-icon.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-title" content="MyApp">

4. Quick comparison

	Chrome	Safari iOS
Custom install button API	Yes (`beforeinstallprompt`)	No
Manual install UI	Browser menu / prompt	Share sheet
Manifest icons	Primary source	Need apple-touch-icon too
Standalone window	Yes	Yes (with limits)

5. Debug tips

Chrome: Application - Manifest / Service Workers panels.
If install is missing, check HTTPS, icons, SW fetch handler, and start_url.
On iOS, test on a real device; desktop Safari is not enough.