Show a changelog in the update banner

changelog.json is a hand-maintained, newest-first list of user-visible
changes; it is part of the SW asset cache and the build hash, so even a
changelog-only edit rolls a new version.

When the update banner appears, the app fetches changelog.json twice:
the plain URL is answered cache-first by the old controlling worker
(the running build's copy) while a cache-busting query bypasses every
SW cache and hits the network (the waiting build's copy). Entries the
fresh copy has that the cached one lacks are exactly what the update
brings, and are listed under the banner message.

src/app.js

@@ -2149,9 +2149,44 @@
       location.reload();
     });
 
+    // What the waiting build changes compared to the running one. The plain
+    // URL is answered by the *old* controlling worker cache-first, i.e. the
+    // loaded build's changelog; the cache-busting query misses every SW cache
+    // and hits the network, i.e. the new build's changelog. Entries in the
+    // fresh copy that the cached one lacks are exactly "new since this build".
+    async function changelogDiff() {
+      const load = async (url) => {
+        try {
+          const res = await fetch(url);
+          if (!res.ok) return null;
+          const body = await res.json();
+          return Array.isArray(body) ? body : null;
+        } catch {
+          return null;
+        }
+      };
+      const current = await load("changelog.json");
+      const fresh   = await load(`changelog.json?v=${Date.now()}`);
+      if (!fresh) return [];
+      const seen = new Set((current || []).map(e => e && e.text));
+      return fresh.filter(e => e && e.text && !seen.has(e.text));
+    }
+
     function showUpdateBanner(worker) {
       waitingWorker = worker;
       updateBanner.hidden = false;
+      const list = document.getElementById("update-changelog");
+      list.hidden = true;
+      list.innerHTML = "";
+      changelogDiff().then(entries => {
+        if (entries.length === 0) return;
+        for (const e of entries.slice(0, 6)) {
+          const li = document.createElement("li");
+          li.textContent = e.text;
+          list.appendChild(li);
+        }
+        list.hidden = false;
+      });
     }
 
     updateReload.addEventListener("click", () => {

src/changelog.json

@@ -0,0 +1,5 @@
+[
+  { "date": "2026-07-12", "text": "The update banner now lists what changed in the new version" },
+  { "date": "2026-07-12", "text": "Fixed adding an exercise on iPhone: stale app updates, and the keyboard's Go key discarding the input" },
+  { "date": "2026-07-12", "text": "Training: define exercises with how-to reminders, log sessions in one tap, and follow a 14-day consistency view" }
+]

src/index.html

@@ -25,11 +25,16 @@
          it and refreshes onto the new assets; "Later" dismisses until next time.
          Suppressed on the very first install (see app.js). -->
     <div id="update-banner" class="update-banner" hidden role="status" aria-live="polite">
-      <span class="update-banner-msg">A new version is available</span>
-      <span class="update-banner-actions">
-        <button type="button" id="update-reload" class="update-banner-btn">Reload</button>
-        <button type="button" id="update-later" class="update-banner-btn ghostish">Later</button>
-      </span>
+      <div class="update-banner-row">
+        <span class="update-banner-msg">A new version is available</span>
+        <span class="update-banner-actions">
+          <button type="button" id="update-reload" class="update-banner-btn">Reload</button>
+          <button type="button" id="update-later" class="update-banner-btn ghostish">Later</button>
+        </span>
+      </div>
+      <!-- What the waiting build adds over the running one; filled by app.js
+           from the diff between the cached and the fresh changelog.json. -->
+      <ul id="update-changelog" class="update-changelog" hidden></ul>
     </div>
 
     <!-- Login / register gate. Shown until the session check succeeds; the app

src/style.css

@@ -673,17 +673,28 @@ input.switch:checked::after { transform: translateX(18px); }
   left: 0;
   right: 0;
   z-index: 70;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 12px;
-  flex-wrap: wrap;
   padding: calc(10px + env(safe-area-inset-top, 0)) 16px 10px;
   background: var(--accent);
   color: #fff;
   box-shadow: var(--shadow);
 }
 .update-banner[hidden] { display: none; }
+.update-banner-row {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.update-changelog {
+  max-width: 480px;
+  margin: 6px auto 0;
+  padding: 0 0 0 18px;
+  font-size: 0.8rem;
+  line-height: 1.45;
+  opacity: 0.92;
+}
+.update-changelog[hidden] { display: none; }
 .update-banner-msg { font-size: 0.9rem; font-weight: 600; }
 .update-banner-actions { display: flex; gap: 8px; }
 .update-banner-btn {

src/sw.js

@@ -13,6 +13,7 @@ const ASSETS = [
   "./app.js",
   "./manifest.json",
   "./icon.svg",
+  "./changelog.json",
 ];
 
 self.addEventListener("install", (event) => {