मुझे सर्विस वर्कर कैश एपीआई में मामूली अपडेट के आधार पर, इस पोस्ट को लिखने के लिए कहा गया है. मुझे नहीं लगता था कि इस लेख का अपना खुद का लेख होना चाहिए, लेकिन एक लंबी बहस के बाद आखिर में रॉक-पेपर-सिज़र्स के खेल में चलने वाली बहस के बाद, मैं हार गई. इस तरह यह रहा.
क्या आपको Chrome में सर्विस वर्कर कैश एपीआई को लागू करने से जुड़े अपडेट के बारे में जानकारी चाहिए?
मुझे आपकी आवाज़ नहीं सुनाई दे रही! मैंने कहा, क्या आप Chrome में सर्विस वर्कर कैश एपीआई को लागू करने से जुड़े अपडेट के बारे में सुनने के लिए तैयार हैं?
(अगर आप कुर्सी पर कूद गए हों और “वाह!”
कैश मेमोरी.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 के लिए कोई अनुरोध मिलता है, तो वह कैश मेमोरी से नहीं मिलेगा. यूआरएल से मेल खाने वाले यूआरएल की खोज स्ट्रिंग को अनदेखा करके, इसे ठीक किया जा सकता है:
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 पर जाएं.
अगली बार फिर मिलेंगे “कैश एपीआई में हमने क्या लागू किया” के नए दिलचस्प चैप्टर के बारे में!