Hook
useServiceWorkerUpdate
useServiceWorkerUpdate watches a registration without creating one. It exposes the waiting worker and keeps activation or reload behind an explicit application action.
Preview
Current service worker
Status
Update ready
This documentation page does not register a service worker for you.
Installation
pnpm dlx shadcn@latest add https://pwaui.com/r/use-service-worker-update.jsonUsage
"use client"
import { useServiceWorkerUpdate } from "@/hooks/use-service-worker-update"
export function UpdateButton() { const { status, applyUpdate } = useServiceWorkerUpdate({ checkOnMount: true, })
if (status !== "waiting") return null
return ( <button onClick={() => applyUpdate({ reload: true })}> Update now </button> )}Returns
status- The registration and update lifecycle, including unsupported and error states.
registration- The existing registration found for the requested scope, or null.
updateAvailable- Whether an installed update is waiting to activate.
checkForUpdate()- Requests a service-worker update check and reports whether one is installing or waiting.
applyUpdate()- Posts SKIP_WAITING to the waiting worker, with explicit optional reload behavior.
error- The most recent registration or update failure.
Behavior notes
- The hook never registers a service worker and reports unregistered when none exists for the scope.
- Set reload: true only after the application has protected unsaved work.
- The service worker must handle the SKIP_WAITING message before applyUpdate can activate it.