जेक आर्किबाल्ड ने अपनी डेवलपर स्किल के खराब होने और कम होने की चिंता करने के अलावा, यह भी बताया कि सेवा वर्कर का सही तरीके से इस्तेमाल करके, अपनी साइट या ऐप्लिकेशन की परफ़ॉर्मेंस को काफ़ी बेहतर बनाया जा सकता है. ज़्यादा जानकारी के लिए वीडियो देखें.
अगर आपको पेज लोड होने में लगने वाले समय को बेहतर बनाना है, जैसा कि जैक ने सुझाया है, तो आपको यह समझना होगा कि सेवा वर्कर आपके पेज के अनुरोधों पर कैसे असर डालते हैं.
रिसॉर्स टाइमिंग और उपयोगकर्ता टाइमिंग एपीआई, कई साइटों के आरयूएम (रीयल यूज़र मॉनिटरिंग) इन्फ़्रास्ट्रक्चर के अहम कॉम्पोनेंट हैं. इनकी मदद से, यह पूरी तरह से समझा जा सकता है कि आपके सभी उपयोगकर्ता आपकी साइट की परफ़ॉर्मेंस को कैसे देखते हैं. इसका एक और इस्तेमाल, कॉन्टेंट इंजेक्शन का पता लगाना है. कम शब्दों में, इससे आपको अपनी साइट से किए गए हर वेब अनुरोध के बारे में ज़्यादा जानकारी मिलती है. हालांकि, ऐसा तब तक ही होता है, जब तक आपकी साइट पर कोई सेवा वर्कर या वेब वर्कर मौजूद न हो.
यहां एक उदाहरण दिया गया है, जिसमें बताया गया है कि किसी ऐसे डोमेन से किए गए सभी अनुरोधों की सूची पाने के लिए, इसका इस्तेमाल कैसे किया जा सकता है जो मौजूदा डोमेन नहीं है.
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;
};
रिसॉर्स टाइमिंग और उपयोगकर्ता टाइमिंग एपीआई, इंजीनियर के दिमाग में सेवा वर्कर के आने से पहले बनाए और लागू किए गए थे. ऊपर दिया गया कोड यह समझ नहीं पाएगा कि सेवा वर्कर का उस पर क्या असर पड़ा.
Chrome 45 (जुलाई 2015 में बीटा वर्शन) में हाल ही में किए गए बदलावों से आपको मदद मिलेगी. इन बदलावों की मदद से, सभी तरह के वर्कर्स (वेब और सेवा वर्कर्स) के पास रिसॉर्स टाइमिंग और उपयोगकर्ता टाइमिंग एपीआई का ऐक्सेस होगा. इससे, आपको अपने सभी उपयोगकर्ताओं के लिए नेटवर्क की परफ़ॉर्मेंस को बेहतर बनाने में मदद मिलेगी.
सेवा वर्कर से परफ़ॉर्मेंस मेट्रिक ऐक्सेस करना
सबसे बड़ा बदलाव यह है कि वर्कर्स कॉन्टेक्स्ट (वेब और ServiceWorkers) में performance ऑब्जेक्ट जोड़ा गया है. इससे, अब आपको वर्कर्स कॉन्टेक्स्ट में किए गए सभी अनुरोधों की परफ़ॉर्मेंस के समय की जानकारी मिलेगी. साथ ही, JS एक्सीक्यूशन को मेज़र करने के लिए, अपने मार्क भी सेट किए जा सकेंगे. अगर आपको सिर्फ़ मौजूदा विंडो के संदर्भ में जानकारी दिखती है, तो आपको इनके लिए समय की अहम जानकारी नहीं दिखेगी:
- सेवा वर्कर के
oninstallइवेंट में किए गएfetch()अनुरोध onpushइवेंट में डेटा को कैश मेमोरी में सेव करते समय किए गएfetch()अनुरोधों को अब ट्रैक किया जा सकता है. इससे, यह समझने में मदद मिलती है कि आपके उपयोगकर्ताओं को कैसी परफ़ॉर्मेंस दिख रही है.- आखिर में,
fetch()अनुरोध, जिन्हेंonfetchहैंडलर ने बनाया और इंटरसेप्ट किया है.
आखिरी बात अहम है. सेवा वर्कर को एक प्रॉक्सी के तौर पर भी देखा जा सकता है, जो वेब यूज़र इंटरफ़ेस (यूआई) और नेटवर्क के बीच काम करता है. 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 जैसे टूल, नेविगेशन टाइमिंग एपीआई का इस्तेमाल करके, साइट की स्पीड का डेटा पहले से ही रिपोर्ट करते हैं. हालांकि, उन्हें अपडेट करना होगा, ताकि वर्कर्स कॉन्टेक्स्ट से परफ़ॉर्मेंस का विश्लेषण शामिल किया जा सके.
क्या नेविगेशन टाइमिंग एपीआई, सेवा वर्कर के लिए उपलब्ध होगा
फ़िलहाल, सर्विस वर्कर के संदर्भ में नेविगेशन टाइमिंग एपीआई जोड़ने का कोई प्लान नहीं है, क्योंकि सर्विस वर्कर में पारंपरिक नेविगेशन नहीं होते. दिलचस्प बात यह है कि सर्विस वर्कर के लिए, पेजों के उस सेट में हर नेविगेशन, संसाधन फ़ेच करने जैसा दिखता है जिसे सर्विस वर्कर कंट्रोल करता है. सिर्फ़ इस वजह से, सर्विस वर्कर आपके वेब ऐप्लिकेशन में परफ़ॉर्मेंस के ज़्यादातर लॉजिक को एक ही जगह पर इकट्ठा करने का एक बेहतरीन तरीका है.