JS सर्विस वर्कर्स

Service Worker क्या है?

एक service worker एक background browser script है जो requests संभाल सकता है और offline caching support कर सकता है। इसे आमतौर पर HTTPS या localhost चाहिए होता है।

चूंकि यह बिना किसी page के खुले भी network requests को intercept करके उनका जवाब दे सकता है, यह offline support और background functionality संभव बनाता है जो regular scripts नहीं दे सकते।

उदाहरण: What Is a Service Worker?

// Check whether `"serviceWorker" in navigator`
// Check whether `"serviceWorker" in navigator`
if ("serviceWorker" in navigator) {
  // Call `navigator.serviceWorker.register("sw.js")`
  // Call `navigator.serviceWorker.register("sw.js")`
  navigator.serviceWorker.register("sw.js")
    // On success, run this with the resolved value as `()`
    // On success, run this with the resolved value as `()`
    .then(() => console.log("Service worker registered"));
}

Install Event

install event तब चलता है जब कोई service worker install होता है। इसका इस्तेमाल अक्सर cached resources तैयार करने के लिए किया जाता है। यह किसी app को चाहिए static assets को pre-cache करने की एक आम जगह है ताकि पहली network request पूरी होने से पहले भी वे उपलब्ध हों।

उदाहरण: Install Event

// sw.js
self.addEventListener("install", (event) => {
  console.log("Installing, ready to pre-cache assets");
});

Cache Storage

Cache API किसी service worker को बाद के इस्तेमाल के लिए responses store करने देता है। Cache API responses को store और बाद में retrieve करने के लिए fetch() के साथ मिलकर काम करता है, जो ज़्यादातर offline-first caching strategies की बुनियाद बनाता है।

उदाहरण: Cache Storage

// sw.js
self.addEventListener("install", (event) => {
  event.waitUntil(
    caches.open("v1").then((cache) => cache.addAll(["/", "/style.css"]))
  );
});

Fetch Event

एक service worker fetch event से network requests को intercept कर सकता है। fetch को intercept करना service worker को यह तय करने देता है कि request के हिसाब से एक cached response दे, network पर जाए, या दोनों का कोई combination लगाए।

उदाहरण: Fetch Event

// sw.js
self.addEventListener("fetch", (event) => {
  event.respondWith(
    caches.match(event.request).then((cached) => cached || fetch(event.request))
  );
});

Practical इस्तेमाल

Service workers offline pages, caching strategies, और progressive web app features को support कर सकते हैं। यही क्षमताएं Progressive Web Apps को संभव बनाती हैं — regular web technologies से बने installable, offline-capable experiences।

उदाहरण: Practical Use

// Check whether `"serviceWorker" in navigator`
// Check whether `"serviceWorker" in navigator`
if ("serviceWorker" in navigator) {
  // Call `navigator.serviceWorker.register("sw.js")`
  // Call `navigator.serviceWorker.register("sw.js")`
  navigator.serviceWorker.register("sw.js");
}
// Print "PWA features rely on this registration." to the console
// Print "PWA features rely on this registration." to the console
console.log("PWA features rely on this registration.");