संचय कर रहा है

कैश मेमोरी स्टोरेज एक बेहतरीन टूल है. इससे आपके ऐप्लिकेशन, नेटवर्क की स्थिति पर कम निर्भर होते हैं. कैश मेमोरी का सही इस्तेमाल करके, अपने वेब ऐप्लिकेशन को ऑफ़लाइन उपलब्ध कराया जा सकता है. साथ ही, किसी भी नेटवर्क स्थिति में अपनी ऐसेट को ज़्यादा से ज़्यादा तेज़ी से दिखाया जा सकता है. ऐसेट और डेटा में बताए गए तरीके से, ज़रूरी ऐसेट को कैश मेमोरी में सेव करने की सबसे अच्छी रणनीति तय की जा सकती है. कैश मेमोरी को मैनेज करने के लिए, आपका सेवा वर्कर Cache Storage API के साथ इंटरैक्ट करता है.

कैश मेमोरी एपीआई अलग-अलग कॉन्टेक्स्ट में उपलब्ध है:

• विंडो कॉन्टेक्स्ट (आपके PWA की मुख्य थ्रेड).
• सर्विस वर्कर.
• आपके इस्तेमाल में आने वाले अन्य वर्कर्स.

सेवा वर्कर का इस्तेमाल करके कैश मेमोरी मैनेज करने का एक फ़ायदा यह है कि इसका लाइफ़साइकल, विंडो से जुड़ा नहीं होता. इसका मतलब है कि आप मुख्य थ्रेड को ब्लॉक नहीं कर रहे हैं. ध्यान रखें कि Cache Storage API का इस्तेमाल करने के लिए, इनमें से ज़्यादातर कॉन्टेक्स्ट को टीएलएस कनेक्शन के तहत होना चाहिए.

क्या कैश मेमोरी में सेव करना है

कैश मेमोरी सेव करने के बारे में सबसे पहला सवाल यह है कि क्या कैश मेमोरी में सेव किया जाए. इस सवाल का कोई एक जवाब नहीं है. हालांकि, यूज़र इंटरफ़ेस को रेंडर करने के लिए, ज़रूरी सभी संसाधनों के साथ शुरुआत की जा सकती है.

इन रिसॉर्स में ये चीज़ें शामिल होनी चाहिए:

• मुख्य पेज का एचटीएमएल (आपके ऐप्लिकेशन का start_url).
• मुख्य यूज़र इंटरफ़ेस के लिए ज़रूरी सीएसएस स्टाइलशीट.
• यूज़र इंटरफ़ेस में इस्तेमाल की गई इमेज.
• यूज़र इंटरफ़ेस को रेंडर करने के लिए ज़रूरी JavaScript फ़ाइलें.
• JSON फ़ाइल जैसा डेटा, जो बुनियादी अनुभव को रेंडर करने के लिए ज़रूरी है.
• वेब फ़ॉन्ट.
• कई पेजों वाले ऐप्लिकेशन पर, ऐसे अन्य एचटीएमएल दस्तावेज़ जिन्हें आपको तेज़ी से या ऑफ़लाइन दिखाना है.

ऑफ़लाइन इस्तेमाल के लिए तैयार

प्रोग्रेसिव वेब ऐप्लिकेशन के लिए, ऑफ़लाइन काम करने की सुविधा होना ज़रूरी है. हालांकि, यह समझना ज़रूरी है कि हर प्रोग्रेसिव वेब ऐप्लिकेशन को पूरी तरह से ऑफ़लाइन काम करने की ज़रूरत नहीं होती. जैसे, क्लाउड गेमिंग सलूशन या क्रिप्टो एसेट ऐप्लिकेशन. इसलिए, ऐसे मामलों में उपयोगकर्ताओं को गाइड करने के लिए, बुनियादी यूज़र इंटरफ़ेस देना ठीक है.

आपके PWA को ब्राउज़र का गड़बड़ी का मैसेज नहीं दिखाना चाहिए. इस मैसेज में यह जानकारी होती है कि वेब रेंडरिंग इंजन, पेज को लोड नहीं कर सका. इसके बजाय, अपना मैसेज दिखाने के लिए सर्विस वर्कर का इस्तेमाल करें. ब्राउज़र में कोई सामान्य और भ्रम की स्थिति पैदा करने वाली गड़बड़ी से बचें.

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

एपीआई का इस्तेमाल करना

अपने ऑरिजिन में कैश मेमोरी का सेट तय करने के लिए, Cache Storage API का इस्तेमाल करें. हर कैश मेमोरी को स्ट्रिंग के नाम से पहचाना जाता है. caches ऑब्जेक्ट की मदद से एपीआई को ऐक्सेस करें. साथ ही, open तरीके से पहले से बनाए गए कैश मेमोरी को खोला या बनाया जा सकता है. खोलने का तरीका, कैश मेमोरी में मौजूद ऑब्जेक्ट के लिए प्रॉमिस देता है.

caches.open("pwa-assets")
.then(cache => {
  // you can download and store, delete or update resources with cache arguments
});

ऐसेट डाउनलोड और सेव करना

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

caches.open("pwa-assets")
.then(cache => {
  cache.add("styles.css"); // it stores only one resource
  cache.addAll(["styles.css", "app.js"]); // it stores two resources
});

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

कैश मेमोरी कब सेव करें

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

आपको सभी ऐसेट को एक साथ कैश मेमोरी में सेव करने की ज़रूरत नहीं है. अपने PWA के लाइफ़साइकल के दौरान, ऐसेट को कई बार कैश मेमोरी में सेव किया जा सकता है. जैसे:

• सर्विस वर्कर स्थापित करने पर.
• पहले पेज लोड होने के बाद.
• जब उपयोगकर्ता किसी सेक्शन या रूट पर जाता है.
• जब नेटवर्क इस्तेमाल में न हो.

मुख्य थ्रेड या सेवा वर्कर के कॉन्टेक्स्ट में, नई फ़ाइलों को कैश मेमोरी में सेव करने का अनुरोध किया जा सकता है.

सर्विस वर्कर में एसेट को कैश मेमोरी में सेव करना

आम तौर पर, सेवा वर्कर इंस्टॉल होने पर एसेट का कम से कम सेट कैश मेमोरी में सेव किया जाता है. ऐसा करने के लिए, सर्विस वर्कर में install इवेंट के अंदर कैश मेमोरी के इंटरफ़ेस का इस्तेमाल किया जा सकता है.

सेवा वर्कर थ्रेड को कभी भी बंद किया जा सकता है. इसलिए, ब्राउज़र से addAll प्रॉमिस के पूरा होने का इंतज़ार करने का अनुरोध किया जा सकता है. इससे सभी एसेट को स्टोर करने और ऐप्लिकेशन को एक जैसा बनाए रखने की संभावना बढ़ जाती है. नीचे दिए गए उदाहरण में सर्विस वर्कर इवेंट लिसनर में मिले इवेंट आर्ग्युमेंट के waitUntil तरीके का इस्तेमाल करके, ऐसा करने का तरीका बताया गया है.

const urlsToCache = ["/", "app.js", "styles.css", "logo.svg"];
self.addEventListener("install", event => {
   event.waitUntil(
      caches.open("pwa-assets")
      .then(cache => {
         return cache.addAll(urlsToCache);
      });
   );
});

waitUntil() तरीके में एक प्रॉमिस मिलता है. साथ ही, ब्राउज़र से कहा जाता है कि वह सेवा वर्कर प्रोसेस को खत्म करने से पहले, प्रॉमिस में दिए गए टास्क के पूरा होने (पूरा हो गया या पूरा नहीं हो सका) का इंतज़ार करे. आपको चेन में प्रॉमिस जोड़ने और add() या addAll() कॉल को रिटर्न करने की ज़रूरत पड़ सकती है, ताकि waitUntil() तरीके को एक नतीजा मिल सके.

async/await सिंटैक्स का इस्तेमाल करके भी प्रॉमिस मैनेज किए जा सकते हैं. ऐसे में, आपको एक ऐसा असाइनिओंस फ़ंक्शन बनाना होगा जो await को कॉल कर सके और कॉल करने के बाद waitUntil() को एक प्रॉमिस दिखा सके. जैसे, यह उदाहरण:

const urlsToCache = ["/", "app.js", "styles.css", "logo.svg"];
self.addEventListener("install", (event) => {
   let cacheUrls = async () => {
      const cache = await caches.open("pwa-assets");
      return cache.addAll(urlsToCache);
   };
   event.waitUntil(cacheUrls());
});

क्रॉस-डोमेन अनुरोध और अस्पष्ट जवाब

आपका PWA, आपके ऑरिजिन और क्रॉस-डोमेन से एसेट डाउनलोड और कैश मेमोरी में सेव कर सकता है. जैसे, तीसरे पक्ष के सीडीएन से कॉन्टेंट. क्रॉस-डोमेन ऐप्लिकेशन के साथ, कैश इंटरैक्शन एक ही ऑरिजिन के अनुरोधों से काफ़ी मिलता-जुलता है. अनुरोध पूरा हो जाता है और रिस्पॉन्स की एक कॉपी आपकी कैश मेमोरी में सेव हो जाती है. कैश मेमोरी में सेव की गई अन्य ऐसेट की तरह ही, इसका इस्तेमाल सिर्फ़ आपके ऐप्लिकेशन के ऑरिजिन में किया जा सकता है.

एसेट को ओपेक रिस्पॉन्स के तौर पर सेव किया जाएगा. इसका मतलब है कि आपका कोड उस रिस्पॉन्स के कॉन्टेंट या हेडर को नहीं देख पाएगा और न ही उनमें बदलाव कर पाएगा. साथ ही, ओपेक रिस्पॉन्स, Storage API में अपना असल साइज़ नहीं दिखाते, जिससे कोटा पर असर पड़ता है. कुछ ब्राउज़र, फ़ाइल के साइज़ को 7 एमबी के तौर पर दिखाते हैं. भले ही, फ़ाइल का साइज़ सिर्फ़ 1 केबी हो.

एसेट अपडेट करना और मिटाना

cache.put(request, response) का इस्तेमाल करके ऐसेट अपडेट की जा सकती हैं और delete(request) का इस्तेमाल करके ऐसेट मिटाई जा सकती हैं.

ज़्यादा जानकारी के लिए, कैश ऑब्जेक्ट दस्तावेज़ देखें.

कैश मेमोरी स्टोरेज को डीबग करना

कई ब्राउज़र अपने DevTools ऐप्लिकेशन टैब में कैश मेमोरी के कॉन्टेंट को डीबग करने का तरीका उपलब्ध कराते हैं. यहां, मौजूदा ऑरिजिन में हर कैश मेमोरी का कॉन्टेंट देखा जा सकता है. हम टूल और डीबग चैप्टर में इन टूल के बारे में ज़्यादा जानकारी देंगे.

संसाधन

• MDN पर कैश मेमोरी स्टोरेज
• Cache API: खास जानकारी
• ऑफ़लाइन कुकबुक
• कैश मेमोरी में सेव की गई जानकारी को समझना: कैश मेमोरी की जांच करें, उसे हटाएं, और बंद करें