ऐप्लिकेशन कैश का उपयोग करने के बारे में नौसिखियों की गाइड

परिचय

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

  1. ऑफ़लाइन ब्राउज़िंग - ऑफ़लाइन होने पर भी उपयोगकर्ता आपकी पूरी साइट पर नेविगेट कर सकते हैं
  2. स्पीड - संसाधन सीधे डिस्क से आते हैं, नेटवर्क से नहीं.
  3. लचीलापन - अगर आपकी साइट "रखरखाव" के लिए बंद हो जाती है (जैसे कि किसी ने गलती से सब कुछ खराब कर दिया), तो आपके उपयोगकर्ताओं को ऑफ़लाइन अनुभव मिलेगा

ऐप्लिकेशन कैश (या AppCache) की मदद से, डेवलपर यह तय कर सकता है कि ब्राउज़र को कौनसी फ़ाइलें कैश मेमोरी में सेव करनी चाहिए और ऑफ़लाइन उपयोगकर्ताओं के लिए कौनसी फ़ाइलें उपलब्ध करनी चाहिए. आपका ऐप्लिकेशन लोड होगा और ठीक से काम करेगा, भले ही उपयोगकर्ता ऑफ़लाइन होने पर 'रीफ़्रेश करें' बटन दबाएं.

कैश मेमोरी मेनिफ़ेस्ट फ़ाइल

कैश मेनिफ़ेस्ट फ़ाइल एक सामान्य टेक्स्ट फ़ाइल होती है. इसमें उन संसाधनों की सूची होती है जिन्हें ब्राउज़र को ऑफ़लाइन ऐक्सेस के लिए कैश मेमोरी में सेव करना चाहिए.

मेनिफ़ेस्ट फ़ाइल का रेफ़रंस देना

किसी ऐप्लिकेशन के लिए ऐप्लिकेशन कैश चालू करने के लिए, दस्तावेज़ के html टैग पर मेनिफ़ेस्ट एट्रिब्यूट शामिल करें:

<html manifest="example.appcache">
  ...
</html>

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

Chrome में about://://appcache-internals/ पर जाकर, उन यूआरएल को देखा जा सकता है जिन्हें ऐप्लिकेशन कैश मेमोरी से कंट्रोल किया जाता है. यहां से कैश मेमोरी मिटाई जा सकती है और एंट्री देखी जा सकती हैं. Firefox में इस तरह के डेवलपर टूल मौजूद हैं.

manifest एट्रिब्यूट, किसी ऐब्सलूट यूआरएल या रिलेटिव पाथ पर ले जा सकता है. हालांकि, ऐब्सलूट यूआरएल, वेब ऐप्लिकेशन के उसी ऑरिजिन में होना चाहिए. मेनिफ़ेस्ट फ़ाइल में कोई भी फ़ाइल एक्सटेंशन हो सकता है. हालांकि, इसे सही mime-type के साथ दिखाया जाना चाहिए (नीचे देखें).

<html manifest="http://www.example.com/example.mf">
  ...
</html>

मेनिफ़ेस्ट फ़ाइल को MIME टाइप text/cache-manifest के साथ दिखाया जाना चाहिए. आपको अपने वेब सर्वर या .htaccess कॉन्फ़िगरेशन में, पसंद के मुताबिक फ़ाइल टाइप जोड़ना पड़ सकता है.

उदाहरण के लिए, Apache में इस माइम-टाइप को दिखाने के लिए, अपनी कॉन्फ़िगरेशन फ़ाइल में यह लाइन जोड़ें:

AddType text/cache-manifest .appcache

इसके अलावा, Google App Engine में अपनी app.yaml फ़ाइल में:

- url: /mystaticdir/(.*\.appcache)
  static_files: mystaticdir/\1
  mime_type: text/cache-manifest
  upload: mystaticdir/(.*\.appcache)

इस ज़रूरी शर्त को कुछ समय पहले स्पेसिफ़िकेशन से हटा दिया गया था. अब Chrome, Safari, और Firefox के नए वर्शन के लिए, इसकी ज़रूरत नहीं है. हालांकि, पुराने ब्राउज़र और IE11 में काम करने के लिए, आपको mime-type की ज़रूरत होगी.

मेनिफ़ेस्ट फ़ाइल का स्ट्रक्चर

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

CACHE MANIFEST
index.html
stylesheet.css
images/logo.png
scripts/main.js
http://cdn.example.com/scripts/main.js

इस उदाहरण में, इस मेनिफ़ेस्ट फ़ाइल की जानकारी देने वाले पेज पर चार फ़ाइलें कैश मेमोरी में सेव होंगी.

इन बातों का ध्यान रखें:

  • CACHE MANIFEST स्ट्रिंग पहली लाइन होती है और इसे डालना ज़रूरी होता है.
  • फ़ाइलें किसी दूसरे डोमेन से हो सकती हैं
  • कुछ ब्राउज़र, आपके ऐप्लिकेशन के लिए उपलब्ध स्टोरेज कोटे पर पाबंदियां लगाते हैं. उदाहरण के लिए, Chrome में AppCache, कुछ समय के लिए सेव किए गए डेटा के लिए शेयर किए गए पूल का इस्तेमाल करता है. इस पूल को अन्य ऑफ़लाइन एपीआई शेयर कर सकते हैं. अगर Chrome वेब स्टोर के लिए कोई ऐप्लिकेशन लिखा जा रहा है, तो unlimitedStorage का इस्तेमाल करने पर, यह पाबंदी हट जाती है.
  • अगर मेनिफ़ेस्ट से 404 या 410 कोड मिलता है, तो कैश मेमोरी मिटा दी जाती है.
  • अगर मेनिफ़ेस्ट या उसमें बताए गए किसी रिसॉर्स को डाउनलोड नहीं किया जा सकता, तो कैश मेमोरी को अपडेट करने की पूरी प्रोसेस पूरी नहीं हो पाती. विफल होने की स्थिति में ब्राउज़र पुराने ऐप्लिकेशन कैश का उपयोग करता रहेगा.

आइए, ज़्यादा मुश्किल उदाहरण देखते हैं:

CACHE MANIFEST
# 2010-06-18:v2

# Explicitly cached 'master entries'.
CACHE:
/favicon.ico
index.html
stylesheet.css
images/logo.png
scripts/main.js

# Resources that require the user to be online.
NETWORK:
*

# static.html will be served if main.py is inaccessible
# offline.jpg will be served in place of all images in images/large/
# offline.html will be served in place of all other .html files
FALLBACK:
/main.py /static.html
images/large/ images/offline.jpg

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

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

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

मेनिफ़ेस्ट में तीन अलग-अलग सेक्शन हो सकते हैं: CACHE, NETWORK, और FALLBACK.

CACHE:
यह एंट्री के लिए डिफ़ॉल्ट सेक्शन है. इस हेडर में दी गई फ़ाइलों को पहली बार डाउनलोड करने के बाद, उन्हें कैश मेमोरी में सेव कर दिया जाएगा. ऐसा CACHE MANIFEST के ठीक बाद भी किया जा सकता है. NETWORK:
अगर इस सेक्शन में दी गई फ़ाइलें कैश मेमोरी में मौजूद नहीं हैं, तो हो सकता है कि वे नेटवर्क से लोड हों. ऐसा न होने पर, नेटवर्क का इस्तेमाल नहीं किया जाता. भले ही, उपयोगकर्ता ऑनलाइन हो. यहां कुछ यूआरएल की व्हाइटलिस्ट बनाई जा सकती है या सिर्फ़ "" लिखा जा सकता है. इससे सभी यूआरएल को अनुमति मिल जाती है. ज़्यादातर साइटों को "" की ज़रूरत होती है. FALLBACK:
यह एक वैकल्पिक सेक्शन है. इसमें, किसी संसाधन को ऐक्सेस न कर पाने पर फ़ॉलबैक पेजों के बारे में बताया जाता है. पहला यूआरआई संसाधन है और दूसरा, फ़ॉलबैक है. इसका इस्तेमाल तब किया जाता है, जब नेटवर्क अनुरोध पूरा न हो पाए या गड़बड़ियां आएं. दोनों यूआरआई, मेनिफ़ेस्ट फ़ाइल के ओरिजिन से होने चाहिए. इसमें खास यूआरएल के साथ-साथ यूआरएल प्रीफ़िक्स भी कैप्चर किए जा सकते हैं. "images/large/", "images/large/whatever/img.jpg" जैसे यूआरएल से होने वाली गड़बड़ियों को कैप्चर करेगा.

यहां दिए गए मेनिफ़ेस्ट में, "सभी के लिए उपलब्ध" पेज (offline.html) के बारे में बताया गया है. यह पेज तब दिखेगा, जब उपयोगकर्ता ऑफ़लाइन रहते हुए साइट के रूट को ऐक्सेस करने की कोशिश करेगा. इससे यह भी पता चलता है कि अन्य सभी रिसॉर्स (जैसे, किसी रिमोट साइट पर मौजूद रिसॉर्स) के लिए इंटरनेट कनेक्शन ज़रूरी है.

CACHE MANIFEST
# 2010-06-18:v3

# Explicitly cached entries
index.html
css/style.css

# offline.html will be displayed if the user is offline
FALLBACK:
/ /offline.html

# All other resources (e.g. sites) require the user to be online.
NETWORK:
*

# Additional resources to cache
CACHE:
images/logo1.png
images/logo2.png
images/logo3.png

कैश मेमोरी अपडेट करना

जब कोई ऐप्लिकेशन ऑफ़लाइन हो जाता है, तो वह तब तक कैश मेमोरी में सेव रहता है, जब तक इनमें से कोई एक कार्रवाई नहीं की जाती:

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

कैश मेमोरी का स्टेटस

window.applicationCache ऑब्जेक्ट, ब्राउज़र के ऐप्लिकेशन की कैश मेमोरी में सेव किया गया आपका प्रोग्रामैटिक ऐक्सेस है. इसकी status प्रॉपर्टी, कैश मेमोरी की मौजूदा स्थिति देखने के लिए काम की है:

var appCache = window.applicationCache;

switch (appCache.status) {
case appCache.UNCACHED: // UNCACHED == 0
return 'UNCACHED';
break;
case appCache.IDLE: // IDLE == 1
return 'IDLE';
break;
case appCache.CHECKING: // CHECKING == 2
return 'CHECKING';
break;
case appCache.DOWNLOADING: // DOWNLOADING == 3
return 'DOWNLOADING';
break;
case appCache.UPDATEREADY:  // UPDATEREADY == 4
return 'UPDATEREADY';
break;
case appCache.OBSOLETE: // OBSOLETE == 5
return 'OBSOLETE';
break;
default:
return 'UKNOWN CACHE STATUS';
break;
};

प्रोग्राम के हिसाब से मेनिफ़ेस्ट में हुए अपडेट की जांच करने के लिए, पहले applicationCache.update() को कॉल करें. इससे उपयोगकर्ता के कैश मेमोरी को अपडेट करने की कोशिश की जाएगी. इसके लिए, मेनिफ़ेस्ट फ़ाइल में बदलाव होना ज़रूरी है. आखिर में, जब applicationCache.status UPDATEREADY स्टेटस में होगा, तब applicationCache.swapCache() को कॉल करने पर, पुराने कैश मेमोरी को नए कैश मेमोरी से बदल दिया जाएगा.

var appCache = window.applicationCache;

appCache.update(); // Attempt to update the user's cache.

...

if (appCache.status == window.applicationCache.UPDATEREADY) {
appCache.swapCache();  // The fetch was successful, swap in the new cache.
}
को कॉल करने की ज़रूरत नहीं है

अच्छी खबर: इसे अपने-आप होने के लिए सेट किया जा सकता है. उपयोगकर्ताओं को अपनी साइट के नए वर्शन पर अपडेट करने के लिए, पेज लोड होने पर updateready इवेंट को मॉनिटर करने के लिए एक लिसनर सेट करें:

// Check if a new cache is available on page load.
window.addEventListener('load', function(e) {

window.applicationCache.addEventListener('updateready', function(e) {
if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
    // Browser downloaded a new app cache.
    if (confirm('A new version of this site is available. Load it?')) {
    window.location.reload();
    }
} else {
    // Manifest didn't changed. Nothing new to server.
}
}, false);

}, false);

AppCache इवेंट

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

function handleCacheEvent(e) {
//...
}

function handleCacheError(e) {
alert('Error: Cache failed to update!');
};

// Fired after the first cache of the manifest.
appCache.addEventListener('cached', handleCacheEvent, false);

// Checking for an update. Always the first event fired in the sequence.
appCache.addEventListener('checking', handleCacheEvent, false);

// An update was found. The browser is fetching resources.
appCache.addEventListener('downloading', handleCacheEvent, false);

// The manifest returns 404 or 410, the download failed,
// or the manifest changed while the download was in progress.
appCache.addEventListener('error', handleCacheError, false);

// Fired after the first download of the manifest.
appCache.addEventListener('noupdate', handleCacheEvent, false);

// Fired if the manifest file returns a 404 or 410.
// This results in the application cache being deleted.
appCache.addEventListener('obsolete', handleCacheEvent, false);

// Fired for each resource listed in the manifest as it is being fetched.
appCache.addEventListener('progress', handleCacheEvent, false);

// Fired when the manifest resources have been newly redownloaded.
appCache.addEventListener('updateready', handleCacheEvent, false);

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

रेफ़रंस