सर्विस वर्कर रजिस्ट्रेशन

सर्विस वर्कर के रजिस्ट्रेशन का समय तय करने के सबसे सही तरीके.

Jeff Posnick

सेवा कर्मचारी आपके वेब ऐप्लिकेशन पर बार-बार आने वाले लोगों की संख्या तेज़ी से बढ़ा सकता है. हालांकि, आपको यह सुनिश्चित करने के लिए चरण कि सर्विस वर्कर का शुरुआती इंस्टॉलेशन उपयोगकर्ता को पहली बार विज़िट करने का अनुभव मिलता है.

आम तौर पर, सर्विस वर्कर को टाला जाएगा रजिस्ट्रेशन जब तक कि शुरुआती पेज लोड नहीं हो जाता, तब तक Chrome ब्राउज़र पर उपयोगकर्ता, खास तौर पर वे लोग जो धीमे इंटरनेट कनेक्शन वाले मोबाइल डिवाइसों का इस्तेमाल कर रहे हैं.

सामान्य रजिस्ट्रेशन बॉयलरप्लेट

अगर आपने कभी सर्विस वर्कर के बारे में पढ़ा है, तो शायद आपको बॉयलरप्लेट से काफ़ी हद तक मिलता-जुलता है:

if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/service-worker.js');
}

इसमें कभी-कभी कुछ console.log() स्टेटमेंट भी शामिल हो सकते हैं या कोड जो किसी पिछले सर्विस वर्कर रजिस्ट्रेशन में हुए अपडेट का पता लगाता है उपयोगकर्ताओं को पेज रीफ़्रेश करने के बारे में बताती हैं. हालाँकि, ये मामूली बदलाव ही हैं कोड की मानक कुछ पंक्तियां.

तो, क्या navigator.serviceWorker.register में कोई अंतर है? क्या कोई का पालन करने के सबसे सही तरीके कौनसे हैं? इसमें कोई हैरानी की बात नहीं है कि (यह लेख यहीं खत्म नहीं होता) ठीक है), तो दोनों का जवाब "हां!" है

उपयोगकर्ता की पहली विज़िट

मान लीजिए कि कोई उपयोगकर्ता पहली बार किसी वेब ऐप्लिकेशन पर आता है. फ़िलहाल, कोई सर्विस वर्कर नहीं है और ब्राउज़र के पास पहले से यह जानने का कोई तरीका नहीं है कि कोई सेवा वह कर्मचारी जो बाद में इंस्टॉल हो जाता है.

डेवलपर के रूप में, आपकी प्राथमिकता यह सुनिश्चित करने में होनी चाहिए कि ब्राउज़र इंटरैक्टिव विज्ञापन दिखाने के लिए ज़रूरी संसाधनों का कम से कम सेट उपलब्ध होता है करें. वह सब कुछ जो उन प्रतिक्रियाओं को पाने में धीमा कर देता है, वह तीव्र समय-से-इंटरैक्टिव अनुभव.

अब कल्पना करें कि ऐसी JavaScript या इमेज डाउनलोड करने की आपके पेज को रेंडर करना होगा, तो आपका ब्राउज़र बैकग्राउंड थ्रेड शुरू करने का फ़ैसला करता है या प्रक्रिया (संक्षिप्तता के लिए, हम यह मान लेंगे कि यह कोई धागा है). मान लें कि आप किसी बेहतर डेस्कटॉप मशीन पर नहीं हैं, बल्कि ऐसे मोबाइल फ़ोन जिन्हें दुनिया में से ज़्यादातर लोग अपना मुख्य डिवाइस मानते हैं. ऊपर की ओर घुमाना यह अतिरिक्त थ्रेड, आपके ब्राउज़र के सीपीयू समय और मेमोरी के लिए विवाद जोड़ती है किसी इंटरैक्टिव वेब पेज को रेंडर करने पर खर्च किया जा सकता है.

कुछ समय से इस्तेमाल में न होने पर, बैकग्राउंड में चल रहे थ्रेड पर शायद ज़्यादा असर न पड़े. हालांकि, क्या अगर थ्रेड कुछ समय से इस्तेमाल में नहीं है और इसके बजाय यह तय करता है कि वह भी शुरू होने वाली है नेटवर्क से संसाधन डाउनलोड कर रहे हैं? सीपीयू या मेमोरी से जुड़ी कोई समस्या कॉन्टेंट के लिए सीमित बैंडविथ की चिंता करने की ज़रूरत नहीं है का कई मोबाइल डिवाइसों पर इस्तेमाल कर सकते हैं. बैंडविथ बहुत कीमती होता है, इसलिए इसे कमज़ोर न करें दूसरे संसाधन भी डाउनलोड करें.

इन सबका मकसद यह है कि डाउनलोड करने के लिए नए सर्विस वर्कर थ्रेड को स्पिन किया जा रहा है और बैकग्राउंड में कैश मेमोरी संसाधन उपलब्ध कराने के आपके लक्ष्य के हिसाब से काम कर सकते हैं जब कोई उपयोगकर्ता पहली बार आपके स्टोर पेज पर आता है, तो उस व्यक्ति के लिए की वेबसाइट पर जाएं.

बॉयलरप्लेट को बेहतर बनाना

इसका समाधान है कि कॉल करने का समय चुनकर सर्विस वर्कर की शुरुआत को कंट्रोल किया जाए navigator.serviceWorker.register(). बुनियादी नियम यह है कि load event तक के लिए रजिस्ट्रेशन window पर सक्रिय होता है, जैसे:

if ('serviceWorker' in navigator) {
    window.addEventListener('load', function() {
    navigator.serviceWorker.register('/service-worker.js');
    });
}

हालांकि, सर्विस वर्कर के रजिस्ट्रेशन की शुरुआत करने का सही समय भी इस बात पर निर्भर करता है कि आपका वेब ऐप्लिकेशन लोड होने के तुरंत बाद क्या कर रहा है. उदाहरण के लिए, Google I/O साल 2016 के वेब ऐप्लिकेशन में छोटा ऐनिमेशन दिखाया गया है मुख्य स्क्रीन पर ट्रांज़िशन करने से पहले. हमारी टीम पाया कि ऐनिमेशन के दौरान सर्विस वर्कर का रजिस्ट्रेशन बंद करने से काम की क्वालिटी खराब हो सकती है कम कीमत वाले मोबाइल डिवाइस पर. उपयोगकर्ताओं को खराब अनुभव देने के बजाय, हम देरी से सर्विस वर्कर पंजीकरण, एनिमेशन के बाद तक, जब तक ब्राउज़र कुछ सेकंड तक काम न करने की संभावना होती है.

इसी तरह, अगर आपका वेब ऐप्लिकेशन किसी ऐसे फ़्रेमवर्क का इस्तेमाल करता है जो तो फ़्रेमवर्क के लिए खास इवेंट ढूंढें, जो काम हो गया.

बाद में की जाने वाली विज़िट

हम अब तक पहली विज़िट के अनुभव पर ध्यान दे रहे थे, लेकिन अब क्या आपकी साइट पर बार-बार आने वाले सर्विस वर्कर के रजिस्ट्रेशन में देरी होती है? हालांकि, कुछ लोगों को इससे चौंकाना पड़ सकता है, लेकिन इसका कोई असर नहीं पड़ना चाहिए.

सर्विस वर्कर का रजिस्टर होने पर, वह install से होकर गुज़रता है और activate लाइफ़साइकल इवेंट के बारे में ज़्यादा जानें. सर्विस वर्कर के चालू हो जाने पर, यह किसी भी इवेंट के लिए fetch इवेंट मैनेज कर सकता है आपके वेब ऐप्लिकेशन पर बाद की विज़िट. सर्विस वर्कर पहले पहले इसके दायरे में आने वाले किसी भी पेज के लिए अनुरोध किया जाता है, जिससे आपको लगे कोई जानकारी नहीं है. अगर मौजूदा सर्विस वर्कर पहले से नहीं चल रहा था किसी पेज को विज़िट करने से, उसके लिए fetch इवेंट पूरे करने का मौका नहीं होगा नेविगेशन के अनुरोध शामिल हैं.

इसलिए, जब कोई सर्विस वर्कर काम कर रहा होता है, तो इससे कोई फ़र्क़ नहीं पड़ता कि आपने navigator.serviceWorker.register() या वाकई में, भले ही आप इसे कोई भी नाम दें. सर्विस वर्कर स्क्रिप्ट का यूआरएल बदलने तक, navigator.serviceWorker.register() असरदार तरीके से अगली विज़िट के दौरान नो-ऑप नहीं. यह समय काम का नहीं है.

जल्दी रजिस्टर करने की वजहें

क्या कोई ऐसी स्थिति होती है जिसमें आपके सर्विस वर्कर को जल्द से जल्द रजिस्टर किया जाता है क्या मुमकिन है? सबसे पहले दिमाग में यह बात आती है कि आपका सर्विस वर्कर कब clients.claim() पहली विज़िट के दौरान पेज का नियंत्रण लेने के लिए और सर्विस वर्कर को तेज़ी से रनटाइम करता है कैश मेमोरी में सेव करना इसके fetch हैंडलर में. ऐसी स्थिति में, सर्विस वर्कर को जल्द से जल्द ऐक्टिवेट करके, उन्हें इसके रनटाइम कैश में ऐसे संसाधनों को डाला जाता है जो बाद में काम आ सकते हैं. अगर आपने आपका वेब ऐप्लिकेशन इस कैटगरी में आता है, तो एक कदम पीछे जाकर पक्का करें कि आपके सर्विस वर्कर का install हैंडलर अनुरोध नहीं करता है ऐसे संसाधन जो मुख्य पेज के अनुरोधों के साथ बैंडविड्थ के लिए लड़ते हैं.

चीज़ों को आज़मा रहे हैं

अपने वेब ऐप्लिकेशन को Chrome में खोलना, पहली विज़िट को सिम्युलेट करने का एक शानदार तरीका है गुप्त मोड विंडो, और आप Chrome के नेटवर्क ट्रैफ़िक को देख सकते हैं DevTools. वेब के तौर पर डेवलपर को इंस्टॉल करते हैं, तो हो सकता है कि आप अपने वेब ऐप्लिकेशन के किसी स्थानीय इंस्टेंस को दर्जनों और दिन में कई बार. लेकिन अपनी साइट पर दोबारा जाने से, जब पहले से ही सर्विस वर्कर और पूरी तरह से पॉप्युलेटेड कैश मेमोरी में सेव किया जाता है, ताकि आपको अलग-अलग तरह का अनुभव न मिले और किसी संभावित समस्या को अनदेखा करना आसान है.

यहां एक उदाहरण दिया गया है, जिसमें बताया गया है कि रजिस्ट्रेशन की अवधि में अंतर क्या होता है उसके बारे में बताएँ. सैंपल वाले पेज पर जाते समय दोनों स्क्रीनशॉट लिए गए हैं ऐप्लिकेशन में धीमे कनेक्शन को सिम्युलेट करने के लिए, गुप्त मोड में नेटवर्क थ्रॉटलिंग का इस्तेमाल किया जाता है.

ऊपर दिया गया स्क्रीनशॉट, सैंपल में बदलाव करते समय नेटवर्क ट्रैफ़िक दिखाता है सर्विस वर्कर का रजिस्ट्रेशन जल्द से जल्द करने के लिए. आप देख सकते हैं पहले से कैश मेमोरी में सेव करने के अनुरोध (गियर के साथ एंट्री आइकॉन इनके बगल में, सर्विस वर्कर के install हैंडलर से शुरू होता है) पेज को दिखाने के लिए ज़रूरी दूसरे संसाधनों के अनुरोधों के साथ दिखाया जाता है.

ऊपर दिए गए स्क्रीनशॉट में, सर्विस वर्कर के पंजीकरण में पेज लोड हो गया. यह देखा जा सकता है कि पहले से कैश मेमोरी में सेव करने के अनुरोध तब तक शुरू नहीं होते, जब तक नेटवर्क से संसाधन फ़ेच कर लिए गए हैं, ताकि नेटवर्क से आने वाले किसी भी विवाद को खत्म किया जा सके बैंडविथ. इसके अलावा, क्योंकि हम जिन आइटम को प्रीकैश कर रहे हैं उनमें से कुछ पहले से ही मौजूद होते हैं ब्राउज़र की एचटीटीपी कैश मेमोरी—(from disk cache) वाले आइटम, साइज़ कॉलम—इन पर जाकर हम सर्विस वर्कर के कैश को पॉप्युलेट कर सकते हैं: नेटवर्क फिर से चालू करें.

बोनस पॉइंट अगर आप किसी असली और कम कीमत वाले डिवाइस से इस तरह का टेस्ट करते हैं मोबाइल नेटवर्क पर काम करता है. आप Chrome की रिमोट डीबगिंग की सुविधा का फ़ायदा ले सकते हैं सुविधाएं का उपयोग करने के लिए किए जा रहे टेस्ट से, असल दुनिया में आपके कई प्रॉडक्ट की परफ़ॉर्मेंस की जानकारी मिलती है उपयोगकर्ता.

नतीजा

संक्षेप में, यह सुनिश्चित करना कि आपके उपयोगकर्ताओं को पहली विज़िट का सबसे अच्छा अनुभव मिले शीर्ष प्राथमिकता होनी चाहिए. सर्विस वर्कर का रजिस्ट्रेशन इस तारीख तक रोककर रखना के लोड होने की वजह से यह पक्का किया जा सकता है कि आपको अब भी फ़ायदे मिलेंगे सर्विस वर्कर के साथ बार-बार मिलने वाले फ़ायदों के बारे में जानें.

यह पक्का करने का आसान तरीका कि आपके सर्विस वर्कर के शुरुआती काम में देरी हो पहला पेज लोड होने के बाद तक नीचे दी गई चीज़ों का इस्तेमाल करना है:

if ('serviceWorker' in navigator) {
    window.addEventListener('load', function() {
    navigator.serviceWorker.register('/service-worker.js');
    });
}