JavaScript Notes

Service Workers in JavaScript — Offline, Caching & PWA Guide

Master JavaScript Service Workers for offline support, caching strategies, push notifications, and PWA features. Learn install/activate/fetch lifecycle with real examples and interview Q&A.

A Service Worker is a JavaScript file that runs in its own background thread — separate from the page — acting as a programmable network proxy. It can intercept every network request, serve cached responses, handle push messages, and sync data in the background. Service Workers are the backbone of Progressive Web Apps (PWAs).

💡 Requirements: Service Workers require HTTPS (or localhost) and are scoped to the directory they are placed in. They run in a separate thread with no DOM access.

Service Worker Lifecycle

Example

navigator.serviceWorker.register('/sw.js') │ ▼ Downloading │ ▼ INSTALLING ← "install" event fires │ ┌──────┴──────┐ │ │ First install New version │ │ ▼ ▼ WAITING (waits for old SW to release) │ ▼ ACTIVATING ← "activate" event fires │ ▼ ACTIVATED ← controls all pages in scope │ ▼ (on every network request) FETCH event

Registering a Service Worker

js example

// In your main page script (app.js)
async function registerSW() {
  if (!("serviceWorker" in navigator)) {
    console.warn("Service Workers not supported");
    return;
  }

  try {
    const registration = await navigator.serviceWorker.register("/sw.js", {
      scope: "/"  // controls requests under this path
    });
    console.log("SW registered:", registration.scope);
  } catch (error) {
    console.error("SW registration failed:", error);
  }
}

registerSW();

Output

"SW registered: https://example.com/"

The Service Worker File (sw.js)

Install Event — Pre-cache Assets

Example

const CACHE_NAME = "v1-static-cache"; const ASSETS_TO_CACHE = [ "/", "/index.html", "/styles.css", "/app.js", "/icons/logo.png", "/offline.html" ]; self.addEventListener("install", (event) => { console.log("[SW] Installing..."); event.waitUntil( caches.open(CACHE_NAME).then((cache) => { console.log("[SW] Pre-caching assets"); return cache.addAll(ASSETS_TO_CACHE); }) ); // Activate immediately (skip waiting phase) self.skipWaiting(); });

Output

"[SW] Installing..."
"[SW] Pre-caching assets"
// All listed assets are downloaded and stored in Cache Storage

Activate Event — Clean Old Caches

Example

self.addEventListener("activate", (event) => { console.log("[SW] Activating..."); event.waitUntil( caches.keys().then((cacheNames) => { return Promise.all( cacheNames .filter((name) => name !== CACHE_NAME) .map((name) => { console.log("[SW] Deleting old cache:", name); return caches.delete(name); }) ); }) ); // Take control of pages immediately self.clients.claim(); });

Output

"[SW] Activating..."
"[SW] Deleting old cache: v0-static-cache"
// Old caches are removed; SW takes control of all clients

Fetch Event — Intercept Requests

Example

self.addEventListener("fetch", (event) => { event.respondWith(handleFetch(event.request)); });

Caching Strategies

1. Cache First (Offline First)

Serve from cache; fall back to network if not cached.

Example

async function cacheFirst(request) { const cached = await caches.match(request); if (cached) { console.log("[SW] Cache hit:", request.url); return cached; } console.log("[SW] Cache miss, fetching:", request.url); const response = await fetch(request); const cache = await caches.open(CACHE_NAME); cache.put(request, response.clone()); return response; }

Output

"[SW] Cache hit: /styles.css"    // served from cache instantly
"[SW] Cache miss, fetching: /api/news"  // fetched from network and cached

Best for: Static assets (JS, CSS, images, fonts)

2. Network First

Try network; fall back to cache if offline.

Example

async function networkFirst(request) { try { const response = await fetch(request); const cache = await caches.open(CACHE_NAME); cache.put(request, response.clone()); return response; } catch { console.log("[SW] Offline, serving from cache:", request.url); return caches.match(request) || caches.match("/offline.html"); } }

Output

// Online: fetches fresh data and updates cache
"[SW] Offline, serving from cache: /api/user"   // when network fails

Best for: API responses, dynamic content

3. Stale While Revalidate

Serve cache immediately; update cache in background.

Example

async function staleWhileRevalidate(request) { const cache = await caches.open(CACHE_NAME); const cached = await cache.match(request); // Fetch in background to update cache const fetchPromise = fetch(request).then((response) => { cache.put(request, response.clone()); return response; }); // Return cached version immediately (or wait for network) return cached || fetchPromise; }

Output

// User sees cached content instantly
// Background fetch updates the cache for next visit

Best for: Assets that can be slightly stale (avatars, non-critical API data)

Strategy Decision Chart

Example

Request type? ├── Static assets (CSS, JS, fonts) → Cache First ├── API / dynamic data → Network First ├── Avatars / profile images → Stale While Revalidate └── Uncacheable (POST, auth) → Network Only

When to Use Service Workers

Offline support — show app even without internet
Performance — serve assets from cache, skip network for static files
Background sync — queue form submissions when offline, send when back online
Push notifications — receive server push messages when page is closed
PWA installability — required for "Add to Home Screen" feature

Service Worker vs Web Worker

	Service Worker	Web Worker
Purpose	Network proxy, caching	CPU-heavy background computation
DOM access	❌ No	❌ No
Intercepts requests	✅ Yes	❌ No
Tied to page lifecycle	❌ No (survives page close)	✅ Yes
Multiple per origin	❌ One per scope	✅ Many

Common Mistakes

Not using HTTPS — Service Workers are blocked on insecure origins (except localhost).
Caching POST requests — the Cache API only caches GET responses. Never cache auth or mutation requests.
Not versioning the cache — without versioning (v1, v2), old stale assets serve forever.
Forgetting event.waitUntil() — without it, the browser can terminate the SW before async work completes.
Scope misunderstanding — a SW at /admin/sw.js only controls requests under /admin/. Place it at the root /sw.js for full-site control.
Not handling the offline page fallback — always cache and serve /offline.html for navigation failures.

Interview Questions

Q1. What is a Service Worker and what makes it unique?

A Service Worker is a JavaScript file that runs in a background thread, separate from the page. It acts as a network proxy — intercepting fetch requests, serving cached responses, and enabling push notifications and background sync. It survives page closure and requires HTTPS.

Q2. What are the three lifecycle events of a Service Worker?

install (first setup, pre-cache assets), activate (old SW replaced, clean old caches), fetch (intercept every network request).

Q3. What is event.waitUntil() and why is it necessary?

waitUntil(promise) tells the browser to keep the Service Worker alive until the promise resolves. Without it, async operations (like opening caches) may be cut short when the SW event handler returns.

Q4. What is the difference between Cache First and Network First strategies?

Cache First serves from cache immediately (fast, works offline) and falls back to network only if not cached — best for static assets. Network First always tries the network for fresh data and falls back to cache only if offline — best for dynamic API responses.

Q5. What does self.skipWaiting() do?

It tells a newly installed Service Worker to immediately become active without waiting for the existing SW to release all clients. Used with clients.claim() to take control of pages right away.

Q6. How do you update a Service Worker?

The browser checks for an updated sw.js on every page load (byte-by-byte comparison). If different, the new SW installs alongside the old one, waits until all tabs close, then activates. To force immediate update, use skipWaiting() + clients.claim().

Q7. Can a Service Worker access the DOM?

No. Service Workers run in a completely separate thread with no access to window, document, or the DOM. They communicate with pages via postMessage.

Q8. What is Background Sync in Service Workers?

Background Sync (SyncManager) lets you defer requests until the user has a stable connection. For example, if a user submits a form offline, the SW queues it and automatically retries when connectivity is restored.

Key Takeaways

Service Workers are background proxies — they intercept all network requests and can serve cached responses for offline support.
The lifecycle: install (pre-cache) → activate (clean old caches) → fetch (handle requests).
Always use event.waitUntil() for any async operation inside SW events.
Choose the right caching strategy: Cache First for static assets, Network First for dynamic data, Stale While Revalidate for semi-fresh content.
Service Workers require HTTPS and are scoped to their directory.
They are the foundation of PWAs — enabling offline mode, push notifications, and installability.

Exam Focus

Revise definitions, diagrams, examples, and short-answer points for Service Workers in JavaScript — Offline, Caching & PWA Guide.

Interview Use

Prepare one clear explanation, one practical example, and one common mistake for this JavaScript Master Course topic.

Search Terms

javascript-complete-guide, javascript master course, javascript, complete, guide, browser, apis, service

Continue learning this concept

Browser APIsWeb Workers in JavaScript — Multithreading & Background Tasks GuideLearn JavaScript Web Workers to run CPU-intensive code in background threads without blocking the UI. Covers postMessage, Worker lifecycle, SharedWorker, error handling, and interview Q&A.Browser APIsBrowser Object Model (BOM) in JavaScript — Complete GuideMaster the Browser Object Model (BOM) in JavaScript. Learn window, navigator, location, history, screen objects with real examples, diagrams, and interview Q&A.Browser APIsCanvas API in JavaScript — Complete Drawing & Animation GuideLearn the HTML5 Canvas API in JavaScript. Draw shapes, images, text, and build animations with 2D rendering context. Includes real examples, output blocks, and interview Q&A.Browser APIsDrag and Drop API in JavaScript — Complete TutorialMaster the HTML5 Drag and Drop API in JavaScript. Learn draggable elements, drop zones, DataTransfer, dragstart/dragover/drop events with real examples and interview Q&A.Browser APIsGeolocation API in JavaScript — Get User Location TutorialLearn the JavaScript Geolocation API to get user latitude, longitude, and position accuracy. Covers permissions, getCurrentPosition, watchPosition, error handling, and interview Q&A.Browser APIsHistory API in JavaScript — SPA Routing & pushState GuideMaster the JavaScript History API for SPA routing. Learn pushState, replaceState, popstate event, and how SPAs manage URL navigation without page reloads. Includes interview Q&A.

PreviousNotification API in JavaScript — Push Notifications Tutorial NextWeb Storage API in JavaScript — localStorage & sessionStorage Guide