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