跳到正文
DEV Community· Jamie Lee·· 3 小時前AI 評分50

Service worker 更新面試:以等待與相容四格卡取代無條件 skipWaiting() 和清除所有快取

Service-worker interviews punish unconditional skipWaiting and wipe-all caches — you need a waiting + compatibility card

AI 導讀

文章提出應對 service worker 更新面試的四格答題卡,依次説明生命週期等待、資產相容、採用方式,以及回滾與觀察。面對長時間開啟的分頁,應保留舊版雜湊資產,預設等待並提示刷新,接受後才受控地呼叫 skipWaiting(),再以一次 controllerchange 重新載入。

正文

TL;DR: When a PWA ship leaves users with ChunkLoadError (deployed worker update + asset consistency—not SSR hydration, WS reconnect, optimistic fold, a11y, bug-bash, or teammate PR), the round scores update-policy ownership, not a lucky skipWaiting(). Durable habit: live-listen hashed assets / open-tab unsaved state / API dual-version tolerance → pin a speakable four-box card on a desktop live overlay (lifecycle wait · asset compatibility · adoption · rollback+observe) → own update policy and spoken verify matrix. Optional Application→Service Workers / ChunkLoadError shot only to anchor evidence. LIVE desktop overlay only when BYOE is allowed—ask the recruiter first.


Why a newly installed worker waits — and what unconditional skipWaiting breaks

A service-worker update interview is not a “force the new worker now” trivia quiz. Interviewers watch whether you keep waiting until it is safe to adopt, name which assets stay compatible, and prove rollback—while unconditional skipWaiting(), wipe-all-caches on activate, renaming the worker URL to force update, or testing only a fresh tab only “works” for one quiet ship.

Official guidance agrees. web.dev’s service worker lifecycle explains why a newly installed worker waits while old clients stay open, and warns that skipWaiting() is not a free refresh. Chrome Workbox — handling service worker updates centers a waiting prompt, messageSkipWaiting, and a controlling reload. PracHub (2026-09-15) covers the two-tab timeline, skipWaiting ≠ page reload, and cache retention. InterviewLane is secondary PWA/SW intro.

What still needs a person after “I’ll just skipWaiting() and delete every cache”?

  • Lifecycle wait — installed / waiting / activating / controlling; which clients still hold the old worker.
  • Asset compatibility — content-hashed chunks; which previous assets stay fetchable while old tabs live.
  • Adoption — default wait · prompt · controlled skipWaiting · single controllerchange reload.
  • Rollback + observe — worker version, asset 404, ChunkLoadError, no-op worker, retain previous assets.

Unconditional skipWaiting while an old page holds unsaved state—or still expects hashed chunks you just wiped—is the process fail SW-update rounds punish.

Real product overlay: four-box lifecycle wait, asset compatibility, adoption, and rollback-observe


Concrete beat: unconditional skipWaiting / wipe caches / rename URL / fresh-tab-only → process fail

Suppose the interviewer shares a PWA sandbox:

“After yesterday’s ship, users hit ChunkLoadError on long-lived tabs. Design a safe service-worker update. Show waiting, adoption, and rollback.”

Without an update-policy beat, openings score differently:

Opening move What it optimizes for How it silently fails the round
Unconditional skipWaiting + clients.claim Looks “always fresh” early Old tabs lose unsaved state; page may still expect deleted hashed chunks
Wipe every cache on activate / rename worker URL Feels decisive under pressure Breaks open-tab asset continuity; rename-to-force skips the waiting contract
Speak lifecycle wait → asset compatibility → adoption → rollback+observe Shows deployed-worker + asset ownership Matches web.dev / Workbox / PracHub

Three openings: unconditional skipWaiting, wipe-or-rename, and a speakable waiting plus compatibility card

Why force-update openings score worse: a lucky fresh tab while another holds draft state, or a wipe that 404s hashed chunks the old controller still requests, ships a “knows skipWaiting, skips compatibility” signal. Paraphrasing product-truth anti-patterns only (not reprinting any encyclopedia body): unconditional skipWaiting, wipe-all-caches on activate, rename-worker-URL to force update, and fresh-tab-only tests break once long-lived tabs or dual-version APIs appear. Naming “content-hashed? Unsaved open tabs? API dual-version? Safe refresh prompt?” beats a force-update dump. Paste-ready teleprompter / pass-the-round-for-you products pull candidates off that path. Narrow X heat ~0/7d; do not invent virality.

OfferCC’s SW-update question (safely update a service worker, 2026-07-21 / updated 2026-09-01) is product-truth foil—not an encyclopedia to paste. The differential here is LIVE listen + four-box speakable card the candidate owns.


Four-box speakable SW-update card + ~20–30s speak-aloud

When policy allows a desktop live overlay, the useful surface is a four-box speakable SW-update card, not a paste-ready “always skipWaiting + wipe caches” dump.

Box One-line prompt Example after “ChunkLoadError on long-lived tabs after ship”
1. Lifecycle wait Who waits; which clients still control? “New worker installed and waiting; Tab A still controlled by v12; do not activate until safe.”
2. Asset compatibility What stays fetchable across versions? “Content-hashed chunks; keep previous asset set until old tabs close or reload; no wipe-all on activate.”
3. Adoption Wait, prompt, or controlled skipWaiting? “Default wait; prompt ‘Refresh to update’; on accept → controlled skipWaiting + one controllerchange reload.”
4. Rollback + observe How do you prove and reverse a bad ship? “Watch worker version, asset 404, ChunkLoadError; ship no-op worker; retain previous assets for rollback window.”

Four-box speakable service-worker update card: lifecycle wait, asset compatibility, adoption, rollback plus observe

Leave off the card: a teleprompter essay the candidate never owns. Scope: deployed worker update + asset consistency—not Canva, mid-pad progressive, SQL grain, virtualized list, feature-flag, payment idempotency, offline-first sync, drag-drop a11y, image LCP, progressive-delivery, incident, or SD ledger.

Speak (~20–30s):

“Wait: v13 installed, waiting; open tabs still on v12. Compat: retain previous hashed chunks while old clients live; never wipe-all on activate. Adoption: default wait; prompt refresh; on accept, controlled skipWaiting + one controllerchange reload. Rollback+observe: monitor worker version, asset 404, ChunkLoadError; retain previous assets; no-op worker if needed. Verify: two-tab timeline, unsaved form survives wait, dual-version API, skip only after prompt.”


Ritual: hear hash / open-tab / unsaved / API-compat → pin → adoption → optional shot → speak rollback+observe

Use this when external / BYOE tools are in scope, or with voice and a notepad alone.

  1. Hear hash / open-tab / unsaved / API-compat (≈10–20s) — Live-listen: content-hashed? Long-lived tabs with unsaved state? API dual-version? Safe refresh prompt allowed?
  2. Pin the card (≈20–30s) — On the desktop live overlay, fill lifecycle wait · asset compatibility · adoption · rollback+observe—one speakable line each.
  3. Name asset compatibility, then adoption — What previous assets must stay fetchable; then default wait · prompt · controlled skipWaiting · single controllerchange reload.
  4. Optional Application→Service Workers / ChunkLoadError screenshot — Capture only when needed to anchor evidence. Skip when live-listen already names the boundary.
  5. Speak rollback + observe the candidate owns — Worker version; asset 404; ChunkLoadError; no-op worker; retain previous assets. Overlay = checklist, not teleprompter.

When screenshot helps vs live-listen alone: Prefer live-listen when clarifying questions already lock hashed assets, open tabs, unsaved state, API dual-version, or a safe refresh prompt. Prefer a bounded shot when evidence is visual—Application→Service Workers waiting worker, ChunkLoadError, or Network 404 on a hashed chunk. The shot anchors evidence; it does not replace the four boxes.


Closing: six contrasts, hard policy gate, OfferCC allow-list, checklist

Contrast vs JUST PASS’d SSR hydration (do not merge the essays): Hydration Soft scores mismatch class · evidence stage · repair hatch · verify matrix—SSR first-render contract. This piece is different: deployed worker update + asset consistency—lifecycle wait · asset compatibility · adoption · rollback+observe. Do not swap hydration evidence stages for waiting-worker + hashed-chunk ownership.

Contrast vs JUST PASS’d WS reconnect (do not merge the essays): WebSocket Soft scores connection · backoff + jitter · resume cursor · stop/UX—transport recovery. This piece is different: worker lifecycle waiting, open-tab asset continuity, and controlled adoption after a ship. Do not swap socket generation for SW update-policy ownership.

Contrast vs JUST PASS’d optimistic reconcile (do not merge the essays): Optimistic Soft scores confirmed · pending · conflict · reconcile—an asynchronous mutation fold. This piece is different: keeping old/new client assets compatible across a waiting worker, then proving rollback. Do not swap mutation fold for deployed-worker + asset ownership.

Contrast vs JUST PASS’d a11y verify (do not merge the essays): A11y Soft scores finding · impact · verification · native-first fix—keyboard / AT / state paths. This piece is different: lifecycle wait, asset compatibility, and adoption prompts under a PWA ship. Do not swap WCAG verify for SW update-policy ownership.

Contrast vs JUST PASS’d bugbash layer (do not merge the essays): Bugbash Soft scores expected/actual · layer · hypothesis · probe—already-broken functional debugging. This piece is different: designing a safe update policy before or while ChunkLoadError hits long-lived tabs. Do not swap layer localization for waiting + compatibility ownership.

Contrast vs JUST Publish PR severity (do not merge the essays): PR-severity Soft scores intent · P0 · skip-Nit · comment shape—teammate PR judgment. This piece is different: the candidate must own the update policy and speak adoption + rollback+observe. Do not swap merge-blocker triage for SW update-contract ownership.

Hard policy gate. Default: ask the recruiter. Silence, “platform tools only,” or an explicit no-external-AI line means leave personal desktop assistants out.

Checklist:

  1. Confirm tool policy—invite text first; recruiter if vague.
  2. Practice: hear hash / open-tab / unsaved / API-compat → four-box → say wait/compat/adoption/rollback → optional SW / ChunkLoadError shot → own update policy + spoken verify matrix.
  3. Keep overlay speakable; never a “we pass the SW-update round for you” teleprompter.
  4. Lock hashed assets and open-tab / unsaved boundary before unconditional skipWaiting dumps.
  5. Screenshot → evidence anchor only after spoken lifecycle wait and asset compatibility.
  6. Do not mix with Canva, mid-pad progressive, SQL grain, virtualized list, feature-flag, payment idempotency, offline-first sync, drag-drop a11y, image LCP, progressive-delivery, incident, or SD ledger.
  7. Do not use external assistants in banned, platform-only, or unclear proctored / OA rounds.

Banned externals / platform-only tools — can you use OfferCC? Default: ask the recruiter. If bring-your-own tools are not allowed, do not use this stack.

Where BYOE / AI collaboration is explicitly allowed, LIVE desktop overlay tools—such as OfferCC—fit the ritual: live-listen hash / open-tab / unsaved / API-compat asks, pin the four-box card, say it aloud, optionally screenshot Application→Service Workers / ChunkLoadError to anchor evidence, then support while the candidate owns the update policy and spoken verify matrix. Contrast vs teleprompter / pass-the-round-for-you products: speakable SW-update contract the candidate owns. Product truth: OfferCC coding interview assistant—voice listen, screenshot → approach + code, SD/behavioral, desktop live overlay. Policy-allows only.


Sources

  1. OfferCC — Safely update a service worker (2026-07-21 / updated 2026-09-01; product-truth foil only; not an encyclopedia reprint)
  2. PracHub — Service worker interview questions: lifecycle, cache updates, offline failures (2026-09-15; two-tab timeline; skipWaiting≠page reload; cache retention)
  3. web.dev — The service worker lifecycle (official waiting / skipWaiting warnings)
  4. Chrome Developers — Handling service worker updates (Workbox) (waiting prompt · messageSkipWaiting · controlling reload)
  5. InterviewLane — What are service workers and how do they enable PWAs? (PWA/SW intro; secondary)
  6. OfferCC — Coding interview assistant (product truth)

EN Soft · Dev.to next-day alternate · SW-update speakable overlay · Edit PASS 2026-11-04

來源:DEV Community · dev.to