मुझसे सर्विस वर्कर कैश एपीआई के एक मामूली अपडेट पर, इस पोस्ट को लिखने के लिए कहा गया है. मुझे नहीं लगता था कि यह लेख खुद का लेख है, लेकिन एक लंबी बहस के बाद, जिसमें आखिर में रॉक-पेपर-कैंची के खेल में सब कुछ छूट गया, मैं हार गया, तो यह रहा.
क्या आप Chrome के सर्विस वर्कर कैश एपीआई को लागू करने से जुड़े अपडेट के बारे में सुनने के लिए तैयार हैं?
मुझे आपकी आवाज़ नहीं सुनाई दे रही! मैंने कहा, क्या आप Chrome के सर्विस वर्कर कैश एपीआई लागू करने से जुड़े अपडेट के बारे में सुनने के लिए तैयार हैं?
(आपके पढ़ने का तरीका सिर्फ़ तब हो सकता है, जब आप अपनी कुर्सी पर कूदते हों और ज़ोर से “YEAHHH!” बोले. इसके साथ-साथ, लासो घुमाने का दिखावा करना ज़रूरी नहीं है, लेकिन हम इसे बढ़ावा देते हैं).
cache.addAll Chrome 46 में आया
हां! सही जवाब! कैश! सभी बिंदुओं को जोड़ें! Chrome 46!
ठीक है, व्यंग्य करने वाली बात छोड़कर, यह असल में बहुत बड़ी समस्या है. ऐसा इसलिए, क्योंकि cache.addAll, कैश मेमोरी में सेव किए गए “ज़रूरी” पॉलीफ़िल का आखिरी हिस्सा है. इसका मतलब है कि अब इसकी ज़रूरत नहीं है.
यहां बताया गया है कि 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 के लिए ऐसा अनुरोध मिलता है जो कैश मेमोरी से नहीं मिलता है. आप मिलान करते समय url खोज स्ट्रिंग को अनदेखा करके इस पर काम कर सकते हैं:
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- अनुरोध आर्ग्युमेंट के तरीके को अनदेखा करें, ताकि पोस्ट करने का अनुरोध, कैश मेमोरी में मौजूद GET एंट्री से मैच कर सकेignoreVary- कैश मेमोरी में सेव किए गए जवाबों में, अलग-अलग हेडर को अनदेखा करें
Firefox पहले से ही अपनी सुविधा में इसका समर्थन करता है... ठीक है, अब आपको इसका पता चल गया है. जाएं कि बेन केली को बताएं कि Firefox में ये सभी चीज़ें लाने में वे कितने शानदार हैं.
अगर आपको कैश क्वेरी के विकल्पों को Chrome में लागू करने के तरीके का पालन करना है, तो crbug.com/426309 लेख पढ़ें.
“हमने कैशे एपीआई में क्या लागू किया है” से जुड़े एक और दिलचस्प चैप्टर के लिए अगली बार आपसे मुलाकात होगी!