जेक आर्चिबाल्ड को डेवलपर बनने की अपनी स्किल के खराब होने और खराब होने की चिंता छोड़कर, उन्होंने एक मज़बूत बताया कि सर्विस वर्कर का इस्तेमाल करके, अपनी साइट या ऐप्लिकेशन की परफ़ॉर्मेंस को बेहतर तरीके से बेहतर बनाया जा सकता है. खास जानकारी के लिए यह वीडियो देखें.
जेक के सुझाव के मुताबिक, अगर आप पेज लोड होने में लगने वाले समय को ज़्यादा बेहतर बनाना चाहते हैं, तो आपको यह समझने की ज़रूरत है कि सर्विस वर्कर आपके पेज के अनुरोधों पर किस तरह असर डालते हैं.
संसाधन समय और उपयोगकर्ता समय एपीआई कई साइटों के RUM (असली उपयोगकर्ता की निगरानी) इन्फ़्रास्ट्रक्चर में अहम कॉम्पोनेंट हैं. इससे आपको अच्छी तरह से यह समझने में मदद मिलती है कि आपके सभी उपयोगकर्ता, आपकी साइट की परफ़ॉर्मेंस को कैसे देखते हैं (इस्तेमाल का एक अन्य उदाहरण, कॉन्टेंट इंजेक्शन का पता लगाना है). संक्षेप में, इसकी मदद से आप अपनी साइट से किए गए हर वेब अनुरोध के करीब हर पहलू को समझ सकते हैं, बशर्ते आपके पास कोई सर्विस वर्कर या वेब वर्कर न हो.
इस उदाहरण में यह बताया गया है कि किसी ऐसे डोमेन पर किए गए सभी अनुरोधों की सूची पाने के लिए इसका इस्तेमाल कैसे किया जा सकता है.
var getThirdPartyRequests = function() {
var thirdPartyRequests = [];
var requests = window.performance.getEntriesByType("resource");
var currentHost = window.location.host
for(var requestIdx = 0; requestIdx < requests.length; requestIdx++) {
var request = requests[requestIdx];
var url = new URL(request.name);
var host = url.host;
if(host != currentHost) {
thirdPartyRequests.push(request);
}
}
return thirdPartyRequests;
};
Resource Timing और User Timing API को बनाने और लागू करने से पहले, सर्विस वर्कर के ऊपर इंजीनियर की नज़र में झिलमिलाहट दिखने लगी और ऊपर दिया गया कोड यह नहीं समझ पाया कि सर्विस वर्कर ने इस पर क्या असर डाला.
Chrome 45 (जुलाई 2015 में बीटा वर्शन) में हाल ही में हुए बदलावों का सेट, सभी तरह के कर्मचारियों (वेब और सर्विस वर्कर) को Resource Timing और User Timing API का ऐक्सेस देगा. इससे आपको अपने सभी उपयोगकर्ताओं के नेटवर्क पर बेहतर तरीके से काम करने में मदद मिलेगी.
सर्विस वर्कर से परफ़ॉर्मेंस मेट्रिक ऐक्सेस करना
performance ऑब्जेक्ट को वर्कर के कॉन्टेक्स्ट (वेब और सर्विस वर्कर) में जोड़ना सबसे बड़ा बदलाव है. इसकी मदद से, वर्कर से जुड़े सभी अनुरोधों की परफ़ॉर्मेंस टाइमिंग को समझा जा सकेगा. साथ ही, JS एक्ज़ीक्यूशन के लिए मेज़रमेंट के लिए अपने मार्क भी सेट किए जा सकेंगे. अगर आपको सिर्फ़ यह देखने की सुविधा मिलती है कि
मौजूदा विंडो के संदर्भ में क्या हो रहा है, तो यहां से ज़रूरी समय की जानकारी आपसे छूट जाएगी:
- सर्विस वर्कर के
oninstallइवेंट में किए गएfetch()अनुरोध onpushइवेंट में डेटा कैश मेमोरी में सेव करते समय किए गएfetch()अनुरोधों को अब ट्रेस किया जा सकता है, ताकि उपयोगकर्ताओं की परफ़ॉर्मेंस को समझा जा सके.- आखिर में,
onfetchहैंडलिंग की मदद सेfetch()अनुरोध किया गया और उसे बीच में रोका गया.
आखिरी बात ज़रूरी है. सर्विस वर्कर के बारे में सोचने का एक तरीका यह है कि वह प्रॉक्सी के तौर पर, वेब यूज़र इंटरफ़ेस (यूआई) और नेटवर्क के बीच मौजूद हो. window पर मौजूद performance ऑब्जेक्ट को, अनुरोध की गई कार्रवाई का सिर्फ़ समय और जानकारी दिखती है. उसे क्लाइंट और नेटवर्क के बीच सर्विस वर्कर के बारे में कोई जानकारी नहीं होती है. इसलिए, वह सर्विस वर्कर पर पड़ने वाले असर को नहीं समझ सकता.
मैं इसका इस्तेमाल कैसे करूं?
पहले ऑफ़लाइन समर्थन करने वाले सामान्य सर्विस वर्कर के पास एक इंस्टॉल चरण होगा, जहां वह सभी एसेट को बाद में उपयोग के लिए डाउनलोड और सेव कर लेगा
इसका इस्तेमाल, इंस्टॉल करने के चरण के समय से जुड़े डेटा को रिकॉर्ड और लॉग करने के लिए किया जा सकता है. इससे, उपयोगकर्ताओं के बहुत ज़्यादा इस्तेमाल के आधार पर, इंस्टॉल की परफ़ॉर्मेंस को बेहतर बनाने के बारे में कुछ मेज़र किए जा सकते हैं.
self.addEventListener("install", function() {
var urls = [
'/',
'/images/chrome-touch-icon-192x192.png',
'/images/ic_add_24px.svg',
'/images/side-nav-bg@2x.jpg',
'/images/superfail.svg',
'/scripts/voicememo-core.js',
'/styles/voicememo-core.css',
'/third_party/Recorderjs/recorder.js',
'/third_party/Recorderjs/recorderWorker.js',
'/third_party/Recorderjs/wavepcm.js',
'/third_party/moment.min.js',
'/favicon.ico',
'/manifest.json'
];
urls = urls.map(function(url) {
return new Request(url, {credentials: 'include'});
});
event.waitUntil(
caches
.open(CACHE_NAME + '-v' + CACHE_VERSION)
.then(function(cache) {
// Fetch all the URL's and store in the cache
return cache.addAll(urls);
})
.then(function () {
// Analyze all the requests
var requests = self.performance.getEntriesByType("resource");
// Loop across all the requests and save the timing data.
return;
})
);
});
आज कई साइटें यह समझने के लिए RUM का इस्तेमाल करती हैं कि उनके ज़्यादातर उपयोगकर्ता उनकी साइट का कैसा अनुभव करते हैं. Google Analytics जैसे टूल पहले ही नेविगेशन टाइमिंग एपीआई का इस्तेमाल करके, साइट स्पीड के डेटा की रिपोर्ट करते हैं. हालांकि, वर्कर के कॉन्टेक्स्ट में परफ़ॉर्मेंस का विश्लेषण शामिल करने के लिए, उन्हें अपडेट करना होगा.
क्या नेविगेशन टाइमिंग एपीआई, सर्विस वर्कर के पास पहुंच जाएगा
सर्विस वर्कर के मामले में नेविगेशन टाइमिंग एपीआई को जोड़ने की कोई योजना अभी नहीं है, क्योंकि सर्विस वर्कर में कोई परंपरागत नेविगेशन नहीं होता. दिलचस्प बात यह है कि सर्विस वर्कर के लिए सर्विस वर्कर के ज़रिए कंट्रोल किए गए पेजों में हर नेविगेशन, रिसॉर्स फ़ेच की तरह दिखता है. अकेले इसकी मदद से सर्विस वर्कर, आपके वेब ऐप्लिकेशन में परफ़ॉर्मेंस लॉजिक को एक ही जगह से इकट्ठा करने का शानदार तरीका बन जाते हैं.