Chrome 54 में CacheQueryOptions पाएं

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

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

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

ignoreSearch

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

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 की मदद से, 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 का इस्तेमाल करना चाहते हैं वे आर्थर स्टोलियर की मदद से, पॉलीफ़िल का इस्तेमाल कर सकते हैं.