कैश एपीआई: एक छोटी सी गाइड

अपने ऐप्लिकेशन के डेटा को ऑफ़लाइन उपलब्ध कराने के लिए, कैश एपीआई इस्तेमाल करने का तरीका जानें.

Pete LePage

कैश एपीआई, नेटवर्क को सेव और वापस पाने का सिस्टम है उनके सवालों और उनके जवाबों के बारे में बताएँ. ये नियमित अनुरोध हो सकते हैं आपका ऐप्लिकेशन चलाने के दौरान तैयार किए गए रिस्पॉन्स और वे इन्हें सिर्फ़ बाद में इस्तेमाल करने के लिए डेटा को सेव करने के मकसद से बनाया जाना चाहिए.

कैश एपीआई को सर्विस वर्कर के लिए बनाया गया था, ताकि नेटवर्क के अनुरोधों को कैश मेमोरी में सेव किया जा सके ताकि वे तेज़ी से रिस्पॉन्स दे सकें, चाहे नेटवर्क की रफ़्तार तेज़ हो या उपलब्धता. हालांकि, इस एपीआई का इस्तेमाल सामान्य स्टोरेज तरीके के तौर पर भी किया जा सकता है.

YouTube TV कहां उपलब्ध है?

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

const cacheAvailable = 'caches' in self;

कैश एपीआई को किसी विंडो, iframe, वर्कर या सर्विस वर्कर से ऐक्सेस किया जा सकता है.

क्या-क्या सेव किया जा सकता है

कैश मेमोरी सिर्फ़ Request और Response ऑब्जेक्ट, जो एचटीटीपी अनुरोधों और जवाबों को दिखाते हैं, क्रम से. हालांकि, अनुरोधों और जवाबों में किसी भी तरह का डेटा शामिल हो सकता है जिसे एचटीटीपी से ट्रांसफ़र किया जा सकता है.

कितना संग्रहित किया जा सकता है?

कम शब्दों में कहें, तो बहुत ज़्यादा, कम से कम कुछ सौ मेगाबाइट और संभावित रूप से या उससे ज़्यादा गीगाबाइट (जीबी) है. ब्राउज़र अलग-अलग तरह से लागू होते हैं, लेकिन आम तौर पर, यह इस बात पर निर्भर करता है कि डिवाइस.

कैश मेमोरी बनाना और खोलना

कैश मेमोरी खोलने के लिए, caches.open(name) तरीका इस्तेमाल करके, का इस्तेमाल एक पैरामीटर के रूप में किया जा सकता है. अगर नाम वाली कैश मेमोरी मौजूद नहीं है, तो इसका मतलब है कि बनाया गया. इस तरीके से Promise नतीजा मिलता है, जो Cache ऑब्जेक्ट के साथ रिज़ॉल्व हो जाता है.

const cache = await caches.open('my-cache');
// do something with cache...

कैश मेमोरी में जोड़ना

कैश मेमोरी में आइटम जोड़ने के तीन तरीके हैं - add, addAll, और put. तीनों तरीके Promise दिखाते हैं.

cache.add

सबसे पहले, cache.add() हैं. इसमें एक पैरामीटर की ज़रूरत होती है, यानी कि Request या यूआरएल (string). यह नेटवर्क से अनुरोध करता है और रिस्पॉन्स को सेव करता है को कैश मेमोरी में सेव करें. अगर फ़ेच नहीं किया जा सकता या अगर रिस्पॉन्स का स्टेटस कोड 200 रेंज में नहीं है, तो कुछ भी सेव नहीं किया जाता और Promise अस्वीकार कर देता है. ध्यान दें कि क्रॉस-ऑरिजिन ऐसे अनुरोध सेव नहीं किए जा सकते जो सीओआरएस मोड में नहीं हैं, क्योंकि वेstatus 0. ऐसे अनुरोध सिर्फ़ put में सेव किए जा सकते हैं.

// Retreive data.json from the server and store the response.
cache.add(new Request('/data.json'));

// Retreive data.json from the server and store the response.
cache.add('/data.json');

cache.addAll

इसके बाद, cache.addAll() है. यह add() की तरह ही काम करता है, लेकिन Request ऑब्जेक्ट या यूआरएल (strings) का अरे. यह सुविधा इसके जैसे काम करती है हर अनुरोध के लिए cache.add को कॉल किया जा रहा है. हालांकि, Promise किसी एक अनुरोध को कैश मेमोरी में सेव न किए जाने पर, उसे अस्वीकार कर दिया जाता है.

const urls = ['/weather/today.json', '/weather/tomorrow.json'];
cache.addAll(urls);

इनमें से हर एक मामले में, एक नई एंट्री, मेल खाने वाली मौजूदा एंट्री की जगह ले लेती है. यह इन्हीं मिलते-जुलते नियमों का इस्तेमाल करता है, जो वापस पाना.

cache.put

आखिर में, cache.put() की मदद से, किसी एक जवाब को सेव किया जा सकता है या अपने खुद के Response बनाएं और सेव करें. इसमें दो पैरामीटर का इस्तेमाल करें. पहला यूआरएल या तो Request ऑब्जेक्ट या यूआरएल (string) हो सकता है. दूसरा Response होना चाहिए, चाहे वह नेटवर्क से हो या आपके कोड.

// Retrieve data.json from the server and store the response.
cache.put('/data.json');

// Create a new entry for test.json and store the newly created response.
cache.put('/test.json', new Response('{"foo": "bar"}'));

// Retrieve data.json from the 3rd party site and store the response.
cache.put('https://example.com/data.json');

add() या addAll() की तुलना में, put() तरीके की अनुमति ज़्यादा है और आपको गैर-सीओआरएस के जवाबों या ऐसे अन्य जवाबों को सेव करने की अनुमति मिलेगी जहां स्थिति रिस्पॉन्स का कोड 200 रेंज में नहीं है. यह किसी पिछले कॉलम को ओवरराइट कर देगा उसी अनुरोध के लिए रिस्पॉन्स शामिल करें.

अनुरोध ऑब्जेक्ट बनाना

सेव की जा रही चीज़ के लिए, यूआरएल का इस्तेमाल करके Request ऑब्जेक्ट बनाएं:

const request = new Request('/my-data-store/item-id');

रिस्पॉन्स ऑब्जेक्ट के साथ काम करना

Response ऑब्जेक्ट कंस्ट्रक्टर, कई तरह का डेटा स्वीकार करता है. इनमें ये शामिल हैं Blob, ArrayBuffer, FormData ऑब्जेक्ट, और स्ट्रिंग.

const imageBlob = new Blob([data], {type: 'image/jpeg'});
const imageResponse = new Response(imageBlob);
const stringResponse = new Response('Hello world');

सही हेडर सेट करके, Response का MIME टाइप सेट किया जा सकता है.

  const options = {
    headers: {
      'Content-Type': 'application/json'
    }
  }
  const jsonResponse = new Response('{}', options);

अगर आपने Response को वापस लाया है और उसके मुख्य हिस्से का इस्तेमाल करना है, तो आपको इस्तेमाल किए जा सकते हैं. हर नतीजा, Promise गड़बड़ी का जवाब देता है, जिसका समाधान हो जाता है वैल्यू डाली गई है.

उदाहरण के लिए

const response = new Response('Hello world');
const buffer = await response.arrayBuffer();
console.log(new Uint8Array(buffer));
// Uint8Array(11) [72, 101, 108, 108, 111, 32, 119, 111, 114, 108, 100]

कैश मेमोरी से वापस लाया जा रहा है

कैश मेमोरी में किसी आइटम को ढूंढने के लिए, match तरीके का इस्तेमाल किया जा सकता है.

const response = await cache.match(request);
console.log(request, response);

अगर request एक स्ट्रिंग है, तो ब्राउज़र कॉल करके उसे Request में बदल देता है new Request(request). यह फ़ंक्शन Promise दिखाता है, जिसका समाधान होता है अगर कोई मिलती-जुलती एंट्री मिलती है, तो एक Response या अगर ऐसा नहीं है, तो undefined.

दो Requests मैच होते हैं या नहीं, यह पता लगाने के लिए ब्राउज़र यूआरएल के साथ-साथ अन्य डेटा का भी इस्तेमाल करता है. दो अनुरोधों को अलग तब माना जाता है, जब उनके पास क्वेरी स्ट्रिंग होती हैं. Vary हेडर या एचटीटीपी के तरीके (GET, POST, PUT वगैरह).

आप विकल्प ऑब्जेक्ट को दूसरा पैरामीटर.

const options = {
  ignoreSearch: true,
  ignoreMethod: true,
  ignoreVary: true
};

const response = await cache.match(request, options);
// do something with the response

अगर कैश मेमोरी में सेव किए गए एक से ज़्यादा अनुरोध मेल खाते हैं, तो सबसे पहले किया गया अनुरोध इस तरह होगा वापस किया गया. अगर आपको सभी मिलते-जुलते जवाब वापस पाने हैं, तो cache.matchAll().

const options = {
  ignoreSearch: true,
  ignoreMethod: true,
  ignoreVary: true
};

const responses = await cache.matchAll(request, options);
console.log(`There are ${responses.length} matching responses.`);

शॉर्टकट के तौर पर, caches.match() का इस्तेमाल करके सभी कैश मेमोरी में एक साथ खोज की जा सकती है कॉल करने के बजाय cache.match() का इस्तेमाल करें.

खोजा जा रहा है

कैश एपीआई, अनुरोधों या जवाबों को खोजने का तरीका नहीं देता यह सिर्फ़ Response ऑब्जेक्ट से मैच करने वाली एंट्री को छोड़कर, बाकी है. हालांकि, आपके पास ये विकल्प हैं फ़िल्टर करके या इंडेक्स बनाकर, अपनी खुद की खोज लागू करें.

फ़िल्टर करना

अपनी खोज को लागू करने का एक तरीका यह है कि आप सभी एंट्री को दोहराएं और फ़िल्टर करके उन्हें फ़िल्टर करें. मान लें कि आपको सभी वे आइटम जिनके यूआरएल .png पर खत्म होते हैं.

async function findImages() {
  // Get a list of all of the caches for this origin
  const cacheNames = await caches.keys();
  const result = [];

  for (const name of cacheNames) {
    // Open the cache
    const cache = await caches.open(name);

    // Get a list of entries. Each item is a Request object
    for (const request of await cache.keys()) {
      // If the request URL matches, add the response to the result
      if (request.url.endsWith('.png')) {
        result.push(await cache.match(request));
      }
    }
  }

  return result;
}

इस तरह, Request और Response ऑब्जेक्ट की किसी भी प्रॉपर्टी का इस्तेमाल करके, एंट्री को फ़िल्टर करें. ध्यान दें कि यदि आप बड़े सेट में खोज करते है, तो यह धीमा हो जाता है डेटा शामिल है.

इंडेक्स बनाना

अपनी खोज को लागू करने का दूसरा तरीका यह है कि ऐसी एंट्री जिन्हें इंडेक्स किया जा सकता है और जिन्हें IndexedDB में सेव किया जा सकता है. क्योंकि यह एक तरह का एक कार्रवाई है, जिसके लिए IndexedDB डिज़ाइन किया गया था. साथ ही, इसका परफ़ॉर्मेंस बड़ी संख्या में एंट्री.

अगर Request के यूआरएल को, खोजी जा सकने वाली प्रॉपर्टी के साथ सेव किया जाता है तो खोज करने के बाद आपको सही कैश एंट्री आसानी से मिल सकती है.

किसी आइटम को मिटाना

कैश मेमोरी से किसी आइटम को मिटाने के लिए:

cache.delete(request);

जहां अनुरोध, Request या यूआरएल स्ट्रिंग हो सकता है. इस तरीके से cache.match जैसा ही विकल्प ऑब्जेक्ट है, जिससे आप कई सारे यूआरएल मिटाए जा सकते हैं एक ही यूआरएल के लिए Request/Response पेयर.

cache.delete('/example/file.txt', {ignoreVary: true, ignoreSearch: true});

कैश मेमोरी को मिटाना

कैश मेमोरी मिटाने के लिए, caches.delete(name) पर कॉल करें. यह फ़ंक्शन, Promise, जो कैश मेमोरी के मौजूद होने और उसे मिटा दिए जाने पर true में बदल जाता है, या अगर ऐसा नहीं है, तो false.

धन्यवाद

इस लेख के ओरिजनल वर्शन को लिखने वाले मैट स्केल्स को धन्यवाद. पहली बार WebFundamentals पर दिखाई दी.