अपने ऐप्लिकेशन के डेटा को ऑफ़लाइन उपलब्ध कराने के लिए, कैश एपीआई इस्तेमाल करने का तरीका जानें.
कैश एपीआई, नेटवर्क को सेव और वापस पाने का सिस्टम है उनके सवालों और उनके जवाबों के बारे में बताएँ. ये नियमित अनुरोध हो सकते हैं आपका ऐप्लिकेशन चलाने के दौरान तैयार किए गए रिस्पॉन्स और वे इन्हें सिर्फ़ बाद में इस्तेमाल करने के लिए डेटा को सेव करने के मकसद से बनाया जाना चाहिए.
कैश एपीआई को सर्विस वर्कर के लिए बनाया गया था, ताकि नेटवर्क के अनुरोधों को कैश मेमोरी में सेव किया जा सके ताकि वे तेज़ी से रिस्पॉन्स दे सकें, चाहे नेटवर्क की रफ़्तार तेज़ हो या उपलब्धता. हालांकि, इस एपीआई का इस्तेमाल सामान्य स्टोरेज तरीके के तौर पर भी किया जा सकता है.
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
ऑब्जेक्ट या यूआरएल (string
s) का अरे. यह सुविधा इसके जैसे काम करती है
हर अनुरोध के लिए 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
गड़बड़ी का जवाब देता है, जिसका समाधान हो जाता है
वैल्यू डाली गई है.
तरीका | ब्यौरा |
---|---|
arrayBuffer |
मुख्य हिस्से वाला ArrayBuffer दिखाता है, जिसे क्रम से लगाया जाता है
बाइट हैं.
|
blob |
Blob दिखाता है. अगर Response बनाया गया था
Blob के साथ इस नए Blob में भी वही है
टाइप करें. अगर ऐसा नहीं है, तोContent-Type
Response का इस्तेमाल किया गया है.
|
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
एक स्ट्रिंग है, तो ब्राउज़र कॉल करके उसे 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 पर दिखाई दी.