सर्विस वर्कर और कैश मेमोरी एपीआई का इस्तेमाल करने वाले डेवलपर को इन दो बातों का ध्यान रखना चाहिए 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));
});
कैश मेमोरी में भेजे गए दोहराए गए यूआरएल को रोकना.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 के व्यवहार को बदलने से पहले इस बदलाव के बारे में बताना चाहते थे.