Day 52 Service Workers
Service Worker ek browser script hai jo network requests intercept karta hai. Offline support, caching, aur push notifications — Progressive Web Apps (PWA) ka core.
Service Worker Lifecycle
Register, install, activate, fetch.
// sw.js — Service Worker file
const CACHE_NAME = "my-app-v1";
const CACHE_FILES = ["/", "/index.html", "/style.css", "/app.js"];
// Install — files cache karo
self.addEventListener("install", event => {
event.waitUntil(
caches.open(CACHE_NAME).then(cache => cache.addAll(CACHE_FILES))
);
});
// Activate — old caches delete karo
self.addEventListener("activate", event => {
event.waitUntil(
caches.keys().then(keys =>
Promise.all(keys.filter(k => k !== CACHE_NAME).map(k => caches.delete(k)))
)
);
});
// Fetch — cache first, then network
self.addEventListener("fetch", event => {
event.respondWith(
caches.match(event.request).then(cached =>
cached || fetch(event.request)
)
);
});
Register Service Worker
Main app mein register karo.
// main.js
if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("/sw.js")
.then(reg => console.log("SW registered:", reg.scope))
.catch(err => console.error("SW failed:", err));
}
🎯 Practice Challenge
Simple PWA banao with Service Worker — offline bhi kaam kare. Cache assets aur show offline page when network unavailable.