AgentHub/client/public/sw.js

/**
 * @description Service Worker: network-first navigations with an offline fallback, and push
 * notifications. Hashed `/assets/` bundles are left to the HTTP cache (immutable).
 * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
 */

// Bump this any time the SW logic changes - old clients will install the new
// SW, drop their existing caches in `activate`, and `skipWaiting` so the
// freshly-built bundle starts being served on the very next request.
// v3: drops v2's cache-first `/assets/` entries, which grew with every build
// and were never pruned.
const CACHE_NAME = "dashboard-v3";

self.addEventListener("install", () => {
  // No pre-cache: network-first below means the cache fills lazily, and
  // there's nothing to "warm" - the v1 SW was pre-caching `/`, which is
  // exactly the file most likely to go stale after a rebuild.
  self.skipWaiting();
});

self.addEventListener("activate", (event) => {
  event.waitUntil(
    caches
      .keys()
      .then((keys) =>
        Promise.all(keys.filter((k) => k !== CACHE_NAME).map((k) => caches.delete(k)))
      )
      .then(() => self.clients.claim())
  );
});

self.addEventListener("fetch", (event) => {
  const { request } = event;
  if (request.method !== "GET") return;
  const url = new URL(request.url);
  if (url.origin !== self.location.origin) return;
  // Skip API, WebSocket, and Vite HMR endpoints
  if (
    url.pathname.startsWith("/api/") ||
    url.pathname.startsWith("/ws") ||
    url.pathname.includes("__vite")
  )
    return;

  // Hashed bundles under /assets/ are immutable and the server marks them so:
  // the browser's HTTP cache keeps them. Caching them here too only grew a
  // second copy of every build, forever.
  if (url.pathname.startsWith("/assets/")) return;

  // Everything else (navigations, sw.js, manifest, icons, root /): network-first
  // with cache fallback. The user always gets the freshest UI while online and
  // a sensible fallback when offline.
  event.respondWith(
    fetch(request)
      .then((response) => {
        if (response.ok && response.type === "basic") {
          const clone = response.clone();
          caches.open(CACHE_NAME).then((cache) => cache.put(request, clone));
        }
        return response;
      })
      .catch(() => caches.match(request).then((c) => c || caches.match("/")))
  );
});

// --- Push notifications (existing) ---

self.addEventListener("push", (event) => {
  const data = event.data
    ? event.data.json()
    : { title: "Agent Monitor", body: "New notification" };
  const { title, ...options } = data;
  event.waitUntil(self.registration.showNotification(title, { silent: false, ...options }));
});

self.addEventListener("notificationclick", (event) => {
  event.notification.close();
  const url = event.notification.data?.url;
  event.waitUntil(
    clients.matchAll({ type: "window" }).then((windowClients) => {
      for (const client of windowClients) {
        if ("focus" in client) {
          // Reuse an already-open tab instead of stacking a new one — that's
          // also why `navigate` (same-origin only) beats postMessage: it works
          // even if the page hasn't wired up a listener for this.
          if (url && "navigate" in client) client.navigate(url).catch(() => {});
          return client.focus();
        }
      }
      if (url && clients.openWindow) return clients.openWindow(url);
    })
  );
});