परिचय

जब मैंने पहली बार इन शब्दों के बारे में सुना तो मैंने सोचा, ठीक है, वे अपने अलग-अलग धागे के साथ समान चीजें कर रहे हैं। तो फिर हमें इन 2 शब्दों की आवश्यकता क्यों है?

लेकिन आपको सच बताऊं तो इन 2 शब्दों और उनके व्यवहार के बीच बहुत बड़ा अंतर है।

विस्तार से समझाने का प्रयास करूंगा।

इन दोनों के बीच आम बात है

1. वे जावास्क्रिप्ट के मुख्य एकल थ्रेड को अवरुद्ध किए बिना, एक अलग थ्रेड में चल रहे हैं।

वेब वर्कर

• यहां वर्कर थ्रेड मुख्य थ्रेड में हस्तक्षेप किए बिना कार्य कर सकता है।
• इनका उपयोग उन कार्यों के लिए किया जाता है जिनमें महत्वपूर्ण मात्रा में सीपीयू की आवश्यकता होती है, जैसे छवि हेरफेर/प्रसंस्करण, भारी गणना और डेटा प्रोसेसिंग।
• इसमें DOM तक पहुंचने की क्षमता नहीं है, और वे नेटवर्क अनुरोधों को इंटरसेप्ट नहीं कर सकते।
• इसका कोई जीवन चक्र नहीं है

सेवा कार्यकर्ता

• यह अतिरिक्त क्षमताओं वाला एक प्रकार का वेब वर्कर है।
• यह ब्राउज़र से अलग चल सकता है/ब्राउज़र बंद होने पर भी।
• यह PWA का एक मुख्य घटक है, क्योंकि वे ऑफ़लाइन समर्थन, बैकग्राउंड सिंक और पुश नोटिफिकेशन जैसी सुविधाओं को सक्षम करते थे।
• यह एक प्रॉक्सी सर्वर की तरह काम करता है जो ब्राउज़र और नेटवर्क के बीच बैठता है।

सेवा कार्यकर्ता का जीवन चक्र

1. पंजीकरण

• यहां हम उस ब्राउज़र को बताएंगे जहां हमारी सेवा कार्यकर्ता जावास्क्रिप्ट फ़ाइल मौजूद है।

if ('serviceWorker' in navigator) {
// wrap it in try/catch / promisses
   await navigator.serviceWorker.register('/service-worker.js')
}

2. स्थापना

• जब ब्राउज़र सेवा कर्मी को नया मानता है, तो इंस्टॉल इवेंट ट्रिगर हो जाता है।

नीचे दिए गए कोड को हमें service-worker.js
में लिखना होगा

self.addEventListener('install', (event) => {
// do your operations
})

3. सक्रियण

• इंस्टॉलेशन के बाद यह यहां कूद जाएगा

 self.addEventListener('activate', (event) => {
// Do your Operation
})

4. निठल्ला

• जब सेवा कर्मी कुछ नहीं कर रहा है, तो वह निष्क्रिय अवस्था में है।

5. फ़ेच/संदेश

• जब भी कोई नेटवर्क अनुरोध/संदेश किया जाता है, तो सेवा कर्मी जाग जाता है और नियंत्रण अपने हाथ में ले लेता है

  self.addEventListener('fetch', (event) => {
  // Do your Opeation
})

6. समाप्ति

• यदि उपयोग में नहीं है, तो ब्राउज़र मेमोरी को सहेजने के लिए सेवा कर्मी को समाप्त कर देगा। लेकिन जब हम नहीं जानते।

यह सेवा कर्मियों को बहुत लंबे समय तक बनाए रखेगा।

उदाहरण:-

क्रोम में इस लिंक को खोलें, वहां आपको बहुत सारे सर्विस वर्कर लटके हुए दिखाई देंगे, और आप बहुत सारे काम कर सकते हैं, जैसे निरीक्षण करना/शुरू करना और संदेश भेजना।

chrome://serviceworker-internals/

ब्राउज़र बंद होने पर भी हम सेवा कर्मियों को कैसे जगा सकते हैं।

टिप्पणी:-
इस विशिष्ट के लिए हम जागने के लिए पुश का उपयोग कर सकते हैं, लेकिन इस उपयोग के लिए ब्राउज़र को अधिसूचना की अनुमति देनी होगी, अन्यथा कोई रास्ता नहीं है।

ब्राउज़र अभी भी खुला होने पर अन्य तरीके प्रासंगिक हैं

1. घटना लाएँ

• जब भी कोई फ़ेच अनुरोध किया जाता है तो यह ईवेंट सक्रिय हो जाता है।

  self.addEventListener('fetch', event => {
  // Handle fetch event
});

2. संदेश

• जब किसी अन्य स्क्रिप्ट से कोई संदेश प्राप्त होता है तो यह ईवेंट सक्रिय हो जाता है। (संचार हो रहा है सेवा कार्यकर्ता अन्य जावास्क्रिप्ट फ़ाइलें)

   self.addEventListener('message', (event) => {
// Handle message Event
})

3. धकेलना

• पुश संदेश प्राप्त होने पर यह ईवेंट सक्रिय हो जाता है

  self.addEventListener('push', (event) => {
// Handle Push Event
})

4. सिंक इवेंट

• बैकग्राउंड सिंक इवेंट प्राप्त होने पर यह इवेंट सक्रिय हो जाता है।

  self.addEventListener('sync', (event) => {
// handle background Sync Event
})

संदर्भ

1. https://frontendmasters.com/courses/background-javascript