What prevents a Service Worker from directly accessing the DOM?

Service Workers execute in a separate thread (Web Worker context) independent of the main thread where the DOM lives. They cannot access or manipulate DOM.

Why do Service Workers only work over HTTPS (excluding localhost)?

Service Workers intercept and control network requests. HTTPS prevents man-in-the-middle attacks from compromising this power. Localhost is exempted for development.

How does a Service Worker communicate data back to the main page thread?

Service Workers and pages run on separate threads, so they communicate asynchronously via postMessage. Direct access to window or DOM is impossible.

What is the main advantage of Service Workers being event-driven?

Event-driven design means service workers don't consume resources continuously. They activate only on fetch, push, sync, or other events, then sleep, saving battery and CPU.

Which lifecycle event fires when a Service Worker is first downloaded and parsed?

The install event fires after download and parsing. It's the right place to precache static assets like HTML, CSS, JS before activation.

Why would a new Service Worker enter the 'waiting' state instead of immediately activating?

A new SW waits if active clients (tabs/windows) are using the old version. This prevents breaking active sessions. Only on tab close or skipWaiting() does it activate.

What is the purpose of the activate event in the Service Worker lifecycle?

Activate fires after the new SW is ready. It's ideal for deleting old cache versions (v1, v2) and calling clients.claim() to take control immediately.

In the Service Worker lifecycle, when do fetch events start firing?

Fetch events fire after the SW is activated and controlling clients. This is when it can intercept and apply caching strategies to network requests.

What does caches.match(request) return if no matching response exists?

caches.match() returns a Promise. If found, it resolves to the Response; if not found, it resolves to undefined (not null or error).

Why must you call response.clone() before using a response in multiple places?

HTTP responses are streams. Once read (e.g., parsed as JSON), they're consumed. Cloning creates two independent streams: one for cache, one for client.

What is the difference between caches.match() and caches.open()?

match() is read-only: searches all caches for a matching request. open('name') returns a Cache object for writing/reading a named store.

Which resource type is cache-first strategy most suitable for?

Cache-first is best for immutable, versioned assets (app.v1.js, logo.png). Users get instant loads offline. Dynamic content needs network-first.

In cache-first strategy, what happens if a resource is in cache but outdated (e.g., old CSS with a bug)?

Cache-first returns immediately without checking network. The only way to update is versioning filenames (app.v2.js) or manually clearing caches.

Why is an 'app shell' architecture combined with cache-first strategy?

App shell = cached HTML/CSS/JS skeleton. Loaded instantly offline via cache-first. Dynamic data fetched separately (network-first), avoiding complete load failures.

In network-first strategy, what happens if the network request times out?

Network-first catches network errors (no connection, timeout). If no cached response exists, it serves a fallback (often /offline.html).

Which use case is best served by network-first strategy?

Network-first prioritizes freshness (critical for user data, comments, transactions) while keeping offline fallback for resilience.

Why cache a successful network response in network-first strategy?

Caching successful responses creates a fallback for offline scenarios. If user loses connection, cached data is better than nothing.

What is the main user-facing benefit of stale-while-revalidate strategy?

SWR trades showing potentially stale data now for instant response + fresh data next visit. Balances speed and freshness better than either strategy alone.

In stale-while-revalidate, when is the cached response returned to the user?

SWR returns cached response immediately (or undefined if no cache) while fetch continues in background. User sees instant UI update.

Which content type benefits most from stale-while-revalidate?

SWR works best for content where slight staleness is acceptable: news, social feeds, product photos. Not suitable for financial/security data needing strict freshness.

Why does a new Service Worker enter waiting state instead of immediately activating?

Waiting prevents a new SW from instantly changing behavior mid-session. Users filling forms or watching videos won't suddenly have their requests intercepted differently.

What does skipWaiting() do in a Service Worker?

skipWaiting() transitions a waiting SW to active immediately. Risky if breaking changes exist, but useful for bug fixes that must deploy urgently.

What is the purpose of clients.claim() in the activate event?

clients.claim() makes the new SW start intercepting requests for existing pages immediately, instead of only controlling new pages. Use carefully with version safety checks.

How can a page notify a waiting Service Worker to activate?

Page detects waiting state via controllerchange listener. User clicks 'Update' → page sends postMessage → SW calls skipWaiting() → reload applied.

What risk exists when calling skipWaiting() immediately without user confirmation?

skipWaiting() mid-session can cause incompatibility: new SW expects different data format, or old page sends requests new SW doesn't handle. Major bugs demand user control.

What is the fundamental principle of offline-first PWA architecture?

Offline-first inverts the model: read/write locally immediately (fast, works offline), then sync server in background. User never blocked by network latency.

Which browser API is most commonly used for persistent local state in offline-first PWAs?

IndexedDB is purpose-built for offline apps: transactions, indexes, large capacity. LocalStorage limited to 5-10MB and simpler. Cache API for HTTP responses only.

What is a sync queue in offline-first architecture?

Sync queue stores pending mutations (POST, PUT, DELETE) with timestamps. When online, SW's background sync processes them in order, retrying failures.

How does Background Sync API enable offline mutations in PWAs?

Background Sync (when available) offers more reliable retry than polling. If device restarts offline, syncs resume after reconnect. Fallback: periodic polling in fetch events.

What is a major conflict-resolution challenge in offline-first apps?

If user edits offline and server changes same record, sync must resolve: overwrite (last-write-wins), merge fields (CRDTs), or prompt user. No one-size-fits-all solution.

Why is showing an 'offline' indicator important in offline-first PWAs?

Users expect instant feedback and fresh data. Offline indicator sets expectations: 'This action is saved locally, will sync when online.' Reduces confusion and support load.

What is a cache miss in the context of Service Workers?

Cache miss = caches.match() returns undefined. Common for first visits or new resources. Strategy dictates next step: fetch network, return offline.html, error response, etc.

Which caching strategy would you use for images on an e-commerce product page?

Product images are stable but occasional updates matter. Cache-first instant-loads with fallback manual refresh, or SWR background-refreshes for semi-fresh data.

What is a critical limitation of using network-first for all requests?

Network-first forces users to wait for network even for static assets. On 4G or congested networks, this causes slow perceived load. Hybrid strategies (mix cache + network) better.

In stale-while-revalidate, where is the fresh data from the background fetch stored?

Background fetch updates cache via cache.put(). User sees stale data now, but next visit or next request to same resource gets the fresh data.

Which lifecycle event is the correct place to precache critical app assets (HTML, CSS, JS)?

Precache in install ensures assets are available before activate completes. If done in fetch, first visit won't be cached. Activate is too late.

When using event.waitUntil() in the install event, what does it guarantee?

waitUntil() delays state transition. Without it, install could complete before caches.open() finishes. Critical for precache reliability.

How can you force users to get a new version of a cache-first asset?

Cache-first checks URL exactly. If HTML always requests app.v1.js, it stays cached forever. Only way: rename to app.v2.js, which cache-first treats as new resource.

What strategy safely updates a Service Worker with breaking API changes?

Breaking changes require user control to avoid mid-session crashes. Page waits for user confirmation before triggering skipWaiting() and reload.

What happens in an offline-first app if the same record is modified offline and on the server?

Offline-first creates potential conflicts. Each app must decide: which version wins? Modern approaches use CRDTs (Yjs, Automerge) for automatic sensible merges.

Service Workers — System Design Concept

📚Service WorkersPro

10 sections

~27 min total

40 quick quizzes

3 SD challenges linked

0 of 10 done·~27 min left

Concepts›Service Workers›What Is a Service Worker?

0 / 10

10 sections~27 min

What Is a Service Worker?

JavaScript running separately from main thread, intercepting network requests and managing caches

ReadQuiz

~3 min

⋯

Install, Activate, Fetch Event Lifecycle

Three-phase lifecycle: register → install (cache assets) → activate (cleanup) → fetch (intercept requests)

ReadQuizCode

~3 min

⋯

Cache API Strategies

Three approaches to caching: cache-first, network-first, and stale-while-revalidate for different use cases

ReadQuizCode

~3 min

⋯

Cache-First Strategy

Check cache first, return if found; otherwise fetch network and cache for static assets

ReadQuizCode

~3 min

⋯

Network-First Strategy

Try network first for fresh data; fallback to cache if offline for API and user-specific content

ReadQuizCode

~3 min

⋯

Stale-While-Revalidate Strategy

Return cached response immediately while fetching network update in background for best-of-both speed and freshness

ReadQuizCode

~3 min

⋯

Updating Service Workers Without Breaking Active Sessions

Strategies to deploy new service worker versions without disrupting users already using the app

ReadQuizCode

~3 min

⋯

Offline-First PWA Architecture

Application design prioritizing local-first operation with background sync when connectivity returns

ReadQuiz

~3 min

⋯

Relevant System Design Questions

Real-world scenarios applying service worker concepts to practical PWA implementation challenges

Read

~3 min

⋯

Practice test

40 questions

~14 min

🔒

Pro content

Service Workers is a Pro concept. Upgrade to access full content, practice questions, and design challenges.

Upgrade to Pro →

Notes

🔍

Loading…