यह कोडलैब आपको वेब में सर्विस वर्कर को रजिस्टर करने का तरीका बताता है ऐप्लिकेशन पर जाएँ और इसके व्यवहार पर नज़र रखने के लिए Chrome DevTools का इस्तेमाल करें. इसमें, डीबग करने की कुछ ऐसी तकनीकें भी शामिल हैं जो सेवा वर्कर के साथ काम करते समय आपके लिए मददगार हो सकती हैं.
सैंपल प्रोजेक्ट के बारे में जानें
सैंपल प्रोजेक्ट में, इस कोडलैब के लिए सबसे ज़्यादा काम की फ़ाइलें ये हैं:
register-sw.jsशुरू में खाली होता है, लेकिन इसमें वह कोड होता है जिसका इस्तेमाल, सेवा वर्कर को रजिस्टर करने के लिए किया जाता है. यह पहले से ही<script>के ज़रिए लोड हो रहा है टैग को प्रोजेक्ट केindex.htmlके अंदर रख सकते हैं.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 का इस्तेमाल करके सर्विस वर्कर के व्यवहार को जांच रहा है.
अब आप कैश मेमोरी में सेव करने की रणनीतियों को लागू कर सकते हैं. साथ ही, वे अच्छी चीज़ें हैं जो आपके वेब ऐप्लिकेशन को भरोसेमंद और सही तरीके से लोड करने में मदद करेंगी तेज़.