Chrome 54 में CacheQueryOptions पाएं

जेफ़ पॉस्निक
जेफ़ पॉस्निक

अगर किसी सर्विस वर्कर में या window.caches के ज़रिए सीधे वेब ऐप्लिकेशन से कैश स्टोरेज एपीआई का इस्तेमाल किया जाता है, तो अच्छी खबर है: Chrome 54 और इसके बाद के वर्शन में, CacheQueryOptions का पूरा सेट काम करता है. इससे, कैश मेमोरी में सेव किए गए किसी भी रिस्पॉन्स को आसानी से ढूंढा जा सकता है.

कौनसे विकल्प उपलब्ध हैं?

CacheStorage.match() या Cache.match() पर किए जाने वाले किसी भी कॉल में, इन विकल्पों को सेट किया जा सकता है. सेट न होने पर, वे सभी डिफ़ॉल्ट रूप से false (या cacheName के लिए undefined) पर सेट हो जाते हैं. साथ ही, match() पर एक ही कॉल में कई विकल्पों का इस्तेमाल किया जा सकता है.

ignoreSearch

यह, मिलते-जुलते एल्गोरिदम को यूआरएल के search हिस्से को अनदेखा करने का निर्देश देता है. इसे यूआरएल क्वेरी पैरामीटर भी कहा जाता है. यह तब कारगर हो सकता है, जब आपके पास कोई ऐसा सोर्स यूआरएल हो जिसमें क्वेरी पैरामीटर शामिल हों. उदाहरण के लिए, आंकड़ों पर नज़र रखने के लिए, लेकिन कैश में किसी संसाधन की खास तरह से पहचान करने के मामले में यह पैरामीटर अहम न हो. उदाहरण के लिए, बहुत से लोग इस सर्विस वर्कर "गोचा" का शिकार हो गए हैं:

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('my-cache')
      .then(cache => cache.add('index.html'))
  );
});

self.addEventListener('fetch', event => {
  // Make sure this is a navigation request before responding.
  if (event.request.mode === 'navigation') {
    event.respondWith(
      caches.match(event.request) || fetch(event.request)
    );
  }
});

जब कोई उपयोगकर्ता सीधे index.html पर जाता है, तो इस तरह का कोड उम्मीद के मुताबिक काम करता है. हालांकि, अगर आपका वेब ऐप्लिकेशन इनबाउंड लिंक को ट्रैक करने के लिए किसी ऐनलिटिक्स प्रोवाइडर का इस्तेमाल करता है और उपयोगकर्ता index.html?utm_source=some-referral पर जाता है, तो क्या होगा? डिफ़ॉल्ट रूप से, index.html?utm_source=some-referral को caches.match() पर पास करने से index.html की एंट्री नहीं होगी. हालांकि, अगर ignoreSearch को true पर सेट किया गया है, तो कैश मेमोरी में सेव किया गया वह रिस्पॉन्स मिल सकता है जिसकी आपको उम्मीद है. इससे कोई फ़र्क़ नहीं पड़ता कि कौनसे क्वेरी पैरामीटर सेट किए गए हैं:

caches.match(event.request, {ignoreSearch: true})

cacheName

cacheName का इस्तेमाल तब किया जा सकता है, जब आपके पास एक से ज़्यादा कैश मेमोरी हों. साथ ही, आपको इसका जवाब किसी एक कैश मेमोरी में सेव करना हो. इसका इस्तेमाल करने से आपकी क्वेरी ज़्यादा असरदार हो सकती हैं (क्योंकि ब्राउज़र को सभी कैश मेमोरी के बजाय सिर्फ़ एक कैश मेमोरी में जांच करनी होती है). साथ ही, इससे आप दिए गए यूआरएल के लिए खास प्रतिक्रिया वापस पा सकते हैं. ऐसा तब किया जा सकता है, जब एक से ज़्यादा कैश मेमोरी में वह यूआरएल कुंजी के रूप में मौजूद हो. cacheName का असर सिर्फ़ CacheStorage.match() के साथ इस्तेमाल करने पर होता है, Cache.match() के साथ नहीं. इसकी वजह यह है कि Cache.match() पहले से ही कैश मेमोरी में सेव एक सिंगल नाम पर काम करता है.

// The following are functionally equivalent:
caches.open('my-cache')
  .then(cache => cache.match('index.html'));

// or...
caches.match('index.html', {cacheName: 'my-cache'});

ignoreMethod और ignoreVary

ignoreSearch और cacheName के मुकाबले ignoreMethod और ignoreVary की खासियत है, लेकिन वे खास मकसद को पूरा करते हैं.

ignoreMethod से, आपको Request ऑब्जेक्ट को पास करने की अनुमति मिलती है. इसमें, match() के पहले पैरामीटर के तौर पर कोई भी method (POST, PUT वगैरह) होता है. आम तौर पर, सिर्फ़ GET या HEAD अनुरोध किए जा सकते हैं.

// In a more realistic scenario, postRequest might come from
// the request property of a FetchEvent.
const postRequest = new Request('index.html', {method: 'post'});

// This will never match anything.
caches.match(postRequest);

// This will match index.html in any cache.
caches.match(postRequest, {ignoreMethod: true});

अगर इस नीति को true पर सेट किया जाता है, तो ignoreVary का मतलब है कि कैश मेमोरी में सेव किए गए रिस्पॉन्स में सेट किए गए किसी भी Vary हेडर को ध्यान में रखे बिना, इन्हें खोजा जाएगा. अगर आप जानते हैं कि आप 'अलग-अलग हेडर' का इस्तेमाल करने वाली कैश मेमोरी में सेव किए गए जवाबों को हैंडल नहीं कर रहे हैं, तो आपको यह विकल्प सेट करने की ज़रूरत नहीं है.

ब्राउज़र समर्थन

CacheQueryOptions सिर्फ़ उन ब्राउज़र पर काम करता है जो कैश मेमोरी एपीआई के साथ काम करते हैं. Chrome और Chromium पर आधारित ब्राउज़र के अलावा, फ़िलहाल यह Firefox तक सीमित है. यह पहले से ही, CacheQueryOptions के साथ काम करता है.

जो डेवलपर 54 से पहले के वर्शन में Chrome के वर्शन में CacheQueryOptions का इस्तेमाल करना चाहते हैं वे ऑर्थर स्टोलियर के सौजन्य से पॉलीफ़िल का इस्तेमाल कर सकते हैं.