Service Workers + Offline Caching (Interview-Ready Guide)

Service Workers come up in interviews because they test whether you understand modern web capabilities beyond React.

This post covers what you need to explain confidently.

30‑second interview answer

A Service Worker is a background script that can intercept network requests and manage caching for offline support. Key concepts: lifecycle (install → activate), caching strategies (cache-first, network-first, stale-while-revalidate), and careful cache invalidation/versioning. The biggest pitfalls are stale caches and update/activation confusion.

Key points

• Service workers are event-driven and run separate from the page.
• Updates require new SW to install and activate.
• Choose strategy per route (static assets vs API).
• Version caches and clean up old caches.

1) What is a Service Worker?

A Service Worker is a script that:

• runs in the background
• can intercept network requests
• can cache responses
• can enable offline support

It’s event-driven and separate from your web page.

2) Lifecycle (most important interview piece)

1. Register from the page
2. Install (precache assets)
3. Activate (cleanup old caches)
4. Fetch events (intercept requests)

Because of this lifecycle:

• you can have an “old” SW controlling the page until reload

3) Basic registration

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js');
}

4) Caching strategies (interview gold)

A) Cache-first

• great for static assets
• fast

B) Network-first

• great for fresh content
• fallback to cache when offline

C) Stale-while-revalidate

• return cache immediately
• fetch in background and update cache

This is a common “best of both worlds” strategy.

5) Cache storage

Service Workers use the Cache Storage API.

Pseudo:

• open a cache
• put responses
• match requests

6) Common pitfalls

A) Caching everything blindly

You can accidentally cache:

• auth responses
• user-specific content

B) Updates not showing

Because the SW lifecycle requires activation and page reload.

C) Hard-to-debug

DevTools has:

• Application → Service Workers
• “Update on reload” option

7) Interview Q&A

Q: Difference between service worker cache and browser cache?

• SW cache is programmable (you choose what to cache and when).

Q: Why is stale-while-revalidate popular?

• fast UI from cache + background freshness.

Q: What does activate event do?

• cleanup old caches and take control.

Summary checklist

• I can describe the SW lifecycle.
• I can name caching strategies.
• I know how to version/cleanup caches.
• I can explain common stale-cache pitfalls.

Summary

• Service workers intercept requests and enable offline.
• Lifecycle matters: install → activate → fetch.
• Know caching strategies and when to use them.
• Be careful caching user-specific data.