मुझे सेवा वर्कर कैश मेमोरी एपीआई के एक छोटे से अपडेट के बारे में यह पोस्ट लिखने के लिए कहा गया है. मुझे नहीं लगता था कि इस बारे में एक लेख लिखने की ज़रूरत है. हालांकि, लंबी बहस के बाद, आखिरकार यह लेख लिखना पड़ा.
क्या आप Chrome में service worker cache API को लागू करने से जुड़े अपडेट के बारे में जानने के लिए तैयार हैं?
मुझे आपकी आवाज़ नहीं सुनाई दे रही है! मैंने कहा था, क्या आप Chrome में service worker cache API को लागू करने के अपडेट के बारे में जानने के लिए तैयार हैं?
(अगर आपने अपनी कुर्सी पर कूदकर “YEAHHH!” चिल्लाया है, तो ही आगे पढ़ें. साथ ही, रस्सी घुमाने की नकल करना ज़रूरी नहीं है, लेकिन इसे करने का सुझाव दिया जाता है).
cache.addAll, Chrome 46 में उपलब्ध हुआ
हां! सही जवाब! कैश! बिंदु के साथ सभी को जोड़ें! Chrome 46!
ठीक है, ठीक है, ज़्यादा गंभीरता से न लें. असल में, यह काफ़ी बड़ी बात है, क्योंकि cache.addAll, कैश मेमोरी में सेव किए गए “ज़रूरी” डेटा को polyfill करने वाले टूल का आखिरी हिस्सा है. इसका मतलब है कि अब इसकी ज़रूरत नहीं है.
cache.addAll इस तरह काम करता है:
// when the browser sees this SW for the first time
self.addEventListener('install', function(event) {
// wait until the following promise resolves
event.waitUntil(
// open/create a cache named 'mysite-static-v1'
caches.open('mysite-static-v1').then(function(cache) {
// fetch and add this stuff to it
return cache.addAll([
'/',
'/css/styles.css',
'/js/script.js',
'/imgs/cat-falls-over.gif'
]);
})
);
});
addAll, यूआरएल और अनुरोधों की एक कलेक्शन लेता है, उन्हें फ़ेच करता है, और उन्हें कैश मेमोरी में जोड़ता है. यह ट्रांज़ैक्शनल है - अगर फ़ेच करने या लिखने में से कोई भी काम पूरा नहीं होता है, तो पूरा ऑपरेशन पूरा नहीं होता और कैश मेमोरी को उसकी पिछली स्थिति में लौटा दिया जाता है. यह सुविधा, ऊपर बताए गए इंस्टॉल ऑपरेशन के लिए खास तौर पर फ़ायदेमंद होती है. इसमें, एक बार में होने वाली गड़बड़ी को पूरी गड़बड़ी माना जाता है.
ऊपर दिया गया उदाहरण, सर्विस वर्कर में है. हालांकि, कैश मेमोरी एपीआई को पेजों से भी पूरी तरह ऐक्सेस किया जा सकता है.
Firefox के डेवलपर वर्शन में, यह एपीआई पहले से काम करता है. इसलिए, यह सेवा वर्कर के बाकी वर्शन के साथ लॉन्च होगा.
हालांकि, यह सिर्फ़ एक अपडेट नहीं है. हम कैश मेमोरी से जुड़े और भी सुधार करने जा रहे हैं…
cache.matchAll फ़ंक्शन, Chrome 47 में उपलब्ध होगा
इससे आपको कई मैच मिल सकते हैं:
caches.open('mysite-static-v1').then(function(cache) {
return cache.matchAll('/');
}).then(function(responses) {
// …
});
ऊपर दिए गए फ़ॉर्मूला से, mysite-static-v1 में मौजूद वह सब कुछ मिल जाएगा जो / से मेल खाता है. कैश मेमोरी की मदद से, हर यूआरएल के लिए एक से ज़्यादा एंट्री बनाई जा सकती हैं. ऐसा तब किया जा सकता है, जब वे यूआरएल अलग-अलग कैश मेमोरी में सेव किए जा सकते हों. उदाहरण के लिए, जब उनके Vary हेडर अलग-अलग हों.
Firefox के डेवलपर वर्शन में, यह सुविधा पहले से ही काम करती है. इसलिए, यह सुविधा, सेवा वर्कर के बाकी वर्शन के साथ लॉन्च होगी.
Chrome पर कैश मेमोरी में सेव की गई क्वेरी के विकल्प जल्द ही उपलब्ध होंगे
यहां एक स्टैंडर्ड फ़ेच हैंडलर दिया गया है:
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request).then(function(response) {
return response || fetch(event.request);
})
);
});
अगर हमारे पास / कैश मेमोरी में सेव है और हमें / का अनुरोध मिलता है, तो उसे कैश मेमोरी से दिखाया जाएगा. हालांकि, अगर हमें /?utm_source=blahblahwhatever के लिए ऐसा अनुरोध मिलता है जो कैश मेमोरी से नहीं मिलेगा. मैच करते समय यूआरएल सर्च स्ट्रिंग को अनदेखा करके, इस समस्या को हल किया जा सकता है:
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request, {
ignoreSearch: true
}).then(function(response) {
return response || fetch(event.request);
})
);
});
अब /?utm_source=blahblahwhatever को / की एंट्री से मैच कर दिया जाएगा! ये विकल्प उपलब्ध हैं:
ignoreSearch- अनुरोध के आर्ग्युमेंट और कैश मेमोरी में सेव किए गए अनुरोध, दोनों में यूआरएल के खोज वाले हिस्से को अनदेखा करेंignoreMethod- अनुरोध के आर्ग्युमेंट के तरीके को अनदेखा करें, ताकि पोस्ट अनुरोध, कैश मेमोरी में मौजूद जीईटी एंट्री से मेल खा सकेignoreVary- कैश मेमोरी में सेव किए गए रिस्पॉन्स में, 'अलग-अलग वैरिएंट के लिए अलग-अलग हेडर' को अनदेखा करें
Firefox में पहले से ही यह सुविधा उपलब्ध है… ठीक है, अब आपको पता चल गया होगा. बेन केली को बताएं कि Firefox में यह सुविधा उपलब्ध कराने के लिए वे कितने अच्छे हैं.
अगर आपको Chrome में कैश मेमोरी क्वेरी के विकल्पों को लागू करने के बारे में जानना है, तो crbug.com/426309 पर जाएं.
“हमने कैश मेमोरी वाले API में क्या लागू किया है” के अगले दिलचस्प चैप्टर के लिए, अगली बार फिर मिलते हैं!