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