Ship a PWA that notices when it is out of date
Installable, offline-capable, and honest about stale builds.
The problem
A long-lived tab is running a build you deployed over three weeks ago. It keeps calling an API that has moved on, and the errors look like backend bugs.
Service workers make this worse before better: cache aggressively and users get stuck on an old build with no way to know. The usual toolchains bring a large dependency and a build step that is difficult to reason about.
What you are building
Live surfaces, not screenshots — every one composed from the same components you would install.
Update + offline
What the update prompt and offline notice look like — both gated, so a real app shows neither until it should.
Update available
A new version is available — refresh to get the latest.
You’re offline. Some features may be unavailable until you reconnect.
The detector is useAppUpdate(); the offline notice is <OfflineBanner />. Both ship gated, so a real app shows neither until it should.
The code
import { AppUpdateAlert } from "@particle-academy/fancy-app-update";
// Mount once near the root. It renders NOTHING until a redeploy is detected,
// which is why it is safe to leave in place -- there is no state to manage and
// nothing to show on a normal load.
<AppUpdateAlert position="bottom-right" />// The built-in prompt is a fixed-position card. When you want it inline -- in
// your own chrome, with your own components -- take the render prop and compose
// it yourself; the detection stays the package's problem.
<AppUpdateAlert
render={({ refresh, dismiss }) => (
<Callout color="violet">
<Text weight="semibold">Update available</Text>
<Button size="sm" onClick={refresh}>Refresh</Button>
<Button size="sm" variant="ghost" onClick={dismiss}>Later</Button>
</Callout>
)}
/>How to solve it
Add the PWA layer
A lean, SSR-safe implementation with no Workbox — small enough to read and understand what it caches.
Run thisbash npm install @particle-academy/fancy-pwaDetect new builds
A framework-agnostic detector that notices a new build is available and lets you prompt for a refresh. Pure React, no backend requirement.
Run thisbash npm install @particle-academy/fancy-app-updateTell the user, do not force them
A prompt rather than a reload: nobody loses a half-filled form because a deploy happened while they were typing.