कैश मेमोरी एक बेहतरीन टूल है. इससे आपके ऐप्लिकेशन, नेटवर्क की स्थितियों पर कम निर्भर करते हैं. कैश मेमोरी का सही इस्तेमाल करके, अपने वेब ऐप्लिकेशन को ऑफ़लाइन इस्तेमाल के लिए उपलब्ध कराया जा सकता है. साथ ही, नेटवर्क की किसी भी स्थिति में, जितनी जल्दी हो सके अपनी एसेट को दिखाया जा सकता है. जैसा कि ऐसेट और डेटा में बताया गया है कि ज़रूरी ऐसेट को कैश मेमोरी में सेव करने के लिए, सबसे अच्छी रणनीति चुनी जा सकती है. कैश मेमोरी को प्रबंधित करने के लिए आपका सर्विस वर्कर कैश मेमोरी एपीआई के साथ इंटरैक्ट करता है.
कैश मेमोरी एपीआई अलग-अलग कॉन्टेक्स्ट में उपलब्ध है:
- विंडो का कॉन्टेक्स्ट (आपके PWA का मुख्य थ्रेड).
- सर्विस वर्कर.
- कोई अन्य वर्कर, जिसे आपने इस्तेमाल किया है.
सर्विस वर्कर की मदद से कैश मेमोरी को मैनेज करने का एक फ़ायदा यह है कि इसका लाइफ़साइकल विंडो से नहीं जुड़ा होता है. इसका मतलब है कि मुख्य थ्रेड को ब्लॉक नहीं किया जा रहा है. ध्यान रखें कि कैश स्टोरेज एपीआई का इस्तेमाल करने के लिए, इनमें से ज़्यादातर कॉन्टेक्स्ट, TLS कनेक्शन के तहत होने चाहिए.
कैश मेमोरी में सेव किए जाने वाले डेटा की जानकारी
कैश मेमोरी के बारे में पहला सवाल यह हो सकता है कि कैश मेमोरी में कौनसा डेटा सेव किया जाए. हालांकि, इस सवाल का कोई एक जवाब नहीं है, लेकिन यूज़र इंटरफ़ेस को रेंडर करने के लिए ज़रूरी सभी कम से कम संसाधनों के साथ शुरुआत की जा सकती है.
ऐसे संसाधनों में ये शामिल होने चाहिए:
- मुख्य पेज का एचटीएमएल (आपके ऐप्लिकेशन का start_url).
- मुख्य यूज़र इंटरफ़ेस के लिए ज़रूरी सीएसएस स्टाइलशीट.
- यूज़र इंटरफ़ेस में इस्तेमाल की गई इमेज.
- यूज़र इंटरफ़ेस को रेंडर करने के लिए ज़रूरी JavaScript फ़ाइलें.
- JSON फ़ाइल जैसा डेटा, जो बुनियादी अनुभव को रेंडर करने के लिए ज़रूरी होता है.
- वेब फ़ॉन्ट.
- कई पेजों वाले ऐप्लिकेशन पर, ऐसे अन्य एचटीएमएल दस्तावेज़ जिन्हें आपको तेज़ी से या ऑफ़लाइन इस्तेमाल करना है.
ऑफ़लाइन होने पर भी इस्तेमाल के लिए तैयार
ऑफ़लाइन मोड में ऑफ़लाइन मोड का इस्तेमाल करना, प्रोग्रेसिव वेब ऐप्लिकेशन की ज़रूरी शर्तों में से एक है. हालांकि, यह समझना ज़रूरी है कि हर PWA को ऑफ़लाइन गेमिंग का पूरा अनुभव पाने की ज़रूरत नहीं होती. जैसे, क्लाउड गेमिंग सॉल्यूशन या क्रिप्टो ऐसेट ऐप्लिकेशन. इसलिए, ऐसी स्थितियों में अपने उपयोगकर्ताओं का मार्गदर्शन करने के लिए, एक बुनियादी यूज़र इंटरफ़ेस उपलब्ध कराना ठीक है.
आपके PWA को ब्राउज़र का गड़बड़ी वाला यह मैसेज रेंडर नहीं करना चाहिए कि वेब रेंडरिंग इंजन, पेज को लोड नहीं कर सका. इसके बजाय, अपने सर्विस वर्कर का इस्तेमाल करके अपना मैसेज दिखाएं. इसकी मदद से, ब्राउज़र की सामान्य और भ्रमित करने वाली गड़बड़ी से बचा जा सकता है.
कैश मेमोरी में सेव करने के लिए ऐसी कई रणनीतियां हैं जिनका इस्तेमाल अपने PWA की ज़रूरतों के मुताबिक किया जा सकता है. इसलिए, यह ज़रूरी है कि कैश मेमोरी के इस्तेमाल को इस तरह डिज़ाइन किया जाए कि तेज़ और भरोसेमंद अनुभव दिया जा सके. उदाहरण के लिए, अगर आपकी सभी ऐप्लिकेशन एसेट तेज़ी से डाउनलोड होंगी, ज़्यादा जगह का इस्तेमाल नहीं करेंगी, और हर अनुरोध में उन्हें अपडेट करने की ज़रूरत नहीं है, तो अपनी सभी एसेट को कैश मेमोरी में सेव करना सही रहेगा. अगर दूसरी ओर आपके पास ऐसे संसाधन हैं जिन्हें सबसे नए वर्शन की ज़रूरत है, तो शायद आपको उन एसेट को कैश मेमोरी में सेव न करना पड़े.
एपीआई का इस्तेमाल करना
अपने ऑरिजिन में कैश मेमोरी का एक सेट तय करने के लिए, कैश स्टोरेज एपीआई का इस्तेमाल करें. हर एक स्ट्रिंग की पहचान, आपके तय किए जा सकने वाले नाम से की जाती है. 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 में, यह तय करने की ज़िम्मेदारी आपकी होती है कि फ़ाइलों को कब कैश मेमोरी में सेव करना है. हालांकि, एक तरीका यह है कि सर्विस वर्कर के इंस्टॉल होने पर ज़्यादा से ज़्यादा एसेट सेव किए जाएं, लेकिन आम तौर पर यह सबसे सही तरीका नहीं है. गै़र-ज़रूरी संसाधनों को कैश मेमोरी में सेव करने से, बैंडविड्थ और स्टोरेज के लिए बची जगह की बर्बादी होती है. इस वजह से, आपका ऐप्लिकेशन अनचाहे संसाधनों का इस्तेमाल कर सकता है.
आपको सभी ऐसेट को एक साथ कैश मेमोरी में सेव करने की ज़रूरत नहीं है. 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, आपके ऑरिजिन और क्रॉस-डोमेन से ऐसेट को डाउनलोड और कैश मेमोरी में सेव कर सकता है, जैसे कि तीसरे पक्ष के सीडीएन से मिला कॉन्टेंट. क्रॉस-डोमेन ऐप्लिकेशन में कैश इंटरैक्शन, एक ही ऑरिजिन के अनुरोधों से काफ़ी मिलता-जुलता होता है. अनुरोध पूरा होता है और रिस्पॉन्स की एक कॉपी आपके कैश मेमोरी में सेव कर दी जाती है. अन्य कैश मेमोरी में सेव की गई ऐसेट की तरह, यह सिर्फ़ आपके ऐप्लिकेशन के ऑरिजिन में इस्तेमाल करने के लिए उपलब्ध है.
ऐसेट को ओपेक रिस्पॉन्स के तौर पर सेव किया जाएगा. इसका मतलब है कि आपका कोड, उस रिस्पॉन्स के कॉन्टेंट या हेडर को न तो देख पाएगा और न ही उनमें बदलाव कर पाएगा. साथ ही, ओपेक रिस्पॉन्स, स्टोरेज एपीआई में अपने असल साइज़ को नहीं दिखाते हैं. इससे कोटा पर असर पड़ता है. कुछ ब्राउज़र बड़े साइज़ दिखाते हैं, जैसे कि 7 एमबी. इससे कोई फ़र्क़ नहीं पड़ता कि फ़ाइल सिर्फ़ 1Kb की है या नहीं.
एसेट अपडेट करना और मिटाना
cache.put(request, response) का इस्तेमाल करके, ऐसेट अपडेट की जा सकती हैं और delete(request) की मदद से, ऐसेट मिटाई जा सकती हैं.
ज़्यादा जानकारी के लिए, कैश ऑब्जेक्ट दस्तावेज़ देखें.
कैश मेमोरी के स्टोरेज को डीबग करना
कई ब्राउज़र अपने DevTools ऐप्लिकेशन टैब में कैश मेमोरी के कॉन्टेंट को डीबग करने का तरीका उपलब्ध कराते हैं. वहां आपको मौजूदा ऑरिजिन में मौजूद हर कैश मेमोरी का कॉन्टेंट दिखेगा. हम टूल और डीबग चैप्टर में इन टूल के बारे में ज़्यादा जानकारी देंगे.
