JavaScript Academy · पाठ

Cache API

कैश से प्रतिक्रियाएँ संग्रहीत और उपलब्ध कराइए।

पाठ 2, कुल 4 में से13 चरण

Cache API, CoddyKit पर JavaScript Academy का एक निःशुल्क पाठ है। यह 4 में से 2वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह JavaScript Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। JavaScript Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

Cache API क्या है?

कैश एपीआई नामित caches में request/response pairs संग्रहीत करता है। Service workers इसका उपयोग network तक पहुँचे बिना assets उपलब्ध कराने के लिए करते हैं, जो offline support का आधार है।

caches Object

Global caches object (एक CacheStorage) आपके सभी नामित caches को manage करता है। यह pages और service workers दोनों में उपलब्ध होता है।

// Available globally:
// caches.open(name)
// caches.match(request)
// caches.delete(name)
// caches.keys()

Cache खोलना

caches.open(name) उस नाम वाले cache के लिए एक Promise लौटाता है और यदि वह मौजूद न हो तो उसे बनाता है। Names आपको अपने caches के versions प्रबंधित करने देते हैं।

caches.open('static-v1').then(cache => {
  console.log('cache ready');
});

addAll से पहले से cache करना

install के दौरान cache.addAll(urls) एक ही call में assets की सूची को fetch और store करता है। यदि कोई fetch विफल होता है, तो पूरी operation reject हो जाती है।

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('static-v1').then(cache =>
      cache.addAll(['/', '/styles.css', '/app.js'])
    )
  );
});

waitUntil

event.waitUntil(promise) browser को बताता है कि promise के settle होने तक worker को active रखा जाए। अपने cache setup को इसमें wrap करें, ताकि install बहुत जल्दी समाप्त न हो।

self.addEventListener('install', (event) => {
  event.waitUntil(setupCache());
});

एक प्रविष्टि जोड़ना

cache.put(request, response) एक response store करता है, जबकि cache.add(url) एक URL को fetch और store करता है। जब आपके पास save करने के लिए पहले से कोई response हो, तब put का उपयोग करें।

const cache = await caches.open('static-v1');
const response = await fetch('/logo.png');
await cache.put('/logo.png', response);

Cache से मिलान करना

cache.match(request) किसी stored response को खोजता है। यह response के साथ resolve होता है, या match न मिलने पर undefined के साथ resolve होता है।

const cache = await caches.open('static-v1');
const hit = await cache.match('/styles.css');
if (hit) console.log('served from cache');

caches.match का संक्षिप्त तरीका

caches.match(request) एक साथ सभी caches में खोजता है। यह fetch handler में उपयोगी है, जब आपको परवाह नहीं होती कि asset किस cache में है।

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then(hit =>
      hit || fetch(event.request)
    )
  );
});

respondWith

fetch event के अंदर event.respondWith(promise) वह response उपलब्ध कराता है जिसका browser उपयोग करेगा। इसे cached या नए सिरे से fetch किए गए Response के साथ resolve करें।

self.addEventListener('fetch', (event) => {
  event.respondWith(handleRequest(event.request));
});

Responses की प्रतिलिपि बनाना

Response body को केवल एक बार पढ़ा जा सकता है। किसी response को लौटाने और store करने, दोनों के लिए पहले उसकी clone बनाएँ।

const response = await fetch(request);
cache.put(request, response.clone()); // store a copy
return response; // return the original

Cache entries हटाना

cache.delete(request) एक entry हटाता है; caches.delete(name) पूरे नामित cache को हटा देता है। पुरानी assets को हटाने के लिए इनका उपयोग करें।

await cache.delete('/old-asset.js');
await caches.delete('static-v0'); // remove old cache version

त्वरित जाँच

Cache API के बारे में अपनी समझ जाँचें।

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन

आपने Cache API सीखा:

caches.open(name) किसी नामित cache को प्राप्त या create करता है।
addAll पहले से cache करता है; put/add entries store करते हैं।
match प्राप्त करता है; caches.match सभी caches में खोजता है।
respondWith fetch में response उपलब्ध कराता है।
Responses को cache करने और लौटाने से पहले उनकी clone बनाएँ।

अगला विषय है: caching strategies।

शुरुआत निःशुल्क

एआई शिक्षक के साथ JavaScript सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 59
पाठ: 200

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “Cache API” पाठ निःशुल्क है?

हाँ — JavaScript Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “Cache API” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। JavaScript Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“Cache API” में मैं क्या सीखूँगा?

कैश से प्रतिक्रियाएँ संग्रहीत और उपलब्ध कराइए। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ JavaScript Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या JavaScript Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर JavaScript Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 2वाँ पाठ है।

“Cache API” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस JavaScript Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर JavaScript Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← JavaScript Academy पर वापस जाएँ