Start with the boundary
Design service-worker offline behavior users can trust is easiest to get right when the boundary is named before the implementation begins. Decide which system owns the decision, which inputs are trusted, what the caller can observe, and what must remain private. That framing prevents a local optimization from quietly becoming an undocumented protocol.
Offline support is a consistency feature. A cached shell can make an app open while its data is stale, an old service worker can keep serving a broken bundle, and a queued mutation can surprise a user when connectivity returns. Define what remains useful offline, what is read-only, and which operations must never be replayed automatically.
Model the system before choosing a tool
Separate immutable assets, navigation shell, public content, private data, and mutations. Version caches and delete old entries during activation, but do not remove an active cache before the new worker is ready. Use network-first, cache-first, or stale-while-revalidate per resource class. Keep authentication and sensitive data out of shared caches.
Write the model down as a small state diagram or table before selecting a library. Identify the durable state, the derived state, and the transitions that may be retried. This makes it easier to compare a managed service with an in-process implementation and to explain why a particular trade-off is acceptable for this workload.
Design for failure, misuse, and change
A service worker can cache an error response, intercept an update request, or activate while a tab still runs an incompatible bundle. Queued mutations may be duplicated or applied after permissions change. Offline pages that claim freshness are misleading. Storage quota eviction is normal, so a cache cannot be the only durable copy.
A resilient design assumes that inputs are incomplete, dependencies are slow, operators make mistakes, and requirements will change. Put limits at the boundary, return errors that a caller can act on, and preserve enough context to distinguish a bad request from an unavailable dependency. Avoid broad fallbacks that make an unsafe state look successful.
Implementation example
Create a small offline contract with explicit states: fresh, cached, stale, unavailable, queued, and failed. Tag queued mutations with an idempotency key and replay only operations whose contract permits it. Show an update prompt when a new worker is waiting, and make the user action safe across multiple tabs. Keep a fallback document that does not require JavaScript.
Keep the first implementation narrow enough to review line by line. Make inputs, outputs, authorization context, and failure behavior explicit instead of hiding them behind a convenience helper. The example should be safe to run with synthetic data, emit a correlation identifier, and leave a durable artifact that another engineer can inspect after the request has finished.
cache_key = 'app-shell-v3'
serve_cached_shell()
if online: revalidate_and_prompt_for_update()Verify and troubleshoot
Test first load offline, update during navigation, cache eviction, quota errors, stale data, auth expiry, duplicate replay, clock changes, multiple tabs, and a service-worker rollback. Inspect cache contents and network requests in a production build. Verify a failed mutation is visible and recoverable rather than silently dropped.
Use a small test matrix that covers the ordinary path, an empty or missing input, a duplicate request, a timeout, a permission failure, and a version mismatch. Assert both the response and the side effects. When a test fails, compare the observed transition with the model rather than adding a retry or widening a timeout without evidence.
Operations and recovery
Monitor worker version, cache hit rate, update failures, queued mutation age, replay errors, and storage quota. Keep a kill switch that bypasses the worker for a bad release. During an incident, serve a known-good shell and disable mutation replay while preserving the queue for user review.
Give the operator a bounded recovery action: replay a safe event, rebuild a derived view, rotate a credential, drain a queue, or roll back a compatible revision. Record the owner, retention period, alert threshold, and rollback condition next to the implementation. A runbook is useful only when it can be followed without reconstructing the design from production logs.
A practical decision guide
For a small service, prefer the design with the fewest hidden states that still meets the frontend engineering requirement. Add a managed dependency when it removes a failure mode you can measure, not simply because it is popular. Keep the interface replaceable by isolating provider-specific code behind a narrow adapter and by testing the behavior your users depend on.
Revisit the decision when traffic shape, data sensitivity, team ownership, or recovery objectives change. A design that is excellent for a single tenant or a low-volume internal tool can be the wrong design for a public multi-tenant path. Record the assumptions so the next change starts with evidence rather than folklore.
An implementation checklist
Before publishing a change related to design service-worker offline behavior users can trust, write down the input contract, authorization context, state transitions, limits, and user-visible errors. Identify the smallest synthetic dataset that demonstrates the normal path and the smallest dataset that demonstrates the dangerous path. Add a correlation ID to the example, make retries deliberate, and decide which artifacts can be retained for support without copying secrets or unnecessary personal data. This checklist is deliberately boring: repeatable release evidence is more valuable than a clever demo.
Use a disposable environment to exercise the implementation with realistic concurrency and a dependency failure. Compare the observed result with the contract, then record the measured latency, resource use, and recovery action. If a managed service or library is involved, pin its version and capture the relevant configuration. Ship behind a reversible change when the behavior is new, and schedule a follow-up review after real traffic reveals assumptions that a test fixture could not.
References and further reading
Use the Service Worker, Cache Storage, Background Sync, and Workbox documentation where applicable. Document which resources can be stale, which mutations can replay, and how users recover from an update conflict.
Prefer primary protocol specifications, vendor security documentation, and measured behavior from a disposable environment. Read the failure and deprecation sections, not only the happy-path quick start. A short reference list attached to the code gives future maintainers a way to distinguish an intentional constraint from an accidental implementation detail.