इस कोडलैब से आपको अपने वेब ऐप्लिकेशन में सर्विस वर्कर को रजिस्टर करने का तरीका पता चलता है. साथ ही, Chrome DevTools का इस्तेमाल करके उसके काम करने के तरीके पर नज़र रखी जा सकती है. इसमें डीबग करने की कुछ तकनीकें भी शामिल हैं, जो सर्विस वर्कर से संपर्क करते समय आपके काम आ सकती हैं.
सैंपल प्रोजेक्ट के बारे में जानें
सैंपल प्रोजेक्ट में, इस कोडलैब के लिए सबसे ज़्यादा काम की फ़ाइलें ये हैं:
register-sw.jsकी शुरुआत खाली होती है, लेकिन इसमें सर्विस वर्कर को रजिस्टर करने के लिए इस्तेमाल किया गया कोड शामिल होगा. इसे प्रोजेक्ट केindex.htmlमें मौजूद<script>टैग के ज़रिए पहले से ही लोड किया जा रहा है.service-worker.jsभी इसी तरह खाली है. इस फ़ाइल में इस प्रोजेक्ट के लिए सर्विस वर्कर शामिल होगा.
सर्विस वर्कर रजिस्ट्रेशन कोड में जोड़ें
सर्विस वर्कर (चाहे वह खाली हो, जैसे कि मौजूदा service-worker.js फ़ाइल) का इस्तेमाल तब तक नहीं किया जाएगा, जब तक उसे
रजिस्टर
नहीं किया जाता. ऐसा करने के लिए कॉल पर जाएं:
navigator.serviceWorker.register(
'/service-worker.js'
)
आपकी register-sw.js फ़ाइल में मौजूद है.
कोड जोड़ने से पहले, कुछ बातों का ध्यान रखना चाहिए.
पहली बात यह है कि हर ब्राउज़र सर्विस वर्कर का काम नहीं करता. यह ब्राउज़र के ऐसे पुराने वर्शन के लिए खास तौर पर सही है जो
अपने-आप अपडेट नहीं होते. इसलिए, सबसे सही तरीका यह है कि आप navigator.serviceWorker.register() को शर्तों के साथ कॉल करें. इससे आपको पता चल जाएगा कि navigator.serviceWorker काम करता है या नहीं.
दूसरा, जब किसी सर्विस वर्कर को रजिस्टर किया जाता है, तो ब्राउज़र आपकी service-worker.js फ़ाइल में कोड को रन करता है. साथ ही, कैश मेमोरी में अपने-आप जानकारी भरने के लिए यूआरएल डाउनलोड करना शुरू कर सकता है. यह आपके सर्विस वर्कर के install और activate इवेंट हैंडलर के कोड के आधार पर होता है.
अतिरिक्त कोड चलाने और एसेट डाउनलोड करने से ऐसे कीमती संसाधनों का इस्तेमाल हो सकता है
जिनका इस्तेमाल आपका ब्राउज़र मौजूदा वेब पेज को दिखाने के लिए कर सकता है. इस रुकावट से बचने के लिए, सर्विस वर्कर का रजिस्ट्रेशन तब तक देर करना चाहिए, जब तक ब्राउज़र, मौजूदा पेज को रेंडर नहीं कर लेता. इसका अंदाज़ा लगाने का एक आसान तरीका यह है कि आप window.load इवेंट के चालू होने तक इंतज़ार करें.
इन दो पॉइंट को एक साथ रखकर, अलग-अलग कामों के लिए इस्तेमाल किए जाने वाले सर्विस वर्कर रजिस्ट्रेशन कोड को अपनी register-sw.js फ़ाइल में जोड़ें:
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/service-worker.js');
});
}
कुछ सर्विस वर्कर लॉगिंग कोड जोड़ें
आपकी service-worker.js फ़ाइल वह जगह है जहां आपके सर्विस वर्कर लागू करने के लिए सभी लॉजिक आम तौर पर काम करते हैं. आपको बेहतरीन तरीके से बनाया गया सर्विस वर्कर बनाने के लिए सर्विस वर्कर,
लाइफ़साइकल इवेंट,
कैश मेमोरी एपीआई, और अपने वेब ऐप्लिकेशन के नेटवर्क ट्रैफ़िक की जानकारी का मिला-जुला रूप इस्तेमाल करना होगा.
लेकिन... बाद में सीखने के लिए बस इतना ही. इस चरण में ध्यान दिया जाता है कि सर्विस वर्कर से जुड़े अलग-अलग इवेंट पर नज़र रखी जाए. साथ ही, सर्विस वर्कर की स्थिति को डीबग करने के लिए, Chrome के DevTools का इस्तेमाल करने पर ध्यान दिया जाए.
इसके लिए, service-worker.js में नीचे दिया गया कोड जोड़ें. यह कोड अलग-अलग इवेंट के रिस्पॉन्स में, DevTools कंसोल में मैसेज लॉग कर देगा (लेकिन कुछ और नहीं):
self.addEventListener('install', (event) => {
console.log('Inside the install handler:', event);
});
self.addEventListener('activate', (event) => {
console.log('Inside the activate handler:', event);
});
self.addEventListener(fetch, (event) => {
console.log('Inside the fetch handler:', event);
});
DevTools में सर्विस वर्कर पैनल के बारे में जानना
कोड को register-sw.js और service-worker.js फ़ाइलों में जोड़ने के बाद, अब सैंपल प्रोजेक्ट के लाइव वर्शन पर जाएं और देखें कि सर्विस वर्कर काम कर रहा है या नहीं.
- साइट की झलक देखने के लिए, ऐप्लिकेशन देखें दबाएं. इसके बाद,
फ़ुलस्क्रीन
दबाएं. - DevTools खोलने के लिए, `Control+Shift+J` (या Mac पर `Command+Option+J`) दबाएं.
- कंसोल टैब पर क्लिक करें.
आपको नीचे दिए गए लॉग मैसेज जैसा कुछ दिखेगा, जिसमें पता चलेगा कि सर्विस वर्कर को इंस्टॉल और चालू कर दिया गया है:
इसके बाद, ऐप्लिकेशन टैब पर जाएं और सर्विस वर्कर पैनल चुनें. आपको कुछ ऐसा दिखेगा:
इससे आपको पता चलता है कि वेब ऐप्लिकेशन solar-donkey.glitch.me के लिए service-worker.js के सोर्स यूआरएल वाला एक सर्विस वर्कर है जो फ़िलहाल चालू है और काम कर रहा है. इससे आपको यह भी पता चलता है कि फ़िलहाल एक क्लाइंट (ओपन टैब) है, जिसे सर्विस वर्कर कंट्रोल कर रहा है.
डीबग करने के मकसद से, फ़िलहाल रजिस्टर किए गए सर्विस वर्कर में बदलाव करने के लिए, इस पैनल के Unregister या stop जैसे लिंक इस्तेमाल किए जा सकते हैं.
सर्विस वर्कर अपडेट फ़्लो को ट्रिगर करें
सर्विस वर्कर के साथ डेवलप करते समय, अपडेट फ़्लो का आइडिया समझने के लिए सबसे ज़रूरी सिद्धांतों में से एक है.
जब आपके उपयोगकर्ता सर्विस वर्कर को रजिस्टर करने वाले वेब ऐप्लिकेशन पर जाते हैं, तब उन्हें उनके लोकल ब्राउज़र पर इंस्टॉल की गई service-worker.js की मौजूदा कॉपी का कोड मिलेगा. हालांकि, जब आप अपने वेब सर्वर पर सेव किए गए service-worker.js के वर्शन को अपडेट करते हैं, तो क्या होता है?
जब वेबसाइट पर बार-बार आने वाला कोई व्यक्ति किसी ऐसे यूआरएल पर वापस आता है जो सर्विस वर्कर के दायरे में आता है, तो ब्राउज़र अपने-आप सबसे नए service-worker.js का अनुरोध करेगा और किसी भी बदलाव की जांच करेगा. अगर सर्विस वर्कर स्क्रिप्ट में कुछ भी अलग होता है,
तो नए सर्विस वर्कर को इंस्टॉल करने, चालू करने,
और अंत में उसका नियंत्रण लेने का मौका मिलेगा.
अपने प्रोजेक्ट के कोड एडिटर पर वापस जाकर, कोड में कोई भी बदलाव करके, अपडेट करने के इस फ़्लो को सिम्युलेट किया जा सकता है. एक छोटे से बदलाव को एक बार में एक नया टूल
self.addEventListener('install', (event) => {
console.log('Inside the install handler:', event);
});
के साथ
self.addEventListener('install', (event) => {
console.log('Inside the UPDATED install handler:', event);
});
यह बदलाव करने के बाद, अपने सैंपल ऐप्लिकेशन के लाइव वर्शन पर वापस जाएं. साथ ही, DevTools ऐप्लिकेशन टैब को खोलकर पेज को फिर से लोड करें. आपको कुछ ऐसा दिखेगा:
इससे पता चलता है कि इस पॉइंट पर आपके सर्विस वर्कर के दो वर्शन इंस्टॉल हैं. पिछला वर्शन, जो पहले से चालू था, अब भी चल रहा है और मौजूदा पेज को कंट्रोल कर रहा है. सर्विस वर्कर का अपडेट किया गया वर्शन नीचे दिया गया है. यह waiting की स्थिति में है और यह तब तक इंतज़ार करेगा, जब तक पुराने सर्विस वर्कर से कंट्रोल होने वाले सभी खुले टैब बंद नहीं हो जाते.
यह डिफ़ॉल्ट तरीका यह पक्का करता है कि अगर आपके नए सर्विस वर्कर और आपके पुराने सर्विस वर्कर के काम करने के तरीके में कोई बुनियादी अंतर हो, जैसे कि fetch हैंडलर जो उन रिसॉर्स के साथ जवाब देता है जो आपके वेब ऐप्लिकेशन के पुराने वर्शन के साथ काम नहीं करते. यह तब तक लागू नहीं होगा, जब तक कोई उपयोगकर्ता आपके वेब ऐप्लिकेशन के सभी पिछले इंस्टेंस बंद न कर दे.
खास जानकारी पाएं
Chrome के DevTools का इस्तेमाल करके, सर्विस वर्कर को रजिस्टर करने और उसकी गतिविधि पर नज़र रखने की प्रोसेस अब आपके लिए आसान हो जाएगी.
अब आप कैश मेमोरी में डेटा सेव करने की रणनीतियों को लागू कर सकते हैं. साथ ही, आपको वे सभी अच्छी सुविधाएं भी मिलेंगी जो आपके वेब ऐप्लिकेशन को भरोसेमंद और तेज़ी से लोड करने में मदद करेंगी.