मॉडर्न वेब गाइडेंस अब स्टेबल वर्शन में उपलब्ध है! विशेषज्ञों के सुझाए गए वेब डेवलपमेंट के सबसे सही तरीकों की मदद से, अपने कोडिंग एजेंट को अपग्रेड करें. सूचना पढ़ें.

Google आपकी पसंदीदा भाषा में कॉन्टेंट का अनुवाद करने के लिए, एआई टेक्नोलॉजी का इस्तेमाल करता है. एआई से मिले अनुवादों में गलतियां हो सकती हैं.

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

Jeff Posnick

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

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

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

server.js में Node.js कोड होता है, जो वेब ऐप्लिकेशन का कॉन्टेंट दिखाता है. यह एचटीटीपी अनुरोधों और जवाबों को मैनेज करने के लिए, Express का इस्तेमाल करता है. खास तौर पर, 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 हो.

ईटैग और Last-Modified कॉलम की असल वैल्यू से ज़्यादा फ़र्क़ नहीं पड़ता. यह पक्का करना ज़रूरी है कि वे सेट हो रहे हैं.

जवाब तैयार किया जा रहा है

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