Lesson 0005 · ~10 minutes

Deal-breakers & debugging

One skill: run a 60-second design-review scan — reject bad SW plans fast, and know which DevTools levers unstick “waiting / stale shell.”

← Lesson 4 Checklist Glossary
Win (do this, then stop)

Finish 4 quiz cards. You can kill a bad proposal in under a minute (wrong tool, stale forever, update lag, “use SW for CPU”).

You already know

1. Instant rejects (wrong tool)

They said… You say…
“Put the filter in a service worker” Dedicated worker — SW is not a CPU offload
“Ship SW on plain http:// prod” Needs secure context (HTTPS / localhost)
“Core checkout only works with SW” Progressive enhancement — SW optional
“SW instead of a CDN for static files” CDN/HTTP cache first; SW is optional complexity

Same map as Learn PWA · SW and your Web Workers track comparison.

2. Production landmines (you already met the mechanics)

  1. Stale shell forever — one eternal cache name, no activate cleanup. Users never leave v1 HTML/JS.
  2. Update lag — new SW waiting; one-tab refresh doesn’t free clients. Fix: close all tabs, or intentional skipWaiting + UX.
  3. Versioned SW filename — sw-v2.js while old SW serves old HTML that still registers sw-v1.js. Keep one URL; change bytes (lifecycle).
  4. Cache the wrong thing — cache-first on live balances / checkout. Use network-first or network-only for freshness-critical data (strategies: Cache API track).
  5. Two caches fighting — SW Cache Storage vs HTTP cache headers. Know both layers (SW + HTTP caching).
  6. No DOM in SW — can’t “just update React state” from the worker. Message the page if you need UI.

3. Debug levers (Chromium / Firefox Application tools)

Status

DevTools → Application → Service Workers: installing / waiting / activated, clients list (tools guide.

Update on reload

Dev-only: each navigation refetches SW, installs, skips wait — kills “stuck waiting” while coding.

Skip waiting

Button: promote waiting worker to active now.

Shift-reload

One load bypasses the SW (spec behavior) — check “is SW the bug?”

Network

Size column “(from ServiceWorker)” vs disk cache vs network — see who answered.

4. Workbox (awareness only)

Workbox = library sugar over these primitives (routing, strategies, precache manifests). If you can’t explain install/waiting/respondWith without it, the library will hide bugs — not remove them.

5. Quiz (4 cards — required work)

1 of 4

Design review: “We’ll run the multi-second image filter inside the service worker so the UI stays smooth.” Verdict?

2 of 4

Users keep getting last month’s app shell after deploy. install uses one cache name static forever; activate is empty. Best root cause?

3 of 4

Dev: new SW sits in “waiting” after every save. Fastest healthy habit?

4 of 4

Suspect the SW is serving a bad response. One-load way to bypass it?

6. Keep these four lines

  1. SW = network policy, not CPU.
  2. Version caches; clean on activate — or ship stale forever.
  3. Waiting + refresh trap is expected; plan updates.
  4. DevTools: Update on reload, skip waiting, shift-reload, Network size.
Ask your teacher A real “users stuck on old shell” postmortem, Safari quirks, or Workbox vs primitives — one question in chat.

Primary (optional, ~8 min)

web.dev — Tools and debug (PWA) for DevTools levers. Lifecycle update section if waiting still feels fuzzy.