सर्विस वर्कर

उपयोगकर्ता उम्मीद करते हैं कि ऐप्लिकेशन धीमे या ठीक से काम न करने वाले नेटवर्क कनेक्शन या ऑफ़लाइन होने पर भी भरोसेमंद तरीके से शुरू होंगे. वे उम्मीद करते हैं कि उन्होंने हाल ही में जिस कॉन्टेंट का इस्तेमाल किया है, जैसे कि मीडिया ट्रैक या टिकट और यात्रा की योजना उपलब्ध है और इस्तेमाल की जा सकेगी. जब कोई अनुरोध मुमकिन न हो, तो वे उम्मीद करते हैं कि ऐप्लिकेशन से उन्हें इसकी जानकारी दी जाएगी. इसके बाद, ऐप्लिकेशन अचानक फ़ेल हो जाएगा या बंद हो जाएगा. और वे चाहते हैं कि यह सब जल्द से जल्द हो. जैसा कि मिलीसेकंड में लाखों कमाएं होता है, लेकिन लोड समय में 0.1 सेकंड का सुधार करने पर भी कन्वर्ज़न में 10% तक की बढ़ोतरी हो सकती है. सर्विस वर्कर, एक ऐसा टूल है जिसकी मदद से आपका प्रोग्रेसिव वेब ऐप्लिकेशन (PWA) उपयोगकर्ताओं की उम्मीदों पर खरा उतरता है.

जब कोई ऐप्लिकेशन, सर्विस वर्कर के दायरे में आने वाले संसाधन का अनुरोध करता है, तो सर्विस वर्कर उस अनुरोध को इंटरसेप्ट करता है और नेटवर्क प्रॉक्सी की तरह काम करता है, भले ही उपयोगकर्ता ऑफ़लाइन हो. इसके बाद यह तय कर सकता है कि क्या इसे कैश मेमोरी एपीआई का इस्तेमाल करके कैश मेमोरी से संसाधन उपलब्ध कराना चाहिए, इसे नेटवर्क से इस तरह उपलब्ध कराना चाहिए जैसे कोई काम करने वाला सर्विस वर्कर न हो या इसे किसी लोकल एल्गोरिदम से बनाना चाहिए. इससे आपको प्लैटफ़ॉर्म पर मौजूद ऐप्लिकेशन जैसी अच्छी क्वालिटी का अनुभव देने में मदद मिलती है, भले ही आपका ऐप्लिकेशन ऑफ़लाइन हो.

सर्विस वर्कर रजिस्टर करें

इससे पहले कि किसी सर्विस वर्कर को आपके पेज का कंट्रोल मिले, उसे आपके PWA के लिए रजिस्टर करना ज़रूरी है. इसका मतलब है कि जब कोई उपयोगकर्ता पहली बार आपका PWA खोलता है, तो उसके नेटवर्क के सभी अनुरोध सीधे आपके सर्वर पर जाते हैं. इसकी वजह यह है कि सर्विस वर्कर के पास अभी तक आपके पेजों का कंट्रोल नहीं होता है.

यह जांचने के बाद कि ब्राउज़र, Service Worker API के साथ काम करता है या नहीं, आपका PWA एक सर्विस वर्कर रजिस्टर कर सकता है. लोड होने के बाद, सर्विस वर्कर खुद को आपके PWA और नेटवर्क के बीच सेट कर लेता है, अनुरोधों को बीच में रोकता है, और उससे जुड़े रिस्पॉन्स दिखाता है.

if ('serviceWorker' in navigator) {
   navigator.serviceWorker.register("/serviceworker.js");
}

पुष्टि करना कि सर्विस वर्कर रजिस्टर किया गया है या नहीं

यह पुष्टि करने के लिए कि सर्विस वर्कर रजिस्टर है या नहीं, अपने पसंदीदा ब्राउज़र में डेवलपर टूल का इस्तेमाल करें.

Firefox और Chromium पर आधारित ब्राउज़र (Microsoft Edge, Google Chrome या Samsung Internet) में:

1. डेवलपर टूल खोलें. इसके बाद, ऐप्लिकेशन टैब पर क्लिक करें.
2. बाएं पैनल में, सर्विस वर्कर चुनें.
3. पक्का करें कि सर्विस वर्कर का स्क्रिप्ट यूआरएल, "चालू किया गया" स्थिति के साथ दिखता है. (ज़्यादा जानकारी के लिए, लाइफ़साइकल देखें). Firefox पर, स्थिति "चल रहा है" या "बंद किया गया" हो सकती है.

Safari में:

1. डेवलप करें > सर्विस वर्कर पर क्लिक करें.
2. मौजूदा ऑरिजिन वाली एंट्री के लिए, इस मेन्यू को देखें. उस एंट्री पर क्लिक करने से, सर्विस वर्कर के संदर्भ के लिए इंस्पेक्टर खुल जाएगा.

स्कोप

जिस फ़ोल्डर में आपका सर्विस वर्कर मौजूद होता है वह उसका स्कोप तय करता है. example.com/my-pwa/sw.js में मौजूद सर्विस वर्कर, my-pwa पाथ पर या उसके तहत, किसी भी नेविगेशन को कंट्रोल कर सकता है, जैसे कि example.com/my-pwa/demos/. सर्विस वर्कर, अपने दायरे में सिर्फ़ आइटम (पेज, वर्कर, और एक साथ "क्लाइंट") को कंट्रोल कर सकते हैं. यह स्कोप, ब्राउज़र टैब और PWA विंडो पर लागू होता है.

हर दायरे के लिए सिर्फ़ एक सर्विस वर्कर की अनुमति है. जब कोई सर्विस वर्कर चालू होता है और चल रहा होता है, तब आम तौर पर सिर्फ़ एक इंस्टेंस उपलब्ध होता है. इससे कोई फ़र्क़ नहीं पड़ता कि कितने क्लाइंट (PWA विंडो या ब्राउज़र टैब) मेमोरी में हैं.

Safari में स्कोप मैनेजमेंट ज़्यादा जटिल होता है. इसे पार्टीशन कहा जाता है. इससे क्रॉस-डोमेन iframe के साथ स्कोप के काम करने के तरीके पर असर पड़ता है. WebKit को लागू करने के बारे में ज़्यादा जानने के लिए, उनकी ब्लॉग पोस्ट देखें.

जीवनचक्र

सर्विस वर्कर के पास एक लाइफ़साइकल होती है, जो यह तय करती है कि उन्हें कैसे इंस्टॉल किया जाएगा. यह आपके PWA इंस्टॉलेशन से अलग होता है.

सर्विस वर्कर की लाइफ़साइकल, सर्विस वर्कर को रजिस्टर करने से शुरू होती है. इसके बाद, ब्राउज़र, सर्विस वर्कर फ़ाइल को डाउनलोड और पार्स करने की कोशिश करता है. अगर पार्स कर दिया जाता है, तो सर्विस वर्कर का install इवेंट चालू हो जाता है. install इवेंट सिर्फ़ एक बार सक्रिय होता है.

सर्विस वर्कर इंस्टॉलेशन अपने-आप होता है और इसके लिए उपयोगकर्ता की अनुमति की ज़रूरत नहीं होती. भले ही, उपयोगकर्ता ने PWA इंस्टॉल न किया हो. Service Worker API, ऐसे प्लैटफ़ॉर्म पर भी उपलब्ध है जिन पर PWA इंस्टॉल नहीं किया जा सकता. जैसे, डेस्कटॉप डिवाइसों पर Safari और Firefox पर भी.

इंस्टॉलेशन के बाद, सर्विस वर्कर को चालू करने के बाद ही, वह अपने क्लाइंट को कंट्रोल कर पाएगा. इसमें PWA भी शामिल है. जब सर्विस वर्कर अपने क्लाइंट को कंट्रोल करने के लिए तैयार होता है, तब activate इवेंट ट्रिगर हो जाता है. हालांकि, डिफ़ॉल्ट रूप से, चालू सर्विस वर्कर, इसे रजिस्टर करने वाले पेज को तब तक मैनेज नहीं कर सकता, जब तक कि अगली बार पेज को रीलोड करके या PWA को फिर से खोलकर उस पेज पर नेविगेट नहीं किया जाता.

self ऑब्जेक्ट का इस्तेमाल करके, सर्विस वर्कर के ग्लोबल स्कोप में इवेंट सुने जा सकते हैं:

serviceworker.js

// This code executes in its own worker or thread
self.addEventListener("install", event => {
   console.log("Service worker installed");
});
self.addEventListener("activate", event => {
   console.log("Service worker activated");
});

सर्विस वर्कर को अपडेट करना

जब ब्राउज़र यह पता लगाता है कि क्लाइंट को कंट्रोल करने वाला सर्विस वर्कर और सर्वर से सर्विस वर्कर फ़ाइल का नया वर्शन बाइट-अलग है, तो सर्विस वर्कर अपडेट हो जाते हैं.

इंस्टॉल हो जाने के बाद, नया सर्विस वर्कर तब तक चालू होने की इंतज़ार करता है, जब तक पुराना सर्विस वर्कर किसी क्लाइंट को कंट्रोल नहीं करता. इस स्थिति को "प्रतीक्षा" कहा जाता है और इसी से ब्राउज़र यह पक्का करता है कि एक समय में आपके सर्विस वर्कर का सिर्फ़ एक वर्शन चल रहा है.

पेज को रीफ़्रेश करने या PWA को फिर से खोलने से, नए सर्विस वर्कर को कंट्रोल नहीं मिलेगा. उपयोगकर्ता को मौजूदा सर्विस वर्कर का इस्तेमाल करके, सभी टैब और विंडो को बंद करना होगा या किसी दूसरी विंडो से दूर जाना होगा. इसके बाद, नए सर्विस वर्कर को कंट्रोल देने के लिए वापस नेविगेट करना होगा. ज़्यादा जानकारी के लिए, सर्विस वर्कर का लाइफ़साइकल देखें.

सर्विस वर्कर का जीवन

इंस्टॉल किया गया और रजिस्टर किया गया सर्विस वर्कर अपने दायरे में आने वाले सभी नेटवर्क अनुरोधों को मैनेज कर सकता है. यह अपने थ्रेड पर चलता है. इसके चालू होने और बंद होने को ब्राउज़र कंट्रोल करता है. इससे PWA के चालू होने या बंद होने के बाद भी काम किया जा सकता है. सर्विस वर्कर अपने खुद के थ्रेड पर चलते हैं, लेकिन हो सकता है कि इन-मेमोरी स्थिति सर्विस वर्कर के चलने के बीच बनी न रहे. इसलिए, पक्का करें कि हर रन के लिए आपको जिस चीज़ का फिर से इस्तेमाल करना है वह IndexedDB या किसी अन्य स्थायी स्टोरेज में उपलब्ध हो.

अगर यह पहले से नहीं चल रहा है, तो सर्विस वर्कर तब शुरू होता है, जब इसके दायरे में कोई नेटवर्क अनुरोध भेजा जाता है या जब उसे कोई ट्रिगर किया जाने वाला इवेंट मिलता है, जैसे कि समय-समय पर होने वाला बैकग्राउंड सिंक या पुश मैसेज.

अगर सर्विस वर्कर कुछ सेकंड के लिए निष्क्रिय रहते हैं या बहुत लंबे समय तक व्यस्त रहते हैं, तो उन्हें हटा दिया जाता है. इसके लिए अलग-अलग ब्राउज़र के हिसाब से समय अलग-अलग हो सकता है. अगर किसी सर्विस वर्कर को बंद कर दिया गया है और कोई ऐसी गतिविधि होती है जिससे वह चालू हो जाएगा, तो वह रीस्टार्ट हो जाता है.

मिलने वाली अनुमतियां

रजिस्टर किया गया और चालू सर्विस वर्कर, आपके PWA के मुख्य थ्रेड से पूरी तरह अलग एक्ज़ीक्यूटिशन लाइफ़साइकल वाले थ्रेड का इस्तेमाल करता है. हालांकि, डिफ़ॉल्ट रूप से, सर्विस वर्कर फ़ाइल का कोई व्यवहार नहीं होता. आपके कोड को कैश मेमोरी में सेव नहीं किया जाएगा या यह किसी संसाधन को उपलब्ध नहीं कराती है. आपको ये चीज़ें करनी होंगी. आपको नीचे दिए चैप्टर में इसका तरीका पता चलेगा.

सर्विस वर्कर की क्षमताएं सिर्फ़ प्रॉक्सी करने या एचटीटीपी अनुरोधों को पूरा करने की नहीं हैं. इसके ऊपर दूसरी सुविधाएं भी मौजूद हैं, जैसे कि बैकग्राउंड कोड एक्ज़ीक्यूशन, वेब पुश नोटिफ़िकेशन, और पेमेंट प्रोसेस करना. हम क्षमताओं में शामिल इन सुविधाओं के बारे में चर्चा करेंगे.

रिसॉर्स

• सर्विस वर्कर एपीआई (एमडीएन)
• सर्विस वर्कर की मानसिकता
• आपकी सेवा में WebKit के कर्मचारी
• सर्विस वर्कर के लिए ज़रूरी स्पैनिश मॉड्यूल
• सर्विस वर्कर लाइफ़साइकल