From 2d097d5b868f48bacf2b9d0b7370914aa799bd6a Mon Sep 17 00:00:00 2001
From: Steve Fackley <stevenfackley@gmail.com>
Date: Sun, 21 Jun 2026 19:00:36 -0400
Subject: [PATCH] fix(deploy): recover maintenance page on tab refocus and
 bfcache restore

The maintenance page only re-checked /api/healthz via a 5s setInterval and a
20s <meta refresh>. Both are timers, which browsers throttle or suspend in
backgrounded tabs and asleep devices. A tab parked on the page during a deploy
window could stay stranded on "Brewing a new version" indefinitely after origin
recovered.

Also poll healthz on visibilitychange (tab refocused) and pageshow (back/forward
cache restore) so the live app returns the instant the user looks at the tab,
not whenever a throttled timer happens to fire.
---
 docker/maintenance.html | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/docker/maintenance.html b/docker/maintenance.html
index 9a1e1a9..a28e8de 100644
--- a/docker/maintenance.html
+++ b/docker/maintenance.html
@@ -165,15 +165,23 @@
 </div>
   <script>
     // Once the deploy finishes, /api/healthz flips from 503 (served by the
-    // maintenance shim, for every path during the outage) to 200 — so a single
-    // poll returns us to the live app and never reloads early. The <meta refresh>
-    // above is the JS-disabled fallback.
+    // maintenance shim, for every path during the outage) to 200 — so a poll
+    // returns us to the live app and never reloads early. Timers get throttled
+    // or suspended in backgrounded tabs / asleep devices, so we ALSO re-check
+    // the instant the tab is shown again (visibilitychange) or restored from the
+    // back/forward cache (pageshow) — otherwise a suspended tab can stay stranded
+    // here long after origin recovered. The <meta refresh> above is the no-JS fallback.
     (function () {
-      setInterval(function () {
+      function check() {
         fetch("/api/healthz", { cache: "no-store" })
           .then(function (r) { if (r.ok) location.reload(); })
           .catch(function () {});
-      }, 5000);
+      }
+      setInterval(check, 5000);
+      document.addEventListener("visibilitychange", function () {
+        if (document.visibilityState === "visible") check();
+      });
+      window.addEventListener("pageshow", check);
     })();
   </script>
 </body>