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