Loading...
Please waitLoading...
Please waitDetect when your app is installable as a PWA and trigger the install prompt while tracking attempts.
pnpm dlx uselab@latest add use-pwa-install
import * as React from "react"
import { usePWAInstall } from "@/hooks/use-pwa-install"
export function InstallBanner() {
const { canInstall, isInstalled, promptCount, promptInstall } =
usePWAInstall()
const handleInstall = async () => {
const outcome = await promptInstall()
console.log("user choice:", outcome)
}
if (!canInstall || isInstalled) {
return null
}
return (
<div className="rounded-lg border bg-card p-4">
<p>Install this app for an improved, full-screen experience.</p>
<button onClick={handleInstall}>Install</button>
<p className="text-xs text-muted-foreground">
Prompt shown {promptCount} time(s)
</p>
</div>
)
}| Name | Type | Description |
|---|---|---|
canInstall | boolean | true when the browser raised beforeinstallprompt and the prompt is ready. |
isInstalled | boolean | true when the app already runs in standalone mode or after appinstalled. |
promptCount | number | Number of times promptInstall has been triggered (stored in localStorage). |
promptInstall() | () => Promise<"accepted" | "dismissed" | "unavailable"> | Triggers the install prompt and resolves with the user's choice. |
beforeinstallprompt when your PWA meets installability criteria (served over HTTPS, has manifest + service worker, etc.).promptInstall returns "unavailable" if the prompt event isn't ready—use canInstall to disable buttons.promptCount to avoid nagging users repeatedly.appinstalled event to update isInstalled.navigator.clipboard and install prompts require user gestures, always trigger promptInstall from a button click.The install prompt appears only in browsers that support the Progressive Web App flow (Chrome, Edge, etc.) and when the page meets installability criteria.
Hint: open this demo on a PWA-capable browser and ensure the site is served over HTTPS.