सर्विस वर्कर और कैश मेमोरी एपीआई का इस्तेमाल करने वाले डेवलपर को Chrome 71 में होने वाले दो छोटे बदलावों पर नज़र रखनी चाहिए. इन दोनों बदलावों से, Chrome को लागू करने का तरीका, स्पेसिफ़िकेशन और दूसरे ब्राउज़र के हिसाब से ज़्यादा बेहतर हो गया है.
एसिंक्रोनस exportScripts() को अनुमति न देना
importScripts()
आपकी मुख्य सेवा वर्कर स्क्रिप्ट को, मौजूदा प्रोसेस को रोकने, दिए गए यूआरएल से अतिरिक्त कोड डाउनलोड करने, और मौजूदा ग्लोबल स्कोप में इसे पूरा करने के लिए कहता है. इसके बाद, मुख्य सेवा वर्कर स्क्रिप्ट फिर से काम करना शुरू कर देती है. importScripts() तब काम आता है, जब
संगठन की वजहों से, मुख्य सर्विस वर्कर की स्क्रिप्ट को छोटे-छोटे हिस्सों में बांटना हो या सर्विस वर्कर में फ़ंक्शन जोड़ने के लिए, तीसरे पक्ष का कोड इस्तेमाल करना हो.
ब्राउज़र, "कुछ सिंक्रोनस कोड डाउनलोड और चलाएं" की परफ़ॉर्मेंस से जुड़ी समस्याओं को कम करने की कोशिश करते हैं. इसके लिए, वे importScripts() के ज़रिए खींची गई किसी भी चीज़ को अपने-आप कैश मेमोरी में सेव कर लेते हैं. इसका मतलब है कि शुरुआती डाउनलोड के बाद, इंपोर्ट किए गए कोड को चलाने में बहुत कम समय लगता है.
इसके काम करने के लिए ब्राउज़र को यह पता होना चाहिए कि शुरुआती इंस्टॉलेशन के बाद, सर्विस वर्कर में कोई "सरप्राइज़" कोड इंपोर्ट नहीं होगा.
सर्विस वर्कर स्पेसिफ़िकेशन के मुताबिक, importScripts() को कॉल करने की सुविधा सिर्फ़ टॉप-लेवल सर्विस वर्कर स्क्रिप्ट के सिंक्रोनस एक्ज़ीक्यूशन के दौरान या install हैंडलर में एसिंक्रोनस रूप से काम करनी चाहिए.
Chrome 71 से पहले, install हैंडलर के बाहर, importScripts() को असिंक्रोनस तरीके से कॉल करने पर, यह काम करता था. Chrome 71 से शुरू होने वाले वर्शन में, ऐसे कॉल से रनटाइम अपवाद होता है. ऐसा तब तक होता है, जब तक कि उसी यूआरएल को पहले install हैंडलर में इंपोर्ट नहीं किया गया हो. यह अन्य ब्राउज़र के व्यवहार से मेल खाता है.
इस तरह के कोड के बजाय:
// This only works in Chrome 70 and below.
self.addEventListener('fetch', event => {
importScripts('my-fetch-logic.js');
event.respondWith(self.customFetchLogic(event));
});
आपका सर्विस वर्कर कोड ऐसा दिखना चाहिए:
// Move the importScripts() to the top-level scope.
// (Alternatively, import the same URL in the install handler.)
importScripts('my-fetch-logic.js');
self.addEventListener('fetch', event => {
event.respondWith(self.customFetchLogic(event));
});
cache.addAll() फ़ंक्शन में दोहराए गए यूआरएल का इस्तेमाल बंद किया जा रहा है
अगर सेवा वर्कर के साथ-साथ कैश स्टोरेज एपीआई का इस्तेमाल किया जा रहा है, तो काम के स्पेसिफ़िकेशन के मुताबिक, Chrome 71 में एक और छोटा बदलाव किया गया है. जब एक ही यूआरएल को cache.addAll() के लिए एक ही कॉल में कई बार पास किया जाता है, तो स्पेसिफ़िकेशन के मुताबिक, कॉल से मिलने वाले प्रॉमिस को अस्वीकार कर देना चाहिए.
Chrome 71 के पहले के वर्शन में, इस तरह की कार्रवाई का पता नहीं चलता था और डुप्लीकेट यूआरएल को अनदेखा कर दिया जाता था.
यह लॉगिंग, Chrome 72 के आने से पहले की तैयारी है. इसमें, डुप्लीकेट यूआरएल की वजह से, सिर्फ़ चेतावनी लॉग करने के बजाय, cache.addAll() को अस्वीकार कर दिया जाएगा. अगर cache.addAll() को InstallEvent.waitUntil() को पास की गई प्रोमिस चेन के हिस्से के तौर पर कॉल किया जा रहा है, तो अस्वीकार किए जाने की वजह से आपका सर्विस वर्कर इंस्टॉल नहीं हो सकता.
यहां बताया गया है कि आपको किस तरह समस्या हो सकती है:
const urlsToCache = [
'/index.html',
'/main.css',
'/app.js',
'/index.html', // Oops! This is listed twice and should be removed.
];
self.addEventListener('install', event => {
event.waitUntil(
caches.open('my-cache').then(cache => cache.addAll(urlsToCache))
);
});
यह पाबंदी सिर्फ़ cache.addAll() को पास किए जा रहे असली यूआरएल पर लागू होती है. साथ ही, '/' और '/index.html' जैसे अलग-अलग यूआरएल वाले दो मिलते-जुलते रिस्पॉन्स को कैश मेमोरी में सेव करने पर, रिस्पॉन्स अस्वीकार नहीं किया जाएगा.
सर्विस वर्कर लागू करने की प्रक्रिया की बड़े पैमाने पर जांच करना
इस समय सर्विस वर्कर, सभी मुख्य "सदाबहार" ब्राउज़र पर बड़े पैमाने पर लागू हो जाते हैं. अगर आपने अपने प्रगतिशील वेब ऐप्लिकेशन को कई ब्राउज़र पर नियमित तौर पर टेस्ट किया है या आपके पास ऐसे कई उपयोगकर्ता हैं जो Chrome का इस्तेमाल नहीं करते, तो हो सकता है कि आपने पहले ही इस गड़बड़ी का पता लगा लिया हो और अपना कोड अपडेट कर लिया हो. हालांकि, अगर आपको दूसरे ब्राउज़र में यह व्यवहार नहीं दिखता है, तो हम Chrome के व्यवहार में बदलाव करने से पहले, आपको इस बदलाव के बारे में बताना चाहते हैं.