इस कोडलैब से आपको अपने वेब ऐप्लिकेशन में सर्विस वर्कर को रजिस्टर करने का तरीका पता चलता है. साथ ही, 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 के काम करने की जांच करने के बाद, navigator.serviceWorker.register() को शर्त के साथ कॉल करना सबसे सही तरीका है.
दूसरा, जब किसी सेवा वर्कर को रजिस्टर किया जाता है, तो ब्राउज़र आपकी 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 का इस्तेमाल करके, सेवा वर्कर के व्यवहार को देखने की प्रोसेस के बारे में पता चल गया होगा.
अब आप कैश मेमोरी में डेटा सेव करने की रणनीतियों को लागू कर सकते हैं. साथ ही, आपको वे सभी अच्छी सुविधाएं भी मिलेंगी जो आपके वेब ऐप्लिकेशन को भरोसेमंद और तेज़ी से लोड करने में मदद करेंगी.