Jakob Wennberg
0626bb6326
Long-open tabs keep running the JS bundle they first loaded, so a shipped change can look "missing" (e.g. a new settings field appearing only after a full reload) until the whole app is reloaded. Add a small, unobtrusive prompt that detects a newer deploy and offers a one-click reload. - next.config: inline the deploy's commit SHA into the client bundle as NEXT_PUBLIC_BUILD_ID (empty in dev / self-hosted, which disables the check). - /api/version: public, no-store route returning the running deployment's SHA at request time. - DeployReloadPrompt: compares the two on load, on tab focus, and on a 30-min backstop; shows a bottom banner with "Ladda om" on mismatch. Mounted once in the root layout. No service worker, degrades to a no-op with no build id. Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
66 lines
2.1 KiB
TypeScript
66 lines
2.1 KiB
TypeScript
'use client'
|
|
|
|
import { useEffect, useState } from 'react'
|
|
import { useTranslations } from 'next-intl'
|
|
import { Button } from '@/components/ui/button'
|
|
|
|
// Inlined at build time from next.config's `env` (the deploy's commit SHA on
|
|
// Vercel; empty in dev / self-hosted, which turns the check off).
|
|
const BUILD_ID = process.env.NEXT_PUBLIC_BUILD_ID || ''
|
|
|
|
/**
|
|
* Detects when a newer deploy is live while this tab is still running an old JS
|
|
* bundle, and offers a one-click reload. This is why a just-shipped change can
|
|
* appear "missing" in a long-open tab until the whole app is reloaded.
|
|
*
|
|
* Compares the build id baked into this bundle against /api/version (the
|
|
* running deployment's id), re-checking when the tab regains focus plus a slow
|
|
* interval backstop. No-op when no build id is set.
|
|
*/
|
|
export function DeployReloadPrompt() {
|
|
const t = useTranslations('common')
|
|
const [stale, setStale] = useState(false)
|
|
|
|
useEffect(() => {
|
|
if (!BUILD_ID || stale) return
|
|
|
|
let cancelled = false
|
|
async function check() {
|
|
try {
|
|
const res = await fetch('/api/version', { cache: 'no-store' })
|
|
if (!res.ok) return
|
|
const { id } = await res.json()
|
|
if (!cancelled && id && id !== BUILD_ID) setStale(true)
|
|
} catch {
|
|
// Transient network error: ignore, the next trigger retries.
|
|
}
|
|
}
|
|
|
|
function onVisible() {
|
|
if (document.visibilityState === 'visible') check()
|
|
}
|
|
|
|
check()
|
|
document.addEventListener('visibilitychange', onVisible)
|
|
const interval = setInterval(check, 30 * 60 * 1000) // 30 min backstop
|
|
return () => {
|
|
cancelled = true
|
|
document.removeEventListener('visibilitychange', onVisible)
|
|
clearInterval(interval)
|
|
}
|
|
}, [stale])
|
|
|
|
if (!stale) return null
|
|
|
|
return (
|
|
<div className="fixed inset-x-0 bottom-4 z-[60] flex justify-center px-4">
|
|
<div className="flex items-center gap-3 rounded-lg border border-border bg-popover px-4 py-3 text-sm shadow-md">
|
|
<span className="text-foreground">{t('update_available')}</span>
|
|
<Button size="sm" onClick={() => window.location.reload()}>
|
|
{t('reload')}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|