@underpostnet/cyberia 3.2.80

package/src/client/ssr/views/Maintenance.js

@@ -0,0 +1,64 @@
+const s = (el) => document.querySelector(el);
+
+const append = (el, html) => s(el).insertAdjacentHTML('beforeend', html);
+
+const getLang = () =>
+  (localStorage.getItem('lang') || navigator.language || navigator.userLanguage || s('html').lang)
+    .slice(0, 2)
+    .toLowerCase();
+
+const main = () => {
+  const Translate = {
+    Data: {
+      ['server-maintenance']: {
+        en: "The server is under maintenance <br> we'll be back soon.",
+        es: 'El servidor está en mantenimiento <br> volveremos pronto.',
+      },
+    },
+    instance: function (id) {
+      return this.Data[id][getLang()] ? this.Data[id][getLang()] : this.Data[id]['en'];
+    },
+  };
+  const icon = html`<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 24 24">
+    <path
+      fill="none"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      d="M3 7a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v2a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3zm9 13H6a3 3 0 0 1-3-3v-2a3 3 0 0 1 3-3h10.5m-.5 6a2 2 0 1 0 4 0a2 2 0 1 0-4 0m2-3.5V16m0 4v1.5m3.032-5.25l-1.299.75m-3.463 2l-1.3.75m0-3.5l1.3.75m3.463 2l1.3.75M7 8v.01M7 16v.01"
+    />
+  </svg>`;
+
+  append(
+    'body',
+    html` <style>
+        body {
+          font-family: arial;
+          font-size: 20px;
+          background-color: #d8d8d8;
+          color: #333;
+        }
+        a {
+          color: black;
+        }
+      </style>
+
+      <div class="abs center" style="top: 45%">
+        ${icon}
+        <br />
+        <br />${Translate.instance('server-maintenance')}
+      </div>`,
+  );
+};
+
+SrrComponent = () =>
+  html`<script>
+    {
+      const s = ${s};
+      const append = ${append};
+      const getLang = ${getLang};
+      const main = ${main};
+      window.onload = main;
+    }
+  </script>`;

package/src/client/ssr/views/NoNetworkConnection.js

@@ -0,0 +1,68 @@
+const s = (el) => document.querySelector(el);
+
+const append = (el, html) => s(el).insertAdjacentHTML('beforeend', html);
+
+const getLang = () =>
+  (localStorage.getItem('lang') || navigator.language || navigator.userLanguage || s('html').lang)
+    .slice(0, 2)
+    .toLowerCase();
+
+const main = () => {
+  const Translate = {
+    Data: {
+      ['no-internet-connection']: {
+        en: 'No internet connection <br> verify your network',
+        es: 'Sin conexión a internet <br> verifica tu red',
+      },
+      ['back']: {
+        en: 'Back to <br>  homepage',
+        es: 'Volver a  <br> la pagina principal',
+      },
+    },
+    instance: function (id) {
+      return this.Data[id][getLang()] ? this.Data[id][getLang()] : this.Data[id]['en'];
+    },
+  };
+  const icon = html`
+    <svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 20 20">
+      <path
+        fill="currentColor"
+        d="M10 18q.128 0 .254-.004a5.5 5.5 0 0 1-.698-1.083c-.536-.207-1.098-.793-1.578-1.821A9.3 9.3 0 0 1 7.42 13.5h1.672q.096-.52.284-1h-2.17A15 15 0 0 1 7 10c0-.883.073-1.725.206-2.5h5.588c.092.541.156 1.115.186 1.713q.48-.138.992-.188a16 16 0 0 0-.165-1.525h2.733c.251.656.406 1.36.448 2.094q.543.276 1.008.66A8 8 0 1 0 10 18m0-15c.657 0 1.407.59 2.022 1.908c.217.466.406 1.002.559 1.592H7.419c.153-.59.342-1.126.56-1.592C8.592 3.59 9.342 3 10 3M7.072 4.485A10.5 10.5 0 0 0 6.389 6.5H3.936a7.02 7.02 0 0 1 3.778-3.118c-.241.33-.456.704-.642 1.103M6.192 7.5A16 16 0 0 0 6 10c0 .87.067 1.712.193 2.5H3.46A7 7 0 0 1 3 10c0-.88.163-1.724.46-2.5zm.197 6c.176.743.407 1.422.683 2.015c.186.399.401.773.642 1.103A7.02 7.02 0 0 1 3.936 13.5zm5.897-10.118A7.02 7.02 0 0 1 16.064 6.5H13.61a10.5 10.5 0 0 0-.683-2.015a6.6 6.6 0 0 0-.642-1.103M19 14.5a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0M14.5 12a.5.5 0 0 0-.5.5v2a.5.5 0 0 0 1 0v-2a.5.5 0 0 0-.5-.5m0 5.125a.625.625 0 1 0 0-1.25a.625.625 0 0 0 0 1.25"
+      />
+    </svg>
+  `;
+  append(
+    'body',
+    html` <style>
+        body {
+          font-family: arial;
+          font-size: 20px;
+          background-color: #d8d8d8;
+          color: #333;
+        }
+        a {
+          color: black;
+        }
+      </style>
+
+      <div class="abs center" style="top: 45%">
+        ${icon}
+        <br />
+        <br />
+        <br />${Translate.instance('no-internet-connection')} <br />
+        <br />
+        <a target="_top" href="${location.origin}">${Translate.instance('back')}</a>
+      </div>`,
+  );
+};
+
+SrrComponent = () =>
+  html`<script>
+    {
+      const s = ${s};
+      const append = ${append};
+      const getLang = ${getLang};
+      const main = ${main};
+      window.onload = main;
+    }
+  </script>`;

package/src/client/ssr/views/Test.js

@@ -0,0 +1,199 @@
+const s = (el) => document.querySelector(el);
+
+const append = (el, html) => s(el).insertAdjacentHTML('beforeend', html);
+
+const getLang = () =>
+  (localStorage.getItem('lang') || navigator.language || navigator.userLanguage || s('html').lang)
+    .slice(0, 2)
+    .toLowerCase();
+
+const main = () => {
+  const Translate = {
+    Data: {
+      ['back']: {
+        en: 'Back to <br>  homepage',
+        es: 'Volver a  <br> la pagina principal',
+      },
+    },
+    instance: function (id) {
+      return this.Data[id][getLang()] ? this.Data[id][getLang()] : this.Data[id]['en'];
+    },
+  };
+  const icon = html`
+    <svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 32 32">
+      <g fill="none">
+        <g filter="url(#f2465id5)">
+          <path fill="#A5D9FF" d="m21.066 4.43l6.992 6.992l-16.926 16.926a4.944 4.944 0 1 1-6.992-6.992z" />
+        </g>
+        <g filter="url(#f2465id6)"><path fill="#C6EFFF" d="m23.37 7.524l1.653 1.653L17 17.199l-1.653-1.652z" /></g>
+        <g filter="url(#f2465id7)">
+          <path fill="#D1F884" d="m26.112 13.368l-14.98 14.98a4.944 4.944 0 1 1-6.992-6.992l7.988-7.988z" />
+          <path fill="url(#f2465id0)" d="m26.112 13.368l-14.98 14.98a4.944 4.944 0 1 1-6.992-6.992l7.988-7.988z" />
+        </g>
+        <path fill="url(#f2465id1)" d="M14.761 10.735L13.6 11.897l2.093 2.092a.822.822 0 0 0 1.162-1.162z" />
+        <path fill="url(#f2465id2)" d="m9.097 16.398l1.162-1.162l2.085 2.085a.822.822 0 1 1-1.162 1.162z" />
+        <path fill="url(#f2465id3)" d="m4.589 20.907l1.162-1.162l2.084 2.084a.822.822 0 0 1-1.163 1.162z" />
+        <g filter="url(#f2465id8)">
+          <path
+            fill="#A9D8FF"
+            d="M19.55 2.617a1.47 1.47 0 0 0 0 2.079l8.242 8.242a1.47 1.47 0 0 0 2.078-2.079l-8.242-8.242a1.47 1.47 0 0 0-2.078 0"
+          />
+          <path
+            fill="url(#f2465id4)"
+            d="M19.55 2.617a1.47 1.47 0 0 0 0 2.079l8.242 8.242a1.47 1.47 0 0 0 2.078-2.079l-8.242-8.242a1.47 1.47 0 0 0-2.078 0"
+          />
+        </g>
+        <g filter="url(#f2465id9)"><path fill="#C4ECFF" d="m19.916 4.001l1.11-1.11l8.376 8.374l-1.111 1.111z" /></g>
+        <defs>
+          <linearGradient id="f2465id0" x1="25.761" x2="17.074" y1="13.875" y2="16.875" gradientUnits="userSpaceOnUse">
+            <stop offset=".203" stop-color="#E9EB7E" />
+            <stop offset="1" stop-color="#E9EB7E" stop-opacity="0" />
+          </linearGradient>
+          <linearGradient id="f2465id1" x1="16.761" x2="14.011" y1="14.063" y2="11.469" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#138979" />
+            <stop offset="1" stop-color="#2E7B65" />
+          </linearGradient>
+          <linearGradient id="f2465id2" x1="12.252" x2="9.508" y1="18.557" y2="15.969" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#138979" />
+            <stop offset="1" stop-color="#2E7B65" />
+          </linearGradient>
+          <linearGradient id="f2465id3" x1="7.743" x2="5" y1="23.065" y2="20.477" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#138979" />
+            <stop offset="1" stop-color="#2E7B65" />
+          </linearGradient>
+          <linearGradient id="f2465id4" x1="28.786" x2="28.656" y1="13.521" y2="11.86" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#A8C3FF" />
+            <stop offset="1" stop-color="#A8C3FF" stop-opacity="0" />
+          </linearGradient>
+          <filter
+            id="f2465id5"
+            width="25.366"
+            height="25.366"
+            x="2.692"
+            y="4.43"
+            color-interpolation-filters="sRGB"
+            filterUnits="userSpaceOnUse"
+          >
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+            <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+            <feOffset />
+            <feGaussianBlur stdDeviation="1" />
+            <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic" />
+            <feColorMatrix values="0 0 0 0 0.745098 0 0 0 0 0.85098 0 0 0 0 0.964706 0 0 0 1 0" />
+            <feBlend in2="shape" result="effect1_innerShadow_18_24902" />
+          </filter>
+          <filter
+            id="f2465id6"
+            width="13.675"
+            height="13.675"
+            x="13.347"
+            y="5.524"
+            color-interpolation-filters="sRGB"
+            filterUnits="userSpaceOnUse"
+          >
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+            <feGaussianBlur result="effect1_foregroundBlur_18_24902" stdDeviation="1" />
+          </filter>
+          <filter
+            id="f2465id7"
+            width="26.42"
+            height="17.178"
+            x="2.692"
+            y="12.618"
+            color-interpolation-filters="sRGB"
+            filterUnits="userSpaceOnUse"
+          >
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+            <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+            <feOffset dx="4" dy="-.75" />
+            <feGaussianBlur stdDeviation="1.5" />
+            <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic" />
+            <feColorMatrix values="0 0 0 0 0.505882 0 0 0 0 0.811765 0 0 0 0 0.34902 0 0 0 1 0" />
+            <feBlend in2="shape" result="effect1_innerShadow_18_24902" />
+            <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+            <feOffset dy="-.4" />
+            <feGaussianBlur stdDeviation=".5" />
+            <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic" />
+            <feColorMatrix values="0 0 0 0 0.788235 0 0 0 0 0.843137 0 0 0 0 0.898039 0 0 0 1 0" />
+            <feBlend in2="effect1_innerShadow_18_24902" result="effect2_innerShadow_18_24902" />
+            <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+            <feOffset dx=".4" dy="-.4" />
+            <feGaussianBlur stdDeviation=".5" />
+            <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic" />
+            <feColorMatrix values="0 0 0 0 0.67451 0 0 0 0 0.839216 0 0 0 0 0.623529 0 0 0 1 0" />
+            <feBlend in2="effect2_innerShadow_18_24902" result="effect3_innerShadow_18_24902" />
+          </filter>
+          <filter
+            id="f2465id8"
+            width="11.181"
+            height="11.181"
+            x="19.12"
+            y="2.187"
+            color-interpolation-filters="sRGB"
+            filterUnits="userSpaceOnUse"
+          >
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+            <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+            <feOffset />
+            <feGaussianBlur stdDeviation=".5" />
+            <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic" />
+            <feColorMatrix values="0 0 0 0 0.658824 0 0 0 0 0.776471 0 0 0 0 0.937255 0 0 0 1 0" />
+            <feBlend in2="shape" result="effect1_innerShadow_18_24902" />
+          </filter>
+          <filter
+            id="f2465id9"
+            width="10.986"
+            height="10.986"
+            x="19.166"
+            y="2.14"
+            color-interpolation-filters="sRGB"
+            filterUnits="userSpaceOnUse"
+          >
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+            <feGaussianBlur result="effect1_foregroundBlur_18_24902" stdDeviation=".375" />
+          </filter>
+        </defs>
+      </g>
+    </svg>
+  `;
+  append(
+    'body',
+    html` <style>
+        body {
+          font-family: arial;
+          font-size: 20px;
+          background-color: #d8d8d8;
+          color: #333;
+        }
+        a {
+          color: black;
+        }
+      </style>
+
+      <div class="abs center" style="top: 45%">
+        ${icon}
+        <br />
+        <br />
+        <span class="bold">Test Page</span>
+        <br />
+        <br />
+        <a target="_top" href="${location.origin}">${Translate.instance('back')}</a>
+      </div>`,
+  );
+};
+
+SrrComponent = () =>
+  html`<script>
+    {
+      const s = ${s};
+      const append = ${append};
+      const getLang = ${getLang};
+      const main = ${main};
+      window.onload = main;
+    }
+  </script>`;

package/src/client/sw/core.sw.js

@@ -0,0 +1,274 @@
+// Workbox modules are bundled inline by esbuild — no CDN, no importScripts.
+import { setCacheNameDetails, clientsClaim } from 'workbox-core';
+import { precacheAndRoute, cleanupOutdatedCaches, matchPrecache } from 'workbox-precaching';
+import { registerRoute, setCatchHandler } from 'workbox-routing';
+import { StaleWhileRevalidate, NetworkFirst, NetworkOnly } from 'workbox-strategies';
+import { CacheableResponsePlugin } from 'workbox-cacheable-response';
+import { ExpirationPlugin } from 'workbox-expiration';
+import { BackgroundSyncPlugin } from 'workbox-background-sync';
+
+// ─── Runtime config injected by client-build.js ───────────────────────────────
+// OFFLINE_URL and MAINTENANCE_URL are absolute (proxy-prefixed) index.html paths
+// resolved at build time from the SSR config's `fallbacks` map.
+const payload = self.renderPayload || {};
+const CACHE_PREFIX = payload.CACHE_PREFIX || 'engine-core';
+const PRE_CACHED_RESOURCES = Array.isArray(payload.PRE_CACHED_RESOURCES) ? payload.PRE_CACHED_RESOURCES : [];
+const OFFLINE_URL = payload.OFFLINE_URL || '/offline/index.html';
+const MAINTENANCE_URL = payload.MAINTENANCE_URL || '/maintenance/index.html';
+
+// Dedicated cache for fallback pages so they're available even if precacheAndRoute
+// fails (e.g. a precache manifest entry returns non-200 during install).
+const FALLBACK_CACHE = `${CACHE_PREFIX}-fallbacks`;
+
+/**
+ * Ultimate inline HTML fallback used ONLY when the network is unavailable and
+ * the custom SSR pages (NoNetworkConnection / Maintenance views from config)
+ * have not yet been cached. Once cached on first successful visit, the custom
+ * pages take over.
+ * @param {'offline'|'maintenance'} kind
+ * @returns {Response}
+ */
+const inlineFallback = (kind) => {
+  const title = kind === 'offline' ? 'Offline' : 'Maintenance';
+  const icon = kind === 'offline' ? '🌐' : '🔧';
+  const msg =
+    kind === 'offline'
+      ? 'You are offline. Please check your internet connection and try again.'
+      : 'The server is under maintenance. We\'ll be back shortly.';
+  const html = `<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover"><title>${title}</title><style>body{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:#f5f5f5;color:#333;padding:1rem;text-align:center}h1{font-size:2rem;margin-bottom:.5rem}p{font-size:1rem;color:#666;max-width:24rem}</style></head><body><h1>${icon} ${title}</h1><p>${msg}</p></body></html>`;
+  return new Response(html, {
+    status: 200,
+    statusText: 'OK',
+    headers: { 'Content-Type': 'text/html; charset=utf-8' },
+  });
+};
+
+/**
+ * Returns a Response for the cached fallback page.
+ * Tries (in order):
+ *   1. Dedicated FALLBACK_CACHE (primary & secondary URL)
+ *   2. Workbox precache (primary & secondary URL)
+ *   3. If online, fetches the custom SSR page from the server (caches it for next time)
+ *   4. Ultimate inline HTML string (never a browser error page)
+ *
+ * @param {'offline'|'maintenance'} kind
+ * @returns {Promise<Response>}
+ */
+const getFallback = async (kind) => {
+  const primary = kind === 'maintenance' ? MAINTENANCE_URL : OFFLINE_URL;
+  const secondary = kind === 'maintenance' ? OFFLINE_URL : MAINTENANCE_URL;
+  const cache = await caches.open(FALLBACK_CACHE);
+
+  // ── 1. Try cache (own + precache) ──────────────────────────────────────
+  const cached =
+    (await cache.match(primary)) ||
+    (await matchPrecache(primary)) ||
+    (await cache.match(secondary)) ||
+    (await matchPrecache(secondary));
+  if (cached) return cached;
+
+  // ── 2. If we appear online, try to fetch the custom SSR page from server ─
+  // This handles the case where the install-time caching didn't happen yet
+  // (e.g. first install while server was up, but fallback pages weren't cached).
+  if (typeof navigator === 'undefined' || navigator.onLine !== false) {
+    try {
+      const fetchResp = await fetch(primary, { credentials: 'same-origin' });
+      if (fetchResp.ok) {
+        cache.put(primary, fetchResp.clone()).catch(() => { });
+        return fetchResp;
+      }
+    } catch (_) { }
+    try {
+      const fetchResp = await fetch(secondary, { credentials: 'same-origin' });
+      if (fetchResp.ok) {
+        cache.put(secondary, fetchResp.clone()).catch(() => { });
+        return fetchResp;
+      }
+    } catch (_) { }
+  }
+
+  // ── 3. Ultimate inline fallback ────────────────────────────────────────
+  return inlineFallback(kind);
+};
+
+/**
+ * Background-caches the offline and maintenance SSR pages for future use.
+ * Called after each successful navigation so the custom views are available
+ * the next time the network is unreachable.
+ */
+const cacheFallbackPages = async () => {
+  const cache = await caches.open(FALLBACK_CACHE);
+  for (const url of [OFFLINE_URL, MAINTENANCE_URL]) {
+    try {
+      if (!(await cache.match(url))) {
+        const response = await fetch(url, { credentials: 'same-origin' });
+        if (response.ok) {
+          await cache.put(url, response);
+        }
+      }
+    } catch (_) {
+      // Network unavailable now — will try again on next navigation.
+    }
+  }
+};
+
+// ─── Core setup ───────────────────────────────────────────────────────────────
+setCacheNameDetails({ prefix: CACHE_PREFIX });
+clientsClaim();
+
+self.addEventListener('install', (event) => {
+  self.skipWaiting();
+  // Note: install-time caching of fallback pages is unreliable in some browsers.
+  // We rely on the post-navigation eager caching in the navigation handler.
+  // The inline HTML fallback ensures the user never sees a browser error page
+  // before the custom SSR pages are cached.
+});
+
+self.addEventListener('activate', (event) => {
+  event.waitUntil(
+    (async () => {
+      if ('navigationPreload' in self.registration) {
+        await self.registration.navigationPreload.enable();
+      }
+    })(),
+  );
+});
+
+self.addEventListener('message', (event) => {
+  const { status } = event.data || {};
+  if (status === 'skipWaiting') {
+    self.skipWaiting();
+    return;
+  }
+  if (status === 'workbox-reset') {
+    event.waitUntil(
+      (async () => {
+        const names = await caches.keys();
+        await Promise.all(names.map((name) => caches.delete(name)));
+        event.ports?.[0]?.postMessage({ status: 'workbox-reset-done', deleted: names.length });
+      })(),
+    );
+  }
+});
+
+// ─── Precaching ───────────────────────────────────────────────────────────────
+precacheAndRoute(PRE_CACHED_RESOURCES.map((url) => ({ url, revision: null })));
+cleanupOutdatedCaches();
+
+// ─── Static assets: StaleWhileRevalidate ─────────────────────────────────────
+registerRoute(
+  ({ request, url }) =>
+    request.method === 'GET' &&
+    url.origin === self.location.origin &&
+    ['style', 'script', 'font', 'image'].includes(request.destination),
+  new StaleWhileRevalidate({
+    cacheName: `${CACHE_PREFIX}-assets`,
+    plugins: [
+      new CacheableResponsePlugin({ statuses: [0, 200] }),
+      new ExpirationPlugin({ maxEntries: 350, maxAgeSeconds: 30 * 24 * 60 * 60 }),
+    ],
+  }),
+);
+
+// ─── API GET: NetworkFirst with short timeout ─────────────────────────────────
+registerRoute(
+  ({ request, url }) => request.method === 'GET' && url.pathname.includes('/api/'),
+  new NetworkFirst({
+    cacheName: `${CACHE_PREFIX}-api-get`,
+    networkTimeoutSeconds: 5,
+    plugins: [
+      new CacheableResponsePlugin({ statuses: [0, 200] }),
+      new ExpirationPlugin({ maxEntries: 120, maxAgeSeconds: 5 * 60 }),
+    ],
+  }),
+);
+
+// ─── API mutations: NetworkOnly + background sync replay ─────────────────────
+registerRoute(
+  ({ request, url }) => request.method !== 'GET' && url.pathname.includes('/api/'),
+  new NetworkOnly({
+    plugins: [new BackgroundSyncPlugin('api-mutation-queue', { maxRetentionTime: 24 * 60 })],
+  }),
+);
+
+// ─── Navigation with offline/maintenance dispatcher ─────────────────────────
+//
+// CRITICAL: We use direct fetch() instead of NetworkFirst for navigation so
+// that when the server is unreachable:
+//   - NetworkFirst would silently return a STALE cached real page (status 200)
+//     making it look like the app still works when it doesn't
+//   - fetch() throws on network failure → catch → fallback page
+//   - fetch() returns 5xx → maintenance fallback
+//
+// After each successful fetch, we eagerly cache the custom offline/maintenance
+// SSR pages so they're available when the network goes down.
+//
+// The dispatcher logic:
+//   1. If navigator.onLine === false → offline fallback immediately
+//   2. Try navigation preload — if it succeeds (< 500) use it, else fall through
+//   3. Try direct fetch() — if it succeeds (< 500) cache and return it
+//   4. If fetch returned 5xx → maintenance fallback
+//   5. If fetch threw (network down) → fallback based on connectivity
+// ─────────────────────────────────────────────────────────────────────────────
+
+registerRoute(
+  ({ request }) => request.mode === 'navigate',
+  async ({ event }) => {
+    // ── 1. Check browser offline state ────────────────────────────────────
+    if (typeof navigator !== 'undefined' && navigator.onLine === false) {
+      return getFallback('offline');
+    }
+
+    // ── 2. Try navigation preload ────────────────────────────────────────
+    try {
+      const preload = await event.preloadResponse;
+      if (preload && preload.status < 500) {
+        // Fire-and-forget: eagerly cache fallback pages in the background
+        // after a successful navigation so they're available when offline.
+        cacheFallbackPages().catch(() => { });
+        return preload;
+      }
+    } catch (_) {
+      // Preload threw — fall through to direct fetch
+    }
+
+    // ── 3. Try direct fetch to the server ─────────────────────────────────
+    try {
+      const response = await fetch(event.request);
+
+      if (response.status >= 500) {
+        return getFallback('maintenance');
+      }
+
+      if (response.ok) {
+        // Cache the successful response for future navigations
+        const cache = await caches.open(`${CACHE_PREFIX}-pages`);
+        cache.put(event.request, response.clone()).catch(() => { });
+
+        // Eagerly cache fallback pages in the background
+        cacheFallbackPages().catch(() => { });
+
+        return response;
+      }
+
+      return response;
+    } catch (_) {
+      const reallyOffline =
+        typeof navigator !== 'undefined' && navigator.onLine === false;
+      return getFallback(reallyOffline ? 'offline' : 'maintenance');
+    }
+  },
+);
+
+// ─── Global catch handler (non-navigation failures) ──────────────────────────
+setCatchHandler(async ({ request }) => {
+  if (request.mode === 'navigate') {
+    const reallyOffline =
+      typeof navigator !== 'undefined' && navigator.onLine === false;
+    return getFallback(reallyOffline ? 'offline' : 'maintenance');
+  }
+  return new Response(JSON.stringify({ status: 'error', message: 'request failed' }), {
+    status: 503,
+    headers: { 'Content-Type': 'application/json' },
+  });
+});