Browsers offer to install your app when they feel like it, on their terms, competing with everything else on your homepage. An install page — a single URL whose only job is to get the app onto the phone — puts you in charge. It is also where QR codes, emails and social posts should send people.
Why not the homepage
Your homepage is trying to do several things. An install prompt appearing over it is an interruption, and Chrome's own prompt requires prior engagement, so first-time visitors from a poster never see it. A dedicated /app page has one call to action, can show platform-specific steps, and can fire the install prompt from a button the moment the visitor arrives.
The layout
One screen, top to bottom:
- Icon and name — the same icon that will land on their home screen, large.
- One sentence of benefit — what the installed app gives them that the site in a tab doesn't: instant open, works offline, notifications for X.
- The install control for their platform — a real Install button on Android/desktop; illustrated steps on iOS; "Open in Safari/Chrome" if they arrived in an in-app browser.
- Reassurance line — "No app store. No account. About 1 MB."
- Two or three screenshots in device frames, from the screenshot tool.
- FAQ — how to uninstall, does it use data, is it the same as the website.
Nothing else. No navigation bar competing for attention beyond your logo linking home.
Platform detection
const ua = navigator.userAgent;
const isIOS = /iPhone|iPad|iPod/.test(ua) && !window.MSStream;
const isInApp = /FBAN|FBAV|Instagram|Line\/|Twitter|TikTok/i.test(ua);
const isInstalled = matchMedia('(display-mode: standalone)').matches || navigator.standalone === true;
if (isInstalled) show('already'); // "You have the app. Open it from your home screen."
else if (isInApp) show('open-in-browser');
else if (isIOS) show('ios-steps');
else show('install-button'); // Android, desktopShow the Android install button only once beforeinstallprompt has fired (the Android guide has the handler); until then, show the manual "menu → Install app" instruction as a fallback so the page is never empty.
iOS instructions that work
Three steps with icons, visible without tapping anything:
1. Tap Share (the square with the up arrow) at the bottom of Safari.
2. Scroll down and tap Add to Home Screen.
3. Tap Add. You're done.
Add a small animated GIF or a screenshot of the actual share sheet; the "Add to Home Screen" row is below the fold on most phones and people give up looking for it. If you use push, add: "Turn on notifications from inside the app after installing."
Getting people to the page
- QR code on receipts, menus, counters, posters — from the QR tool, pointing at
/app?utm_source=qr&utm_medium=<placement>. - A slim banner on the site for returning visitors on mobile who are not installed: "Get the app →". Show it after the second visit, dismissible, remember the dismissal.
- Post-purchase / post-signup screens: the moment of highest intent.
- Email footer and social bios.
What to measure
| Event | How |
|---|---|
| Install page views by source | UTM parameters |
| Install button shown / clicked | Your analytics events around beforeinstallprompt and the click |
| Prompt outcome | userChoice.outcome — accepted or dismissed |
| Install completed | appinstalled event (Android/desktop); on iOS, first launch with ?source=pwa in start_url |
| Launches from the icon | Sessions where display-mode: standalone matches |
The ratio that matters is prompts accepted ÷ prompts shown. Below about a third, the benefit sentence or the placement of the button is wrong; test one change at a time.
Keep it honest
Don't promise offline access if only the homepage is cached; don't say "free forever" unless you mean it; don't use a fake countdown. The install page is the first thing users see from "your app", and its credibility carries over.