वेब वर्कर्स और सर्विस वर्कर्स, आपकी साइट की परफ़ॉर्मेंस को कैसे बेहतर बना सकते हैं. साथ ही, वेब वर्कर्स और सर्विस वर्कर्स में से किसका इस्तेमाल कब करना चाहिए.
इस खास जानकारी में बताया गया है कि वेब वर्कर्स और सेवा वर्कर्स, आपकी वेबसाइट की परफ़ॉर्मेंस को कैसे बेहतर बना सकते हैं. साथ ही, यह भी बताया गया है कि वेब वर्कर्स और सेवा वर्कर्स में से किसका इस्तेमाल कब करना चाहिए. विंडो और सेवा वर्कर के बीच कम्यूनिकेशन के खास पैटर्न के बारे में जानने के लिए, इस सीरीज़ के बाकी वीडियो देखें.
वर्कर्स आपकी वेबसाइट को कैसे बेहतर बना सकते हैं
ब्राउज़र, किसी वेब पेज पर मौजूद सभी JavaScript को चलाने के लिए, एक ही थ्रेड (मुख्य थ्रेड) का इस्तेमाल करता है. साथ ही, पेज को रेंडर करने और ग़ैर-ज़रूरी डेटा हटाने जैसे टास्क भी करता है. ज़्यादा JavaScript कोड चलाने से मुख्य थ्रेड ब्लॉक हो सकता है. इससे ब्राउज़र को इन टास्क को पूरा करने में देरी होती है और उपयोगकर्ता को खराब अनुभव मिलता है.
iOS/Android ऐप्लिकेशन डेवलपमेंट में, ऑपरेशन को अन्य थ्रेड पर ऑफ़लोड करने का एक सामान्य तरीका है. इससे, यह पक्का किया जा सकता है कि ऐप्लिकेशन की मुख्य थ्रेड, उपयोगकर्ता इवेंट का जवाब देने के लिए उपलब्ध रहे. असल में, Android के नए वर्शन में, मुख्य थ्रेड को बहुत देर तक ब्लॉक करने पर ऐप्लिकेशन क्रैश हो जाता है.
वेब पर, JavaScript को एक थ्रेड के कॉन्सेप्ट के हिसाब से डिज़ाइन किया गया था. इसमें, ऐप्लिकेशन की तरह मल्टीथ्रेडिंग मॉडल लागू करने के लिए ज़रूरी सुविधाएं नहीं हैं. जैसे, शेयर की गई मेमोरी.
इन सीमाओं के बावजूद, वेब पर भी ऐसा ही पैटर्न हासिल किया जा सकता है. इसके लिए, बैकग्राउंड थ्रेड में स्क्रिप्ट चलाने के लिए वर्कर्स का इस्तेमाल किया जाता है. इससे, वे मुख्य थ्रेड में रुकावट डाले बिना टास्क कर पाते हैं. वर्कर्स, एक अलग थ्रेड पर चलने वाला पूरा JavaScript स्कोप होता है. इसमें कोई शेयर की गई मेमोरी नहीं होती.
इस पोस्ट में, आपको दो अलग-अलग तरह के वर्कर (वेब वर्कर और सर्विस वर्कर) के बारे में जानकारी मिलेगी. साथ ही, इनके बीच के अंतर और प्रोडक्शन वेबसाइटों में इनका इस्तेमाल करने के सबसे सामान्य पैटर्न के बारे में भी बताया गया है.
वेब वर्कर और सर्विस वर्कर
समानताएं
वेबसाइटों के लिए, वेब वर्कर और सर्विस वर्कर, दो तरह के वर्कर उपलब्ध होते हैं. इनमें कुछ चीज़ें एक जैसी होती हैं:
- ये दोनों, सेकंडरी थ्रेड में चलते हैं. इससे JavaScript कोड, मुख्य थ्रेड और यूज़र इंटरफ़ेस को ब्लॉक किए बिना चल पाता है.
- इनके पास
WindowऔरDocumentऑब्जेक्ट का ऐक्सेस नहीं होता. इसलिए, ये सीधे डीओएम के साथ इंटरैक्ट नहीं कर सकते. साथ ही, इनके पास ब्राउज़र एपीआई का सीमित ऐक्सेस होता है.
अंतर
ऐसा हो सकता है कि आपको लगे कि वेब वर्कर्स को सौंपी जा सकने वाली ज़्यादातर चीज़ें, सेवा वर्कर्स में भी की जा सकती हैं. इसके अलावा, सेवा वर्कर्स में की जा सकने वाली ज़्यादातर चीज़ें, वेब वर्कर्स में भी की जा सकती हैं. हालांकि, इन दोनों के बीच कुछ अहम अंतर हैं:
- वेब वर्कर्स के उलट, सेवा वर्कर्स की मदद से, नेटवर्क अनुरोधों को इंटरसेप्ट (
fetchइवेंट के ज़रिए) किया जा सकता है. साथ ही, बैकग्राउंड में पुश एपीआई इवेंट को सुनने के लिए,pushइवेंट का इस्तेमाल किया जा सकता है. - एक पेज पर कई वेब वर्कर्स बन सकते हैं. हालांकि, एक सर्विस वर्कर, उस स्कोप के तहत सभी ऐक्टिव टैब को कंट्रोल करता है जिसके लिए उसे रजिस्टर किया गया था.
- वेब वर्कर का लाइफ़साइकल, उस टैब से जुड़ा होता है जिससे वह जुड़ा होता है. वहीं, सर्विस वर्कर का लाइफ़साइकल, उससे अलग होता है. इसलिए, जिस टैब में वेब वर्कर चल रहा है उसे बंद करने पर, वह बंद हो जाएगा. हालांकि, सर्विस वर्कर बैकग्राउंड में चलता रहेगा. भले ही, साइट पर कोई भी टैब खुला न हो.
उपयोग के उदाहरण
दोनों तरह के वर्कर्स के बीच के अंतर से पता चलता है कि किन स्थितियों में किसी एक या दूसरे का इस्तेमाल किया जा सकता है:
वेब वर्कर्स के इस्तेमाल के उदाहरण, आम तौर पर यूज़र इंटरफ़ेस (यूआई) को ब्लॉक होने से बचाने के लिए, किसी दूसरी थ्रेड पर भारी गिनती जैसे कामों को ऑफ़लोड करने से जुड़े होते हैं.
- उदाहरण: वीडियो गेम PROXX बनाने वाली टीम को मुख्य थ्रेड को ज़्यादा से ज़्यादा खाली रखना था, ताकि उपयोगकर्ता के इनपुट और ऐनिमेशन को ध्यान में रखा जा सके. ऐसा करने के लिए, उन्होंने गेम लॉजिक और स्टेटस मैनेजमेंट को अलग थ्रेड पर चलाने के लिए, वेब वर्कर्स का इस्तेमाल किया.
सेवा वर्कर के टास्क आम तौर पर, नेटवर्क प्रॉक्सी के तौर पर काम करने, बैकग्राउंड टास्क मैनेज करने, और कैश मेमोरी और ऑफ़लाइन जैसी चीज़ों से जुड़े होते हैं.
उदाहरण: पॉडकास्ट के PWA में, उपयोगकर्ताओं को पूरे एपिसोड डाउनलोड करने की अनुमति दी जा सकती है, ताकि वे ऑफ़लाइन होने पर उन्हें सुन सकें. इसके लिए, सेवा वर्कर और खास तौर पर, Background Fetch API का इस्तेमाल किया जा सकता है. इस तरह, अगर एपिसोड डाउनलोड होने के दौरान उपयोगकर्ता टैब बंद कर देता है, तो डाउनलोड की प्रोसेस में रुकावट नहीं आएगी.
टूल और लाइब्रेरी
अलग-अलग लोअर लेवल एपीआई का इस्तेमाल करके, विंडो और वर्कर्स के बीच कम्यूनिकेशन लागू किया जा सकता है. हालांकि, ऐसी लाइब्रेरी भी हैं जो इस प्रोसेस को आसान बनाती हैं. साथ ही, ये लाइब्रेरी इस्तेमाल के सबसे सामान्य उदाहरणों को ध्यान में रखती हैं. इस सेक्शन में, हम उन दो टूल के बारे में बताएंगे जो वेब वर्कर और सर्विस वर्कर के लिए, विंडो से जुड़ी जानकारी को मैनेज करते हैं: Comlink और Workbox.
Comlink
Comlink एक छोटी (1.6k) RPC लाइब्रेरी है. यह वेब वर्कर्स का इस्तेमाल करने वाली वेबसाइटें बनाते समय, कई बुनियादी जानकारी का ध्यान रखती है. इसका इस्तेमाल PROXX और Squoosh जैसी वेबसाइटों में किया गया है. इसकी वजहों और कोड के सैंपल की खास जानकारी यहां देखी जा सकती है.
Workbox
Workbox, सेवा वर्कर का इस्तेमाल करने वाली वेबसाइटें बनाने के लिए एक लोकप्रिय लाइब्रेरी है. इसमें कैश मेमोरी में सेव करने, ऑफ़लाइन, बैकग्राउंड में सिंक करने वगैरह से जुड़े सबसे सही तरीकों का एक पैकेज होता है. workbox-window मॉड्यूल, सेवा वर्कर और पेज के बीच मैसेज शेयर करने का एक आसान तरीका उपलब्ध कराता है.
अगले चरण
इस सीरीज़ के बाकी लेखों में, विंडो और सेवा वर्कर के बीच कम्यूनिकेशन के पैटर्न पर फ़ोकस किया गया है:
- ज़रूरी कैश मेमोरी सेव करने की गाइड: पेज से सर्विस वर्कर को कॉल करके, संसाधनों को पहले से कैश मेमोरी में सेव करना. उदाहरण के लिए, पहले से लोड करने की स्थितियों में.
- अपडेट ब्रॉडकास्ट करना: अहम अपडेट के बारे में बताने के लिए, सेवा वर्कर से पेज को कॉल करना. उदाहरण के लिए, वेबसाइट का नया वर्शन उपलब्ध है.
- दो-तरफ़ा कम्यूनिकेशन: किसी सेवा वर्कर को कोई टास्क सौंपना (जैसे, भारी डेटा डाउनलोड करना) और पेज को प्रोग्रेस के बारे में जानकारी देना.
विंडो और वेब वर्कर्स के बीच कम्यूनिकेशन के पैटर्न के बारे में जानने के लिए, यह लेख पढ़ें: ब्राउज़र की मुख्य थ्रेड से JavaScript को चलाने के लिए, वेब वर्कर्स का इस्तेमाल करना.