Skip to content
LogoLogo

PWA

Hooks for the progressive-web-app lifecycle — installing, updating, badging, and detecting when the app is already running installed.

useInstallPrompt

Custom "Add to Home Screen" UI, wrapping beforeinstallprompt (deferred and replayed via promptInstall(), since the browser's own prompt is suppressed) and appinstalled. canInstall/installed are both false — the SSR-safe default — until the client observes the respective event, and canInstall stays false permanently in browsers that never fire beforeinstallprompt. Chromium-only — Safari and Firefox never fire this event.

const { canInstall, promptInstall } = useInstallPrompt();
if (canInstall) return <button onClick={() => promptInstall()}>Install</button>;

useServiceWorker

The current page's Service Worker registration (if any), plus whether a new worker has finished installing while an existing one already controls the page — the standard "update available, reload to activate" signal. registration is undefined — the SSR-safe default — until the client resolves it, and permanently where Service Workers are unsupported.

const { updateAvailable } = useServiceWorker();
if (updateAvailable) showReloadToast();

useAppBadge

Wraps the Badging API (navigator.setAppBadge/clearAppBadge) — the small numeric/dot badge shown on an installed PWA's app icon. supported: false where the Badging API doesn't exist, and setBadge()/clearBadge() then no-op. Chromium-only — no Safari/Firefox support yet.

const { setBadge, clearBadge } = useAppBadge();
setBadge(unreadCount); // or setBadge() for a plain dot, clearBadge() to remove it

useStandaloneMode

true when the app is running in standalone display mode — launched from a home screen icon or otherwise installed as a PWA — via the (display-mode: standalone) media query. false in an ordinary browser tab, during server rendering, and before the client subscribes.

const isStandalone = useStandaloneMode();

See Also