2026 OpenClaw Frontend Practice:
Parse Service Worker Lifecycle & Cache Key Deltas on a Remote Mac, Then Ship a PR Summary

Service worker truth needs real WebKit timing on Apple hardware. A remote Mac matches reviewer stacks and stays awake while OpenClaw polls navigator.serviceWorker.

Emit small JSON under .openclaw/reports/ each pass so CI, chat, and GitHub share one fact base.

1. Invisible waiting workers: reviewers only see the active worker while customers sit on an older cache until refresh.
2. Key churn without semantics: caches.keys() changes every deploy but nobody records which prefixes are safe to delete.
3. Chat-only debugging: screenshots disappear; you need NDJSON plus artifact paths tied to GIT_SHA.

Pick the probe page whenever a PR touches sw.js, precache manifests, or routing tables. Pair it with the checklist article so skipWaiting and clients.claim policies stay explicit.

1. Reserve the runner: SSH to the remote Mac, cd ~/openclaw-runs/$PR_NUMBER, export BASE_URL to the preview host, and pin GIT_SHA.
2. Install browsers once: npx playwright install webkit so subsequent probes reuse the same WebKit bundle.
3. Warm twice: run a tiny shell probe that curls $BASE_URL, sleeps eight seconds, curls again, then launches Playwright so install and activate events can fire deterministically.
4. Emit deltas: write .openclaw/reports/sw_cache_delta.json with sorted addedKeys and removedKeys compared to baseline/sw_cache_baseline.json from main.
5. Ship the summary: render pr_sw_cache_summary.md and POST it through your gateway with Idempotency-Key: $GIT_SHA:sw-cache:$PR_NUMBER so flaky hooks do not duplicate comments.

Save the following as scripts/openclaw/sw-cache-probe.mjs and call it from your OpenClaw task file. It is intentionally minimal so you can swap selectors per app.

// scripts/openclaw/sw-cache-probe.mjs (placeholder)
import { chromium, webkit } from 'playwright';
const base = process.env.BASE_URL;
const browser = await webkit.launch();
const page = await browser.newPage();
await page.goto(base, { waitUntil: 'networkidle' });
const snapshot = await page.evaluate(async () => {
  const regs = await navigator.serviceWorker.getRegistrations();
  const keys = await caches.keys();
  return {
    registrations: regs.map(r => ({
      scope: r.scope,
      activeState: r.active?.state,
      waitingState: r.waiting?.state,
      installingState: r.installing?.state
    })),
    cacheKeys: keys.sort()
  };
});
console.log(JSON.stringify(snapshot));
await browser.close();

Wrap the Node call with a shell guard that exports OPENCLAW_RUN_ID and pipes stdout into tee -a .openclaw/reports/sw_probe.ndjson so failures still leave breadcrumbs.

Emit one NDJSON object per attempt. Use the same keys your Netlify hook runner already writes so dashboards stay uniform.

• ▸ts, level, openclaw_run_id, git_sha, pr_number, phase (warmup|probe|diff|callback).
• ▸attempt, duration_ms, browser (webkit|chromium), cache_key_count, waiting_worker_present boolean.
• ▸error_class (timeout|quota|assert|http), last_http_status, trace_path for Playwright artifacts.

Retry policy: retry read-only probes on 502, 503, 429, or TLS resets with exponential backoff starting at two seconds, jitter twenty percent, maximum five attempts. Never retry a GitHub comment POST unless the idempotency key proves the first attempt never reached the server.

Head JSON-LD includes BlogPosting, BreadcrumbList, HowTo, and FAQPage for rich results.

• In-links: mention this slug from the blog index and from deploy-hook posts when precache lists change.
• Locales: reuse the slug per language; publish hreflang only when translated HTML exists.
• Anchors: keep TOC id targets stable for audits.

Prefer same-origin or CORS-enabled assets when opaque volume breaks budgets.