PWA install prompt
usePWAInstallPrompt lets you offer your own “Install app” button instead of relying on the browser's default banner. It tracks when the browser is ready to install, whether the app is already installed, and triggers the native prompt on demand. On React Native and during server rendering it is a safe no-op, so the same button simply stays hidden.
What the hook returns
| Field | Type | Description |
|---|---|---|
| canInstall | boolean | The browser offered an install prompt and it is ready to show. |
| isInstalled | boolean | The app is already running as an installed PWA. |
| isSupported | boolean | false on React Native, during server rendering, and where install prompts do not exist. |
| promptInstall | () => Promise | Shows the native prompt and resolves with an outcome of accepted, dismissed, or unavailable. |
1.Make the app installable
The browser only fires an install prompt when the app meets its install criteria: a web app manifest with an icon set and a registered service worker, served over HTTPS. Localhost counts as secure during development.
The hook does not create these for you — it listens for the browser's install signals once the criteria are met.
2.Read the install state
import { usePWAInstallPrompt } from '@zoharyandrianome/crosshooks';
function InstallButton() {
const { canInstall, isInstalled, promptInstall } = usePWAInstallPrompt();
// Nothing to offer: already installed, or the browser isn't ready.
if (isInstalled || !canInstall) return null;
// Render your button here.
}canInstall stays false until the browser is ready, so the button appears only when installing will actually work.
3.Trigger the prompt from a user action
Call promptInstall() directly from a click. The browser blocks the prompt if it is not tied to a user gesture.
return (
<button
onClick={async () => {
const { outcome } = await promptInstall();
if (outcome === 'accepted') {
// The user installed the app.
}
}}
>
Install app
</button>
);A deferred prompt can be shown only once. After the user responds, canInstall becomes false and, on acceptance, isInstalled becomes true.
4.Account for platforms without a prompt
Some platforms — notably iOS Safari — do not expose a programmatic install prompt. There canInstall stays false and users install through the browser menu (Share → Add to Home Screen). Because the hook already hides the button in that case, no extra branching is required; add your own hint if you want to guide those users.