sw.js

/* Smoked Ribs Companion — service worker
   Strategy:
   - HTML / navigations: NETWORK-FIRST (always get the latest page when online,
     fall back to cache only when offline). This is critical — a cache-first page
     would freeze users on an old version and never deliver updates.
   - Google Fonts: stale-while-revalidate.
   - Other same-origin assets (icon, manifest): cache-first with background refresh. */
const APP_CACHE  = 'ribs-app-v4';
const FONT_CACHE = 'ribs-fonts-v1';
const PAGE = './index.html';
const APP_SHELL = [PAGE, './manifest.json', './icon.svg', './apple-touch-icon.png', './icon-512.png'];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(APP_CACHE).then(cache => cache.addAll(APP_SHELL)).then(() => self.skipWaiting())
  );
});

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

self.addEventListener('fetch', event => {
  const req = event.request;
  if (req.method !== 'GET') return;
  const url = new URL(req.url);

  // Google Fonts (cross-origin): stale-while-revalidate
  if (url.hostname === 'fonts.googleapis.com' || url.hostname === 'fonts.gstatic.com') {
    event.respondWith(
      caches.open(FONT_CACHE).then(async cache => {
        const cached = await cache.match(req);
        const network = fetch(req).then(res => {
          if (res && (res.ok || res.type === 'opaque')) cache.put(req, res.clone());
          return res;
        }).catch(() => cached);
        return cached || network;
      })
    );
    return;
  }

  if (url.origin !== self.location.origin) return;

  // Page / navigations: network-first, bypassing the HTTP cache so a stale 304
  // can never freeze the app; fall back to the cached page only when offline.
  if (req.mode === 'navigate' || url.pathname.endsWith('.html')) {
    event.respondWith(
      fetch(PAGE, { cache: 'reload' })
        .then(res => { const copy = res.clone(); caches.open(APP_CACHE).then(c => c.put(PAGE, copy)); return res; })
        .catch(() => caches.match(PAGE))
    );
    return;
  }

  // Other same-origin assets: cache-first, refresh in the background
  event.respondWith(
    caches.match(req).then(cached => {
      const network = fetch(req).then(res => { const copy = res.clone(); caches.open(APP_CACHE).then(c => c.put(req, copy)); return res; }).catch(() => cached);
      return cached || network;
    })
  );
});