2026 OpenClaw Frontend-Praxis:
Service-Worker-Lebenszyklus und Cache-Storage-Schlüssel auf Remote Mac parsen — PR-Summary zurückspielen
Zielgruppe: Teams mit Service Worker und Cache Storage, die jeden PR belegen müssen. Auf einem gemieteten Remote Mac mit WebKit spiegeln Sie Safari-Reviewer, fassen Lifecycle-Kanten in JSON und erzeugen per OpenClaw pr_sw_cache_summary.md. Enthalten: Matrix, Runbook, Skript-Platzhalter, NDJSON-Felder, Retries, FAQ zu Quota und opaque Responses. Mehr Policy: Safari-Abnahme, Deploy-Hook, Buildmetriken, Rspack-Worker; Preise, Hilfe, Kaufen.
01 Warum Remote Mac und strukturierte Artefakte
Service-Worker-Wahrheit braucht WebKit-Timing auf Apple-Silicon. Ein Remote Mac vermeidet Schlafmodi, gleicht DNS und TLS mit Staging ab und pinnt Playwright-WebKit. Kleine JSON-Dateien unter .openclaw/reports/$GIT_SHA/ teilen Fakten zwischen CI, Chat und GitHub statt Screenshots.
Lifecycle-Signale plus sortierte Cache-Schlüssel zeigen riskante Precache-Präfixe und hängende waiting-Instanzen ohne manuelles Raten.
02 Schmerzpunkte im Review
- Unsichtbare waiting-Instanzen: Nur der aktive Worker erscheint in Kommentaren, während Kundinnen weiter alte Shells bedienen, bis ein Reload erfolgt.
- Schlüssel-Churn ohne Semantik:
caches.keys()ändert sich pro Deploy, aber niemand dokumentiert, welche Präfixe gefahrlos gelöscht werden dürfen. - Chat-only-Debugging: Screenshots verfallen; Sie brauchen NDJSON-Zeilen mit
openclaw_run_idund Pfaden zu Trace-ZIP-Dateien.
03 Investitionsmatrix für Automatisierung
| Ansatz | Stärke | Schwäche | Einsatzempfehlung |
|---|---|---|---|
| Manueller Web Inspector | Tiefe Breakpoints und Speicher-UI | Schwer PR-übergreifend wiederholbar | Exploration und Einzelfall |
| Playwright-Probe-Seite | Skriptierbare Lifecycle- und Cache-Lesungen | Erfordert disziplinierte Wartezeiten | Standardpfad für OpenClaw |
| Kunden-RUM | Echte Nutzerabdeckung | Grob, datenschutzbeschränkt | Monitoring nach Merge |
Die Probe-Seite lohnt sich bei Änderungen an sw.js, Precache oder Navigations-Fetch. Schwellenbeispiele: höchstens zwölf Cache-Präfixe parallel, höchstens drei waiting-Ereignisse je Canary, zwei Browserfamilien im Abschlussbericht.
| Feld | Semantik | Pflicht |
|---|---|---|
schemaVersion / git_sha |
Parser-Vertrag plus Kurzcommit; Baselines bei Schema-Bump erneuern | ja |
addedKeys / removedKeys |
Lexikographisch sortierte Cache-Namen für stabile Diffs | ja |
lifecycleTimeline / quotaEstimateMb |
Ereignisse mit Zeitstempel; Speicher-Schätzung oder dokumentiertes null | empfohlen |
04 Reproduzierbares Runbook mit Besitzer-Schritten
- Runner reservieren: SSH zum Remote Mac, Arbeitsverzeichnis
~/openclaw-runs/$PR_NUMBER,BASE_URLauf die Preview-Origin setzen undGIT_SHAaus der CI-Umgebung übernehmen. - Browser einmal installieren:
npx playwright install webkitausführen, damit nachfolgende Probes dasselbe WebKit-Bündel nutzen und keine Überraschungs-Downloads entstehen. - Origin zweimal anwärmen: Zwei
curl- oderfetch-Aufrufe mit acht Sekunden Pause, danach Playwright starten, damitinstallundactivatedeterministischer auftreten. - Delta schreiben:
.openclaw/reports/sw_cache_delta.jsonerzeugen und gegenbaseline/sw_cache_baseline.jsonausmaindifferenzieren; Abweichungen im Markdown hervorheben. - Summary posten:
pr_sw_cache_summary.mdmitIdempotency-Key: $GIT_SHA:sw-cache:$PR_NUMBERposten; Trace-Pfade bei Fehlversuch in NDJSON, keine Secrets im Body.
Zahlen: fünf POST-Versuche max., zwei Warmups, eine Markdown-Datei je Commit und PR.
05 Skript- und Playwright-Platzhalter
scripts/openclaw/sw-cache-probe.mjs aus der OpenClaw-Task starten; Platzhalter kurz halten und Timeouts je App setzen.
// scripts/openclaw/sw-cache-probe.mjs (Platzhalter)
import { 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();
Shell: OPENCLAW_RUN_ID setzen und per tee -a .openclaw/reports/sw_probe.ndjson mitschreiben.
06 NDJSON-Logfelder und Retry-Regeln
Eine NDJSON-Zeile pro Versuch; Feldnamen wie im Deploy-Hook-Runner.
- ▸
ts,level,openclaw_run_id,git_sha,pr_number,phasemit den Wertenwarmup,probe,diffodercallback. - ▸
attempt,duration_ms,browsermitwebkitoderchromium,cache_key_count, boolescheswaiting_worker_present. - ▸
error_classaustimeout,quota,assertoderhttp, dazulast_http_statusundtrace_pathfür ZIP-Artefakte.
Retry: Lesepfade bei 502, 503, 429 oder TLS-Reset, Backoff ab zwei Sekunden, zwanzig Prozent Jitter, max. fünf Versuche. PR-Kommentare nur erneut senden, wenn der erste POST sicher nicht ankam.
07 Strukturierte Daten und interne Verlinkung
Kopf-application/ld+json: BlogPosting, BreadcrumbList, HowTo, FAQPage.
- Intern: Blog-Index und Deploy-Artikel bei Precache-Änderungen auf diesen Slug zeigen.
- Locales: gleicher Dateiname;
hreflangnur mit existierender HTML; stabile TOC-id.
08 FAQ: Quota und opaque Responses
| Symptom | Ursache | Gegenmaßnahme |
|---|---|---|
QuotaExceededError in cache.put |
Budget der Origin erschöpft oder zu viele große opaque Einträge | quotaEstimateMb loggen, Precache-Versionen begrenzen, alte RELEASE_ID-Präfixe vor Ende von activate kontrolliert entfernen |
| Opaque Responses im Precache | no-cors-Fetches ohne lesbare Metadaten |
opaqueEntryCountHint separat ausweisen, fremde Origins nicht aggressiv precachen, im Markdown auf CDN-Policy verweisen |
| Doppelte PR-Kommentare | Webhook-Feuern ohne Idempotenz | Upsert-Marker im Markdown oder eindeutiger Idempotency-Key aus SHA und PR-Nummer |
Safari kann storage.estimate verzögern — dann quotaEstimateMb=null mit kurzem Grundcode statt erfundener Zahlen.
Kombinieren Sie WebKit-Probes auf einem Remote Mac mit versioniertem sw_cache_delta.json, NDJSON-Logs und begrenzten Retries. OpenClaw liefert die PR-Summary, während Policies zu skipWaiting und clients.claim im verlinkten Safari-Leitfaden bleiben.
Service-Worker-Reviews mit echtem Safari absichern
Mieten Sie einen Mac Mini M4 für WebKit-Probes, Cache-Diffs und PR-Summaries ohne Laptop-Abhängigkeit. Preise und Kaufen bleiben ohne Login lesbar; Anleitungen in der Hilfe zu SSH und VNC unterstützen parallele QA-Zeiten.