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

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

Pete LePage

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

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

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

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

const cacheAvailable = 'caches' in self;

ब्राउज़र सहायता

• 40
• 16
• 41
• 11.1

सोर्स

कैश एपीआई को किसी विंडो, 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 अस्वीकार कर देता है. ध्यान दें कि क्रॉस-ऑरिजिन वाले ऐसे अनुरोध सेव नहीं किए जा सकते जो सीओआरएस मोड में नहीं हैं, क्योंकि वे 0 का status दिखाते हैं. ऐसे अनुरोध सिर्फ़ 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);

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

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');

put() तरीके में, add() या addAll() की तुलना में ज़्यादा अनुमतियां होती हैं. साथ ही, यह आपको बिना सीओआरएस वाले रिस्पॉन्स या ऐसे अन्य रिस्पॉन्स को सेव करने की अनुमति देती है जिनमें रिस्पॉन्स का स्टेटस कोड 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 दिखाता है, जिसकी वैल्यू अलग तरह की होती है.

तरीका	जानकारी
arrayBuffer	मुख्य हिस्से वाला ArrayBuffer लौटाता है, जो बाइट में सीरियल नंबर के हिसाब से होता है.
blob	Blob दिखाता है. अगर Response को Blob का इस्तेमाल करके बनाया गया था, तो इस नए Blob का टाइप एक जैसा है. ऐसा न करने पर, Response के Content-Type का इस्तेमाल किया जाता है.
text	यह बॉडी के बाइट को, कोड में बदली गई UTF-8 स्ट्रिंग के तौर पर समझता है.
json	यह बॉडी की बाइट को, कोड में बदली गई UTF-8 स्ट्रिंग के तौर पर समझता है. इसके बाद, इसे JSON के तौर पर पार्स करने की कोशिश करता है. इससे बनने वाला ऑब्जेक्ट लौटाता है या अगर स्ट्रिंग को JSON के रूप में पार्स नहीं किया जा सकता, तो TypeError दिखाता है.
formData	यह बॉडी के बाइट को एचटीएमएल फ़ॉर्म के तौर पर देखता है. इसे multipart/form-data या application/x-www-form-urlencoded के तौर पर एन्कोड किया जाता है. यह फ़ंक्शन FormData ऑब्जेक्ट देता है या डेटा पार्स न होने पर TypeError दिखाता है.
body	यह फ़ंक्शन बॉडी डेटा के लिए ReadableStream दिखाता है.

उदाहरण के लिए

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 एक स्ट्रिंग है, तो ब्राउज़र new Request(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.`);

शॉर्टकट के तौर पर, हर कैश मेमोरी के लिए cache.match() को कॉल करने के बजाय caches.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 पर पब्लिश हुआ.