What is a Service Worker?
Learn what a service worker is, its install/activate/fetch lifecycle, and how it enables offline support and caching in web apps.
Expected Interview Answer
A service worker is a background JavaScript script the browser runs separately from the page, letting it intercept network requests, cache responses, and enable offline access or push notifications.
Registered by a web page, a service worker runs on its own thread with no DOM access and persists independently of any open tab. Once activated, it sits between the page and the network as a programmable proxy: it can intercept fetch events, serve cached responses when offline, and update caches in the background. Because it can outlive the page, it also enables push notifications and background sync. Service workers are a core building block of Progressive Web Apps, and they require HTTPS since they have such deep control over network traffic.
- Enables offline-first experiences via the Cache API
- Speeds up repeat visits by serving cached assets instantly
- Powers push notifications and background sync
- Runs independently of the page, surviving tab closure for background tasks
AI Mentor Explanation
A service worker is like a groundstaff crew that keeps working on the pitch even after the players and spectators have left the stadium. They intercept problems before the next match — patching worn turf, storing covers — without needing anyone actively watching. If rain threatens, they can pull out the stored covers immediately rather than waiting for instructions. That independent, background, intercept-and-serve-from-storage role is exactly what a service worker does for network requests.
Step-by-Step Explanation
Step 1
Register the service worker
The page calls navigator.serviceWorker.register() pointing to a worker script.
Step 2
Install and cache assets
On the install event, the worker pre-caches critical assets via the Cache API.
Step 3
Activate and take control
On activate, old caches are cleaned up and the worker starts controlling page requests.
Step 4
Intercept fetch events
The worker intercepts network requests, serving from cache or falling back to the network.
What Interviewer Expects
- Understanding that service workers run separately from the page with no DOM access
- Knowledge of the install/activate/fetch lifecycle
- Mention of the Cache API and offline support
- Awareness of the HTTPS requirement and PWA relevance
Common Mistakes
- Confusing service workers with web workers (service workers intercept network requests; web workers do not)
- Forgetting that service workers require HTTPS (except on localhost)
- Not versioning caches, causing stale assets to be served indefinitely
- Assuming the service worker has access to the DOM
Best Answer (HR Friendly)
“A service worker is a small script that runs in the background of a website, even when the page is not open, so it can cache files and let the app work offline or send push notifications. It is what makes a website able to load instantly and function without an internet connection.”
Code Example
// main.js
if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("/sw.js");
}
// sw.js
const CACHE_NAME = "app-cache-v1";
const ASSETS = ["/", "/styles.css", "/app.js"];
self.addEventListener("install", (event) => {
event.waitUntil(
caches.open(CACHE_NAME).then((cache) => cache.addAll(ASSETS))
);
});
self.addEventListener("fetch", (event) => {
event.respondWith(
caches.match(event.request).then((cached) => cached || fetch(event.request))
);
});Follow-up Questions
- What is the difference between a service worker and a web worker?
- How does the Cache API differ from the browser’s HTTP cache?
- How would you handle updating a service worker without breaking active users?
- What role do service workers play in Progressive Web Apps?
MCQ Practice
1. What can a service worker NOT directly access?
Service workers run on a separate thread and have no direct access to the page’s DOM.
2. Which lifecycle event is used to pre-cache critical assets?
The install event is where a service worker typically opens a cache and adds critical assets.
3. Service workers require which protocol in production (excluding localhost)?
Because service workers can intercept all network traffic, browsers require HTTPS for security.
Flash Cards
What is a service worker? — A background script that intercepts network requests and can cache responses for offline use.
Does a service worker have DOM access? — No, it runs on a separate thread with no direct DOM access.
What API does a service worker use to cache assets? — The Cache API.
What protocol do service workers require? — HTTPS (except on localhost).