Prompt to reload when a new version is available

The service worker used to skipWaiting() on install and claim clients on
activate, so a new build's assets swapped in silently and a long-open tab
kept running stale JS. Switch to the standard update flow: the worker now
waits until the page sends it a SKIP_WAITING message, and the page shows a
"A new version is available — Reload / Later" banner when a new worker
reaches "installed" while one is already controlling the tab (that
controller check suppresses the first-install prompt).

Reload posts SKIP_WAITING and reloads on controllerchange (guarded against
a reload loop and against the initial clients.claim on a fresh install);
Later dismisses until the next update. Since browsers only auto-check on
navigation, also poll registration.update() hourly and on visibilitychange.
Bump the cache to v9 so the old cache is cleaned up on activate.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/sw.js

@@ -1,4 +1,4 @@
-const CACHE = "puppy-tracker-v8";
+const CACHE = "puppy-tracker-v9";
 const PHOTO_CACHE = "puppy-tracker-photos-v1";
 const ASSETS = [
   "./",
@@ -13,7 +13,13 @@ self.addEventListener("install", (event) => {
   event.waitUntil(
     caches.open(CACHE).then((cache) => cache.addAll(ASSETS))
   );
-  self.skipWaiting();
+  // No skipWaiting() here: a new worker stays in "waiting" while an old one is
+  // controlling a tab, so the page can prompt before swapping assets out from
+  // under it. The page tells us to activate via a SKIP_WAITING message.
+});
+
+self.addEventListener("message", (event) => {
+  if (event.data && event.data.type === "SKIP_WAITING") self.skipWaiting();
 });
 
 self.addEventListener("activate", (event) => {