इस कोडलैब में, Express के फ़्रेमवर्क का इस्तेमाल करके, Node.js पर आधारित वेब सर्वर से मिले एचटीटीपी कैश मेमोरी हेडर को बदलने का तरीका बताया गया है. इससे यह पुष्टि करने का तरीका भी पता चलेगा कि 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}\\.') के तौर पर दिखाया जा सकता है.
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 के नेटवर्क पैनल को खोलकर, लाइव ऐप्लिकेशन की झलक देखें.
साइट की झलक देखने के लिए, ऐप्लिकेशन देखें दबाएं. इसके बाद, फ़ुलस्क्रीन
दबाएं.कॉलम हेडर में दायां क्लिक करके, नेटवर्क पैनल में दिखने वाले कॉलम को अपनी पसंद के मुताबिक बनाएं. इससे, आपको सबसे ज़्यादा काम की जानकारी दिखेगी:
यहां, Name, Status, Cache-Control,
ETag, और Last-Modified कॉलम पर ध्यान देना होगा.
- DevTools में नेटवर्क पैनल खोलकर, पेज को रीफ़्रेश करें.
पेज लोड होने के बाद, आपको नेटवर्क पैनल में ऐसी एंट्री दिखेंगी जो इनके जैसी दिखेंगी:
पहली लाइन उस एचटीएमएल दस्तावेज़ के लिए है जिस पर आपने नेविगेट किया है. इसे Cache-Control: no-cache के साथ सही तरीके से दिखाया गया है. उस अनुरोध के लिए एचटीटीपी रिस्पॉन्स का स्टेटस 304 है. इसका मतलब है कि ब्राउज़र को पता था कि कैश मेमोरी में सेव किए गए एचटीएमएल का तुरंत इस्तेमाल नहीं करना है. इसके बजाय, उसने Last-Modified और ETag की जानकारी का इस्तेमाल करके, वेब सर्वर को एचटीटीपी अनुरोध भेजा, ताकि यह पता लगाया जा सके कि कैश मेमोरी में सेव किए गए एचटीएमएल में कोई अपडेट हुआ है या नहीं. एचटीटीपी 304 रिस्पॉन्स से पता चलता है कि अपडेट किया गया एचटीएमएल नहीं है.
अगली दो पंक्तियां, वर्शन वाली JavaScript और CSS एसेट के लिए हैं. आपको इन्हें Cache-Control: max-age=31536000 के साथ दिखाया जाना चाहिए और हर एक के लिए एचटीटीपी स्टेटस 200 होना चाहिए.
इस्तेमाल किए गए कॉन्फ़िगरेशन की वजह से, Node.js सर्वर से कोई अनुरोध नहीं किया जा रहा है. एंट्री पर क्लिक करने पर, आपको ज़्यादा जानकारी दिखेगी. इसमें यह भी शामिल है कि जवाब "(डिस्क कैश से)" मिला है.
ETag और Last-Modified कॉलम की असल वैल्यू से ज़्यादा फ़र्क़ नहीं पड़ता. ज़रूरी बात यह है कि पुष्टि की जाए कि वे सेट हो रहे हैं.
खास जानकारी
इस कोडलैब में दिए गए चरणों को पूरा करने के बाद, अब आपको एचटीटीपी कैश का बेहतर तरीके से इस्तेमाल करने के लिए, Express का इस्तेमाल करके Node.js पर आधारित वेब सर्वर में एचटीटीपी रिस्पॉन्स हेडर को कॉन्फ़िगर करने का तरीका पता चल गया होगा. आपके पास यह पुष्टि करने का तरीका भी है कि Chrome के DevTools में नेटवर्क पैनल की मदद से, कैश मेमोरी के सही तरीके का इस्तेमाल किया जा रहा है या नहीं.