From 09a30103e923b7dba32a5e12ead4006b09475aa7 Mon Sep 17 00:00:00 2001 From: Phat Pham Date: Tue, 23 Jun 2026 19:21:24 +0700 Subject: [PATCH] feat: prompt to refresh when a new version is deployed An installed PWA reopened from the iOS/iPadOS home screen resumes a frozen page rather than re-running the bootstrap script, so it never notices a deploy that happened while backgrounded. Adds a cheap GET /api/version (uncached, always reflects the live APP_VERSION) that the client polls on visibilitychange/pageshow/focus-equivalent resume and on a 15-minute foreground interval; on a mismatch it shows a "Refresh" banner instead of silently staying stale. Co-Authored-By: Claude Sonnet 4.6 --- core/render.ts | 6 +++- platforms/cloudflare/src/index.ts | 19 +++++++++++- web-static/static/app.js | 50 ++++++++++++++++++++++++++++++- web-static/static/style.css | 30 +++++++++++++++++++ 4 files changed, 102 insertions(+), 3 deletions(-) diff --git a/core/render.ts b/core/render.ts index 4e3f5a0..25ce27c 100644 --- a/core/render.ts +++ b/core/render.ts @@ -154,9 +154,13 @@ export function renderIndexPage(data: PageData): string { - +
+

reader

diff --git a/platforms/cloudflare/src/index.ts b/platforms/cloudflare/src/index.ts index a70de10..47165bf 100644 --- a/platforms/cloudflare/src/index.ts +++ b/platforms/cloudflare/src/index.ts @@ -34,6 +34,7 @@ export default { if (url.pathname === "/") return handleHome(url, env, repo); if (url.pathname === "/healthz") return handleHealthz(sources, repo); if (url.pathname === "/api/items") return handleItemsApi(url, repo); + if (url.pathname === "/api/version") return handleVersion(env); if (url.pathname === "/api/refresh") { if (request.method !== "POST") { return new Response("method not allowed", { @@ -69,7 +70,7 @@ async function handleHome( const querySource = source === "all" ? "" : source; const canonicalUrl = `${url.origin}${url.pathname}${url.search}`; const socialImageUrl = `${url.origin}/og-image.png?v=2`; - const appVersion = env.APP_VERSION?.trim() || "dev"; + const appVersion = currentAppVersion(env); const { items, hasNext } = await feedItems( repo, @@ -109,6 +110,22 @@ async function handleHealthz( return Response.json(payload); } +/** Lets the client (notably an installed PWA resuming from the background, + * which never re-runs index.html's inline bootstrap) detect that a new + * version has been deployed and prompt for a refresh — see + * web-static/static/app.js's checkForUpdate(). Deliberately uncached: it + * must always reflect the currently-deployed APP_VERSION. */ +function handleVersion(env: Env): Response { + return Response.json( + { version: currentAppVersion(env) }, + { headers: { "Cache-Control": "no-store" } }, + ); +} + +function currentAppVersion(env: Env): string { + return env.APP_VERSION?.trim() || "dev"; +} + async function handleItemsApi(url: URL, repo: D1Repository): Promise { const source = normalizeSource(url.searchParams.get("source") ?? ""); const searchQuery = normalizeSearchQuery(url.searchParams.get("q") ?? ""); diff --git a/web-static/static/app.js b/web-static/static/app.js index b7c62c0..eebda8e 100644 --- a/web-static/static/app.js +++ b/web-static/static/app.js @@ -67,6 +67,8 @@ "[data-install-screenshot-desktop]", ); const toast = document.querySelector("[data-toast]"); + const updateBanner = document.querySelector("[data-update-banner]"); + const updateRefreshButton = document.querySelector("[data-update-refresh]"); const pageSize = Number(cardsGrid?.dataset.pageSize || 12); const searchDebounceMs = 1100; const sourceConfigStorageKey = "feedreader.sources"; @@ -75,6 +77,8 @@ const visitedLinksLimit = 500; const themeStorageKey = "feedreader.theme"; const metaThemeColor = document.querySelector('meta[name="theme-color"]'); + const loadedAppVersion = document.body.dataset.appVersion || ""; + const updateCheckIntervalMs = 15 * 60 * 1000; let activeFilter = cardsGrid?.dataset.currentSource || "all"; let selectedSources = loadSelectedSources(); @@ -390,6 +394,29 @@ renderConnectionIndicator(); }; + const showUpdateBanner = () => { + updateBanner?.classList.remove("is-hidden"); + }; + + let checkingForUpdate = false; + const checkForUpdate = async () => { + if (!loadedAppVersion || checkingForUpdate) return; + checkingForUpdate = true; + try { + const response = await fetch("/api/version", { cache: "no-store" }); + if (!response.ok) return; + const payload = await response.json(); + if (payload.version && payload.version !== loadedAppVersion) { + showUpdateBanner(); + } + } catch { + // Offline or request failed — try again on the next visibility/focus + // event rather than erroring the page. + } finally { + checkingForUpdate = false; + } + }; + const renderViewMore = () => { const showActions = loadedCount > 0; if (footerActions) { @@ -1177,10 +1204,31 @@ if ("serviceWorker" in navigator) { window.addEventListener("load", () => { - navigator.serviceWorker.register("/service-worker.js").catch(() => {}); + navigator.serviceWorker + .register("/service-worker.js") + .then((registration) => registration.update().catch(() => {})) + .catch(() => {}); }); } + updateRefreshButton?.addEventListener("click", () => { + window.location.reload(); + }); + + // An installed PWA reopened from the home screen on iOS/iPadOS resumes a + // frozen page rather than re-running this script, so neither a periodic + // timer nor "load" alone can see a deploy that happened while it was + // backgrounded. visibilitychange/pageshow catch the resume itself; the + // interval is a fallback for long foreground sessions that never trigger + // either. + document.addEventListener("visibilitychange", () => { + if (document.visibilityState === "visible") checkForUpdate(); + }); + window.addEventListener("pageshow", () => checkForUpdate()); + window.setInterval(() => { + if (document.visibilityState === "visible") checkForUpdate(); + }, updateCheckIntervalMs); + const savedTheme = localStorage.getItem(themeStorageKey); applyTheme(savedTheme === "light" ? "light" : "dark"); applyUIDensity(uiDensity, { persist: false }); diff --git a/web-static/static/style.css b/web-static/static/style.css index d244611..2718ba7 100644 --- a/web-static/static/style.css +++ b/web-static/static/style.css @@ -701,6 +701,36 @@ body.is-dialog-open { display: none; } +.update-banner { + display: flex; + align-items: center; + justify-content: space-between; + gap: 0.6rem; + padding: 0.55rem 0.7rem 0.55rem 0.9rem; + border-radius: 0.9rem; + border: 1px solid color-mix(in srgb, var(--accent) 36%, var(--border)); + background: var(--accent-soft); + color: var(--text); + font-size: 0.88rem; +} + +.update-banner-button { + flex: 0 0 auto; + border: 1px solid var(--border); + background: var(--surface); + color: var(--text); + cursor: pointer; + border-radius: 999px; + padding: 0.4rem 0.9rem; + font-size: 0.85rem; + font-weight: 600; + transition: 140ms ease; +} + +.update-banner-button:hover { + border-color: color-mix(in srgb, var(--accent) 44%, var(--border)); +} + .page-body { padding-bottom: calc(0.35rem + env(safe-area-inset-bottom)); }