Debugging

Panel Layout (Chrome DevTools):
  Application
    ├── Service Workers
    │     ├── Registration: swoff/sw-v1.0.0.js (scope: /)
    │     ├── Status: activated and is running
    │     ├── Clients: 1 tab controlling
    │     └── Update on reload: ☑
    ├── Cache Storage
    │     ├── swoff-runtime
    │     │     ├── /api/todos  (tagged: todos)
    │     │     ├── /api/users  (tagged: users)
    │     │     └── ...
    │     └── sw-v1.0.0 (install cache)
    │           ├── /
    │           ├── /index.html
    │           ├── /assets/index-*.js
    │           └── ...
    └── IndexedDB
          ├── swoff-cache-tags
          │     └── tags
          │           ├── { url: "/api/todos", tags: ["todos"] }
          │           └── { url: "/api/users", tags: ["users"] }
          └── swoff-queue
                └── mutations
                      └── { id, method, url, retryCount, ... }

// In your app, listen for all SW messages:
navigator.serviceWorker.addEventListener("message", (event) => {
  console.log("[SW → Client]", event.data);
});

// In the SW, log all received messages:
self.addEventListener("message", (event) => {
  console.log("[Client → SW]", event.data);
  // ... existing handlers ...
});

Cache Storage > swoff-runtime
  ├── /api/todos                   → Response (JSON)
  ├── /api/todos/42                → Response (JSON)
  └── /api/users/me                → Response (JSON)

// In DevTools console:
async function debugInvalidation(tag) {
  const cache = await caches.open("swoff-runtime");
  const keys = await cache.keys();
  console.log("Cache entries before invalidation:", keys.map(r => r.url));

  invalidateByTag(tag);

  setTimeout(async () => {
    const keysAfter = await cache.keys();
    console.log("Cache entries after invalidation:", keysAfter.map(r => r.url));
  }, 100);
}

debugInvalidation("todos");

// Delete a specific cached entry and refetch:
async function refetchUrl(url) {
  const cache = await caches.open("swoff-runtime");
  await cache.delete(url);
  const fresh = await fetch(url, {
    headers: { "X-SW-Cache-Strategy": "read" },
  });
  console.log("Refetched:", await fresh.clone().json());
}

refetchUrl("/api/todos");

IndexedDB > swoff-queue > mutations
  ┌──────────────┬──────────┬──────────────────────┬──────────────────┐
  │ id           │ method   │ url                  │ retryCount       │
  ├──────────────┼──────────┼──────────────────────┼──────────────────┤
  │ abc-123-def  │ POST     │ /api/todos           │ 2                │
  │ ghi-789-jkl  │ PUT      │ /api/todos/42        │ 0                │
  └──────────────┴──────────┴──────────────────────┴──────────────────┘

// Skip a stuck mutation by deleting it directly:
const db = await new Promise((resolve, reject) => {
  const req = indexedDB.open("swoff-queue");
  req.onsuccess = () => resolve(req.result);
  req.onerror = () => reject(req.error);
});
const tx = db.transaction("mutations", "readwrite");
tx.objectStore("mutations").delete("abc-123-def");

// Clear all pending mutations (dev only):
tx.objectStore("mutations").clear();

IndexedDB > swoff-cache-tags > tags
  ┌─────────────────────┬─────────────────────┐
  │ url                 │ tags                │
  ├─────────────────────┼─────────────────────┤
  │ /api/todos          │ ["todos"]           │
  │ /api/todos/42       │ ["todos", "todo:42"]│
  │ /api/users/me       │ ["users"]           │
  └─────────────────────┴─────────────────────┘

Request headers for GET /api/todos:
  X-SW-Cache-Strategy: read          ← present for reads
  X-SW-Cache-Tags: todos             ← present when tags option passed
  X-SW-Stale: true                   ← present when staleWhileRevalidate: true

Request headers for POST /api/todos:
  X-SW-Cache-Strategy: mutation      ← present for mutations (or absent, defaults to mutation)
  X-SW-Cache-Tags: (not sent)        ← absent for mutations

// Log a marker in the Network tab for each fetch strategy:
export async function fetchWithCache(input, options = {}) {
  // ... existing code ...

  const response = await fetch(input, { ...options, headers });

  // Clone once to inspect
  const clone = response.clone();

  if (options.staleWhileRevalidate) {
    console.log(`[Cache Strategy] stale-while-revalidate for ${url}`);
  } else {
    console.log(`[Cache Strategy] cache-first for ${url}`);
  }

  return response;
}

// App.js — log all SW → client messages
if (navigator.serviceWorker) {
  navigator.serviceWorker.addEventListener("message", (event) => {
    const { type, tag } = event.data;
    if (type === "TAG_INVALIDATED") {
      console.log(`[Cross-Tab Sync] Cache invalidated for tag: "${tag}"`);
    }
    if (type === "SW_PROGRESS") {
      const { percent, downloaded, total } = event.data;
      console.log(`[SW Install] ${downloaded}/${total} (${percent}%)`);
    }
  });
}

addTodo() → invalidateByTag("todos")
    ↓                        ↑
postMessage(INVALIDATE_TAG)  dispatchEvent("cache-invalidated")
    ↓                        ↑
 ┌──────────────────────┐    │
 │ Service Worker       │    │
 │                      │    │
 │ 1. findByTag("todos")│    │
 │ 2. delete from cache │    │
 │ 3. post to ALL tabs  │────┘
 │    TAG_INVALIDATED   │
 └──────────────────────┘

// Robust cross-tab sync initialization:
function initCrossTabSync() {
  function setup() {
    if (!navigator.serviceWorker?.controller) return false;
    navigator.serviceWorker.addEventListener("message", (event) => {
      if (event.data.type === "TAG_INVALIDATED" && event.data.tag) {
        window.dispatchEvent(
          new CustomEvent("cache-invalidated", {
            detail: { tags: [event.data.tag] },
          }),
        );
      }
    });
    return true;
  }

  if (!setup()) {
    navigator.serviceWorker?.ready.then(() => setup());
  }
}

// Check SW registration
const reg = await navigator.serviceWorker.ready;
console.log("SW scope:", reg.scope, "| Active:", !!reg.active);

// List cache entries
const cache = await caches.open("swoff-runtime");
const keys = await cache.keys();
console.log("Cached URLs:", keys.map(r => r.url));

// Count pending mutations
const db = await new Promise((r, rej) => {
  const req = indexedDB.open("swoff-queue");
  req.onsuccess = () => r(req.result);
  req.onerror = () => rej(req.error);
});
const count = await new Promise((r, rej) => {
  const req = db.transaction("mutations").objectStore("mutations").count();
  req.onsuccess = () => r(req.result);
  req.onerror = () => rej(req.error);
});
console.log("Pending mutations:", count);

// Manually trigger a sync
window.dispatchEvent(new Event("online"));

// Check cross-tab sync setup
console.log("Cross-tab sync active:",
  navigator.serviceWorker?.onmessage !== null);