Component
UpdatePrompt
UpdatePrompt gives users an explicit choice to apply or defer an update. Pair it with useServiceWorkerUpdate so activation and reload behavior remain under application control.
Preview
An update is ready
Reload to use the latest version of the app.
Installation
pnpm dlx shadcn@latest add https://pwaui.com/r/update-prompt.jsonUsage
"use client"
import { UpdatePrompt } from "@/components/ui/update-prompt"import { useServiceWorkerUpdate } from "@/hooks/use-service-worker-update"
export function AppUpdatePrompt() { const { status, applyUpdate } = useServiceWorkerUpdate({ checkOnMount: true, })
if (status !== "waiting" && status !== "activating") return null
return ( <UpdatePrompt updating={status === "activating"} onUpdate={() => applyUpdate({ reload: true })} /> )}Anatomy
UpdatePrompttitlestatus descriptionupdate actionoptional defer actionBehavior notes
- Use a persistent inline notice because the update remains available until activated.
- reload is opt-in so the application can protect unsaved work.
- The service worker must respond to the SKIP_WAITING message.
Accessibility
Status changes are announced politely, actions remain available to keyboard and touch users, and the notice does not steal focus.