Chrome 54 में CacheQueryOptions पाएं

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

मेरे पास कौनसे विकल्प हैं?

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

ignoreSearch

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

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

ignoreMethod और ignoreVary, ignoreSearch और cacheName की तुलना में थोड़े अलग हैं. हालांकि, ये खास कामों के लिए इस्तेमाल किए जाते हैं.

ignoreMethod की मदद से, match() के पहले पैरामीटर के तौर पर, Request ऑब्जेक्ट को पास किया जा सकता है. इस ऑब्जेक्ट में कोई भी 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 हेडर को ध्यान में रखे बिना, कैश मेमोरी में लुकअप किया जाएगा. अगर आपको पता है कि आपको Vary हेडर का इस्तेमाल करने वाले कैश मेमोरी में सेव किए गए रिस्पॉन्स नहीं मिल रहे हैं, तो आपको यह विकल्प सेट करने की ज़रूरत नहीं है.

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

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

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