Ajoute un rafraîchissement forcé de l'application

app.js

@@ -3,6 +3,7 @@ const SETUP_PAGE = "application.html";
 
 const STORAGE_KEY = "chesscubing-arena-state-v2";
 const WINDOW_NAME_KEY = "chesscubing-arena-state-v2:";
+const ASSET_TOKEN_STORAGE_KEY = "chesscubing-arena-asset-token";
 const DEFAULT_BLOCK_DURATION_MS = 180000;
 const DEFAULT_MOVE_LIMIT_MS = 20000;
 const TIME_MODE_INITIAL_CLOCK_MS = 600000;
@@ -114,6 +115,7 @@ function initSetupPage() {
   const summary = document.querySelector("#setupSummary");
   const loadDemoButton = document.querySelector("#loadDemoButton");
   const resumeCard = document.querySelector("#resumeCard");
+  const refreshAppButton = document.querySelector("#refreshAppButton");
   const competitionModeInput = document.querySelector("#competitionMode");
   const competitionFields = Array.from(document.querySelectorAll("[data-competition-field]"));
   const moveSecondsField = document.querySelector("#moveSecondsField");
@@ -244,6 +246,15 @@ function initSetupPage() {
 
   form.addEventListener("input", renderSummary);
   loadDemoButton.addEventListener("click", () => loadDemo(form, renderSummary));
+  refreshAppButton?.addEventListener("click", async () => {
+    if (!(refreshAppButton instanceof HTMLButtonElement)) {
+      return;
+    }
+
+    refreshAppButton.disabled = true;
+    refreshAppButton.textContent = "Mise a jour...";
+    await forceRefreshToLatest(SETUP_PAGE);
+  });
 
   form.addEventListener("submit", (event) => {
     event.preventDefault();
@@ -1939,6 +1950,39 @@ function clearMatch() {
   persistMatch();
 }
 
+async function forceRefreshToLatest(path = SETUP_PAGE) {
+  const refreshToken = `${Date.now()}`;
+
+  try {
+    window.sessionStorage.setItem(ASSET_TOKEN_STORAGE_KEY, refreshToken);
+  } catch {
+    // Ignore storage failures in restricted browsers.
+  }
+
+  if ("caches" in window) {
+    try {
+      const cacheKeys = await window.caches.keys();
+      await Promise.all(cacheKeys.map((cacheKey) => window.caches.delete(cacheKey)));
+    } catch {
+      // Ignore cache API failures when unavailable.
+    }
+  }
+
+  if ("serviceWorker" in navigator) {
+    try {
+      const registrations = await navigator.serviceWorker.getRegistrations();
+      await Promise.all(registrations.map((registration) => registration.update().catch(() => undefined)));
+      await Promise.all(registrations.map((registration) => registration.unregister().catch(() => undefined)));
+    } catch {
+      // Ignore service worker failures when none are registered.
+    }
+  }
+
+  const targetUrl = new URL(path, window.location.href);
+  targetUrl.searchParams.set("refresh", refreshToken);
+  window.location.replace(targetUrl.toString());
+}
+
 function toggleModal(element, open) {
   if (!element) {
     return;

application.html

@@ -18,7 +18,45 @@
     <link rel="shortcut icon" href="/favicon.png" />
     <link rel="apple-touch-icon" href="logo.png" />
     <link rel="manifest" href="site.webmanifest" />
-    <link rel="stylesheet" href="styles.css" />
+    <script>
+      (() => {
+        const assetTokenStorageKey = "chesscubing-arena-asset-token";
+        const pageUrl = new URL(window.location.href);
+        const refreshToken = pageUrl.searchParams.get("refresh");
+        if (refreshToken) {
+          try {
+            window.sessionStorage.setItem(assetTokenStorageKey, refreshToken);
+          } catch {
+            // Ignore storage failures in restricted browsers.
+          }
+          pageUrl.searchParams.delete("refresh");
+          window.history.replaceState(null, "", pageUrl.toString());
+        }
+
+        let assetToken = "";
+        try {
+          assetToken = window.sessionStorage.getItem(assetTokenStorageKey) || "";
+        } catch {
+          assetToken = "";
+        }
+
+        window.__CHESSCUBING_ASSET_TOKEN__ = assetToken;
+        window.__CHESSCUBING_ASSET_URL__ = (path) => {
+          if (!assetToken) {
+            return path;
+          }
+
+          const assetUrl = new URL(path, window.location.href);
+          assetUrl.searchParams.set("v", assetToken);
+          return `${assetUrl.pathname}${assetUrl.search}${assetUrl.hash}`;
+        };
+
+        const stylesheet = document.createElement("link");
+        stylesheet.rel = "stylesheet";
+        stylesheet.href = window.__CHESSCUBING_ASSET_URL__("styles.css");
+        document.head.append(stylesheet);
+      })();
+    </script>
   </head>
   <body data-page="setup">
     <div class="ambient ambient-left"></div>
@@ -267,8 +305,19 @@
           </div>
         </aside>
       </main>
+
+      <div class="setup-refresh-footer">
+        <button class="refresh-link-button" id="refreshAppButton" type="button">
+          Rafraîchir l'app
+        </button>
+      </div>
     </div>
 
-    <script type="module" src="app.js"></script>
+    <script>
+      const appScript = document.createElement("script");
+      appScript.type = "module";
+      appScript.src = window.__CHESSCUBING_ASSET_URL__("app.js");
+      document.body.append(appScript);
+    </script>
   </body>
 </html>

chrono.html

@@ -18,7 +18,45 @@
     <link rel="shortcut icon" href="/favicon.png" />
     <link rel="apple-touch-icon" href="logo.png" />
     <link rel="manifest" href="site.webmanifest" />
-    <link rel="stylesheet" href="styles.css" />
+    <script>
+      (() => {
+        const assetTokenStorageKey = "chesscubing-arena-asset-token";
+        const pageUrl = new URL(window.location.href);
+        const refreshToken = pageUrl.searchParams.get("refresh");
+        if (refreshToken) {
+          try {
+            window.sessionStorage.setItem(assetTokenStorageKey, refreshToken);
+          } catch {
+            // Ignore storage failures in restricted browsers.
+          }
+          pageUrl.searchParams.delete("refresh");
+          window.history.replaceState(null, "", pageUrl.toString());
+        }
+
+        let assetToken = "";
+        try {
+          assetToken = window.sessionStorage.getItem(assetTokenStorageKey) || "";
+        } catch {
+          assetToken = "";
+        }
+
+        window.__CHESSCUBING_ASSET_TOKEN__ = assetToken;
+        window.__CHESSCUBING_ASSET_URL__ = (path) => {
+          if (!assetToken) {
+            return path;
+          }
+
+          const assetUrl = new URL(path, window.location.href);
+          assetUrl.searchParams.set("v", assetToken);
+          return `${assetUrl.pathname}${assetUrl.search}${assetUrl.hash}`;
+        };
+
+        const stylesheet = document.createElement("link");
+        stylesheet.rel = "stylesheet";
+        stylesheet.href = window.__CHESSCUBING_ASSET_URL__("styles.css");
+        document.head.append(stylesheet);
+      })();
+    </script>
   </head>
   <body data-page="chrono" class="phase-body">
     <main class="phase-shell chrono-stage">
@@ -151,6 +189,11 @@
       </div>
     </section>
 
-    <script type="module" src="app.js"></script>
+    <script>
+      const appScript = document.createElement("script");
+      appScript.type = "module";
+      appScript.src = window.__CHESSCUBING_ASSET_URL__("app.js");
+      document.body.append(appScript);
+    </script>
   </body>
 </html>

cube.html

@@ -18,7 +18,45 @@
     <link rel="shortcut icon" href="/favicon.png" />
     <link rel="apple-touch-icon" href="logo.png" />
     <link rel="manifest" href="site.webmanifest" />
-    <link rel="stylesheet" href="styles.css" />
+    <script>
+      (() => {
+        const assetTokenStorageKey = "chesscubing-arena-asset-token";
+        const pageUrl = new URL(window.location.href);
+        const refreshToken = pageUrl.searchParams.get("refresh");
+        if (refreshToken) {
+          try {
+            window.sessionStorage.setItem(assetTokenStorageKey, refreshToken);
+          } catch {
+            // Ignore storage failures in restricted browsers.
+          }
+          pageUrl.searchParams.delete("refresh");
+          window.history.replaceState(null, "", pageUrl.toString());
+        }
+
+        let assetToken = "";
+        try {
+          assetToken = window.sessionStorage.getItem(assetTokenStorageKey) || "";
+        } catch {
+          assetToken = "";
+        }
+
+        window.__CHESSCUBING_ASSET_TOKEN__ = assetToken;
+        window.__CHESSCUBING_ASSET_URL__ = (path) => {
+          if (!assetToken) {
+            return path;
+          }
+
+          const assetUrl = new URL(path, window.location.href);
+          assetUrl.searchParams.set("v", assetToken);
+          return `${assetUrl.pathname}${assetUrl.search}${assetUrl.hash}`;
+        };
+
+        const stylesheet = document.createElement("link");
+        stylesheet.rel = "stylesheet";
+        stylesheet.href = window.__CHESSCUBING_ASSET_URL__("styles.css");
+        document.head.append(stylesheet);
+      })();
+    </script>
   </head>
   <body data-page="cube" class="phase-body">
     <main class="phase-shell cube-shell">
@@ -189,6 +227,11 @@
       </div>
     </section>
 
-    <script type="module" src="app.js"></script>
+    <script>
+      const appScript = document.createElement("script");
+      appScript.type = "module";
+      appScript.src = window.__CHESSCUBING_ASSET_URL__("app.js");
+      document.body.append(appScript);
+    </script>
   </body>
 </html>

styles.css

@@ -331,6 +331,38 @@ p {
   margin-top: 1.2rem;
 }
 
+.setup-refresh-footer {
+  display: flex;
+  justify-content: center;
+  margin-top: 0.9rem;
+  padding-bottom: 0.35rem;
+}
+
+.refresh-link-button {
+  appearance: none;
+  border: 0;
+  padding: 0.3rem 0.45rem;
+  background: transparent;
+  color: var(--muted);
+  font: inherit;
+  font-size: 0.72rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  cursor: pointer;
+  opacity: 0.86;
+}
+
+.refresh-link-button:hover {
+  color: var(--text);
+  text-decoration: underline;
+}
+
+.refresh-link-button:disabled {
+  opacity: 0.56;
+  cursor: wait;
+}
+
 .panel {
   padding: 1.35rem;
 }