इस पेज का अनुवाद Cloud Translation API से किया गया है.

एचटीटीपी कैश मेमोरी में डेटा को कैश मेमोरी में सेव करने के तरीके को कॉन्फ़िगर करना

जेफ़ पॉस्निक

यह कोडलैब आपको दिखाता है कि Node.js-आधारित वेब सर्वर से मिले एचटीटीपी कैश मेमोरी के हेडर को कैसे बदला जा सकता है. इस हेडर में, एक्सप्रेस सर्विंग फ़्रेमवर्क चल रहा होता है. इसमें, Chrome के DevTools में नेटवर्क पैनल का इस्तेमाल करके, यह पुष्टि करने का तरीका भी बताया जाएगा कि कैश मेमोरी में सेव किया गया जो तरीका आपको दिख रहा है वह लागू हो रहा है या नहीं.

सैंपल प्रोजेक्ट के बारे में जानना

सैंपल प्रोजेक्ट में, आपको इन मुख्य फ़ाइलों के साथ काम करना होगा:

server.js में ऐसा Node.js कोड होता है जो वेब ऐप्लिकेशन के कॉन्टेंट को दिखाता है. यह एचटीटीपी के अनुरोधों और रिस्पॉन्स को हैंडल करने के लिए, एक्सप्रेशन का इस्तेमाल करता है. खास तौर पर, express.static() का इस्तेमाल पब्लिक डायरेक्ट्री में सभी लोकल फ़ाइलें दिखाने के लिए किया जाता है. इसलिए, serve-static दस्तावेज़ का इस्तेमाल किया जा सकता है.
public/index.html, वेब ऐप्लिकेशन का एचटीएमएल होता है. ज़्यादातर एचटीएमएल फ़ाइलों की तरह, इसमें भी यूआरएल के हिस्से के तौर पर कोई वर्शनिंग जानकारी नहीं होती.
public/app.15261a07.js और public/style.391484cf.css वेब ऐप्लिकेशन की JavaScript और सीएसएस एसेट हैं. इन हर फ़ाइल के यूआरएल में, उनके कॉन्टेंट के हिसाब से हैश होता है. किस वर्शन वाले यूआरएल को लोड करना है, इसका ट्रैक रखने की ज़िम्मेदारी index.html की है.

हमारे एचटीएमएल के लिए कैश मेमोरी में सेव किए गए हेडर कॉन्फ़िगर करना

बिना वर्शन की जानकारी वाले यूआरएल के अनुरोधों का जवाब देते समय, अपने जवाब वाले मैसेज में Cache-Control: no-cache जोड़ना न भूलें. साथ ही, दो अतिरिक्त रिस्पॉन्स हेडर में से कोई एक सेट करने का सुझाव दिया जाता है: Last-Modified या ETag. index.html इस कैटगरी में आता है. इसे दो चरणों में बांटा जा सकता है.

सबसे पहले, Last-Modified और ETag हेडर को etag और lastModified कॉन्फ़िगरेशन के विकल्पों से कंट्रोल किया जाता है. ये दोनों विकल्प सभी एचटीटीपी रिस्पॉन्स के लिए, वाकई में डिफ़ॉल्ट रूप से true पर सेट होते हैं. इसलिए, इस मौजूदा सेटअप में, आपको इस तरह के काम करने के लिए ऑप्ट-इन करने की ज़रूरत नहीं है. हालांकि, अपने कॉन्फ़िगरेशन में साफ़ तौर पर जानकारी दी जा सकती है.

दूसरा, आपको Cache-Control: no-cache हेडर को जोड़ना होगा. हालांकि, आपको सिर्फ़ अपने एचटीएमएल दस्तावेज़ों (इस मामले में index.html) को जोड़ना होगा. इस हेडर को शर्त के हिसाब से सेट करने का सबसे आसान तरीका है कि आप कस्टम setHeaders function लिखें. इसके साथ ही, यह देखें कि आने वाला अनुरोध एचटीएमएल दस्तावेज़ के लिए है या नहीं.

प्रोजेक्ट में बदलाव करने के लिए, बदलाव करने के लिए रीमिक्स करें पर क्लिक करें.

server.js में स्टैटिक सर्विंग कॉन्फ़िगरेशन इस तरह शुरू होता है:

app.use(express.static('public'));

ऊपर बताए गए बदलाव करें और आखिर में आपको कुछ ऐसा दिखेगा:

app.use(express.static('public', {
  etag: true, // Just being explicit about the default.
  lastModified: true,  // Just being explicit about the default.
  setHeaders: (res, path) => {
    if (path.endsWith('.html')) {
      // All of the project's HTML files end in .html
      res.setHeader('Cache-Control', 'no-cache');
    }
  },
}));

वर्शन वाले यूआरएल के लिए कैश मेमोरी में सेव किए गए हेडर कॉन्फ़िगर करें

ऐसे यूआरएल के अनुरोधों का जवाब देते समय जिनमें "फ़िंगरप्रिंट" या वर्शन की जानकारी है और जिनके कॉन्टेंट में कभी बदलाव नहीं किया जाना चाहिए. अपने जवाबों में Cache-Control: max-age=31536000 जोड़ें. app.15261a07.js और style.391484cf.css इस कैटगरी में आते हैं.

आखिरी चरण में इस्तेमाल किए गए setHeaders function को ध्यान में रखते हुए, अतिरिक्त लॉजिक जोड़ा जा सकता है. इससे यह पता लगाया जा सकता है कि दिया गया अनुरोध, वर्शन वाले यूआरएल के लिए है या नहीं. अगर हां, तो Cache-Control: max-age=31536000 हेडर जोड़ें.

ऐसा करने का सबसे बेहतर तरीका यह है कि रेगुलर एक्सप्रेशन का इस्तेमाल करके देखा जाए कि जिस ऐसेट का अनुरोध किया गया है वह किसी ऐसे पैटर्न से मैच करती है या नहीं जिसमें हैश शामिल होते हैं. इस सैंपल प्रोजेक्ट के मामले में, 0 से 9 तक के अंकों के सेट में से हमेशा आठ वर्ण होते हैं. साथ ही, अंग्रेज़ी के छोटे अक्षरों a–f यानी हेक्ज़ाडेसिमल वर्णों का इस्तेमाल किया जाता है. हैश को हमेशा . वर्ण से अलग किया जाता है.

उन सामान्य नियमों से मेल खाने वाले रेगुलर एक्सप्रेशन को new RegExp('\\.[0-9a-f]{8}\\.') के तौर पर दिखाया जा सकता है.

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

setHeaders फ़ंक्शन में बदलाव करें, ताकि वह ऐसा दिखे:

app.use(express.static('public', {
  etag: true, // Just being explicit about the default.
  lastModified: true,  // Just being explicit about the default.
  setHeaders: (res, path) => {
    const hashRegExp = new RegExp('\\.[0-9a-f]{8}\\.');

    if (path.endsWith('.html')) {
      // All of the project's HTML files end in .html
      res.setHeader('Cache-Control', 'no-cache');
    } else if (hashRegExp.test(path)) {
      // If the RegExp matched, then we have a versioned URL.
      res.setHeader('Cache-Control', 'max-age=31536000');
    }
  },
}));

DevTools का इस्तेमाल करके नए तरीके की पुष्टि करें

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

साइट की झलक देखने के लिए, ऐप्लिकेशन देखें दबाएं. इसके बाद, फ़ुलस्क्रीन दबाएं.
कॉलम हेडर में राइट क्लिक करके, सबसे काम की जानकारी शामिल करने के लिए, नेटवर्क पैनल में दिखने वाले कॉलम को कस्टमाइज़ करें:

DevTools के नेटवर्क पैनल को कॉन्फ़िगर किया जा रहा है.

यहां, Name, Status, Cache-Control, ETag, और Last-Modified कॉलम हैं.

DevTools नेटवर्क खोलने के बाद, पेज को रीफ़्रेश करें.

पेज लोड होने के बाद, आपको नेटवर्क पैनल में ऐसी एंट्री दिखेंगी जो ऐसी दिखेंगी:

नेटवर्क पैनल के कॉलम.

पहली पंक्ति उस एचटीएमएल दस्तावेज़ के लिए है जिस पर आपने नेविगेट किया है. यह Cache-Control: no-cache के साथ ठीक से काम करता है. इस अनुरोध के लिए एचटीटीपी रिस्पॉन्स का स्टेटस 304 है. इसका मतलब है कि ब्राउज़र, कैश मेमोरी में सेव किए गए एचटीएमएल का तुरंत इस्तेमाल नहीं करना चाहता था. इसके बजाय, उसने वेब सर्वर को एचटीटीपी अनुरोध किया. इसके लिए उसने Last-Modified और ETag जानकारी का इस्तेमाल किया, ताकि यह देखा जा सके कि उसकी कैश मेमोरी में पहले से मौजूद एचटीएमएल में कोई अपडेट है या नहीं. एचटीटीपी 304 रिस्पॉन्स से पता चलता है कि एचटीएमएल अपडेट नहीं किया गया है.

ध्यान दें: Cache-Control: no-cache का मतलब यह नहीं है कि "कैश मेमोरी में सेव की गई कॉपी का कभी इस्तेमाल नहीं किया गया". इसका मतलब है, "हमेशा पहले सर्वर से संपर्क करें और अगर एचटीटीपी 304 रिस्पॉन्स मिलता है, तो कैश मेमोरी में सेव की गई कॉपी का इस्तेमाल करें."

अगली दो लाइनें, वर्शन वाली JavaScript और सीएसएस ऐसेट के लिए हैं. आपको यह दिखेगा कि वे Cache-Control: max-age=31536000 के साथ दिखाए जाते हैं और हर एक के लिए एचटीटीपी स्टेटस 200 है. इस्तेमाल किए गए कॉन्फ़िगरेशन की वजह से, Node.js सर्वर पर कोई असल अनुरोध नहीं किया गया है. साथ ही, उस एंट्री पर क्लिक करने पर आपको और जानकारी दिखेगी. इसमें यह भी शामिल है कि रिस्पॉन्स "(डिस्क कैश से)" मिला है.

नेटवर्क रिस्पॉन्स स्टेटस 200 है.

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

संक्षेप में बातें

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