UpdatePrompt — PWA UI

Docs / Components / UpdatePrompt

Preview

An update is ready

Reload to use the latest version of the app.

Installation

bash

pnpm dlx shadcn@latest add https://pwaui.com/r/update-prompt.json

Usage

tsx

"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 action

Behavior notes

Use a persistent inline notice because the update remains available until activated.
Set updating while activation is in progress to disable repeat clicks and show the built-in spinner.
reload is opt-in so the application can protect unsaved work. For a less abrupt handoff, activate without automatic reload, show a brief app-level update state, then reload after status becomes updated.
The service worker must respond to the SKIP_WAITING message.

Platform limitations

Requires a registered service worker that honors the SKIP_WAITING message. iOS PWAs can evict storage and constrain background work, so an update may not apply until the next foreground launch.

Accessibility

Status changes are announced politely, actions remain available to keyboard and touch users, and the notice does not steal focus.