Service Worker Generator

/**
 * Service Worker — generated by consolelog.tools
 * Strategy: per-route caching with a network-first default.
 *
 * Save this file as '/offline.html' sibling, sw.js at the
 * scope root you want it to control, then register it (see the registration
 * snippet). Requires HTTPS (localhost is exempt).
 */
const CACHE_NAME = 'my-app-v1';
const PRECACHE_URLS = [
  "/",
  "/index.html",
  "/styles/main.css",
  "/scripts/app.js",
  "/manifest.webmanifest",
  "/offline.html"
];
const OFFLINE_URL = '/offline.html';

// ── Install: precache the app shell ──────────────────────────────────────────
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME).then((cache) => cache.addAll(PRECACHE_URLS)),
  );
  // Activate this worker as soon as it finishes installing.
  self.skipWaiting();
});

// ── Activate: drop stale caches from previous versions ───────────────────────
self.addEventListener('activate', (event) => {
  event.waitUntil(
    (async () => {
      const keys = await caches.keys();
      await Promise.all(
        keys.filter((key) => key !== CACHE_NAME).map((key) => caches.delete(key)),
      );
      // Take control of open clients without requiring a reload.
      await self.clients.claim();
    })(),
  );
});

// Only responses worth caching: ok, basic/cors, and not partial (206).
function isCacheable(response) {
  return (
    response &&
    response.status === 200 &&
    (response.type === 'basic' || response.type === 'cors')
  );
}

// Compile a route pattern to a matcher. Globs (with *) become RegExps;
// everything else is a substring test against the pathname (or full URL when
// the pattern includes a scheme).
function compileMatcher(pattern) {
  if (pattern.includes('*')) {
    const escaped = pattern.replace(/[.+?^${}()|[\]\\]/g, '\\$&').replace(/\*/g, '.*');
    const re = new RegExp('^' + escaped + '$');
    return (url) => re.test(url.pathname) || re.test(url.href);
  }
  if (pattern.includes('://')) {
    return (url) => url.href.includes(pattern);
  }
  return (url) => url.pathname.includes(pattern);
}

async function staleWhileRevalidate(request) {
  const cache = await caches.open(CACHE_NAME);
  const cached = await cache.match(request);
  const network = fetch(request)
    .then((response) => {
      if (isCacheable(response)) cache.put(request, response.clone());
      return response;
    })
    .catch(async () => {
    if (request.mode === 'navigate') {
      const fallback = await caches.match(OFFLINE_URL);
      if (fallback) return fallback;
    }
      return cached || Response.error();
    });
  return cached || network;
}

async function networkFirst(request) {
  const cache = await caches.open(CACHE_NAME);
  try {
    const response = await fetch(request);
    if (isCacheable(response)) cache.put(request, response.clone());
    return response;
  } catch (error) {
    const cached = await cache.match(request);
    if (cached) return cached;
    if (request.mode === 'navigate') {
      const fallback = await caches.match(OFFLINE_URL);
      if (fallback) return fallback;
    }
    throw error;
  }
}

async function cacheFirst(request) {
  const cache = await caches.open(CACHE_NAME);
  const cached = await cache.match(request);
  if (cached) return cached;
  try {
    const response = await fetch(request);
    if (isCacheable(response)) cache.put(request, response.clone());
    return response;
  } catch (error) {
    if (request.mode === 'navigate') {
      const fallback = await caches.match(OFFLINE_URL);
      if (fallback) return fallback;
    }
    throw error;
  }
}

// Ordered route table — the first matching rule handles the request.
const ROUTES = [
  { pattern: '/', handler: staleWhileRevalidate },
  { pattern: '/api/', handler: networkFirst },
  { pattern: '*.css', handler: cacheFirst },
  { pattern: '*.js', handler: cacheFirst },
  { pattern: '*.{png,jpg,jpeg,svg,webp,gif,ico}', handler: cacheFirst },
].map((route) => ({ match: compileMatcher(route.pattern), handler: route.handler }));

async function defaultHandler(request) {
  return networkFirst(request);
}

// ── Fetch: dispatch each request to its matching strategy ────────────────────
self.addEventListener('fetch', (event) => {
  const { request } = event;
  // Never intercept non-GET (POST/PUT/etc.) — let them hit the network.
  if (request.method !== 'GET') return;

  const url = new URL(request.url);
  const route = ROUTES.find((r) => r.match(url));
  event.respondWith((route ? route.handler : defaultHandler)(request));
});