Service Worker

🔹 What is a Service Worker?

A Service Worker is a JavaScript file that runs in the background, separate from the main browser thread.
It acts like a proxy between the browser and the network, giving you control over:

• Caching (offline support)

• Push notifications

• Background sync

---

🔹 Where does it run?

• Not in the DOM (i.e., it can’t access window, document, etc.)

• Runs in a separate thread, independently of the webpage

• Continues running even when the webpage is closed (in limited ways)

---

🔹 What Can a Service Worker Do?

Capability	Description
Intercept Requests	Catch and respond to network requests using cache or fetch
Offline Caching	Serve cached assets when offline
Push Notifications	Send messages to users even when the app is closed
Background Sync	Retry failed requests when connection is restored
Asset Preloading	Cache assets during installation for faster loads

---

🔹 Basic Lifecycle of a Service Worker:

1. Registration
   In your JS:

navigator.serviceWorker.register('/sw.js');

2. Installation
   The browser installs the service worker (only once).

3. Activation
   Cleans up old caches, takes control of the page.

4. Fetch Events
   Starts intercepting requests:

self.addEventListener('fetch', event => {
  event.respondWith(caches.match(event.request));
});

---

🔹 Cache Strategies (Simplified):

Strategy	When to Use
Cache First	For static assets (logo, fonts, etc.)
Network First	For dynamic content (API data)
Stale While Revalidate	Serve from cache, update in background

---

🔹 Limitations:

• Only works over HTTPS (except on localhost)

• Limited access to browser features (no DOM, no alerts)

• Complex to debug sometimes

---

🔹 Common Real-World Use:

• PWAs like Twitter Lite, Starbucks, Flipkart Lite

• Offline access to websites

• Faster repeat visits

• Sending notifications like WhatsApp Web or Gmail