يعرض لك هذا الدرس التطبيقي كيفية تغيير عناوين تخزين HTTP مؤقتًا التي يعرضها خادم ويب مستنِد إلى Node.js، عن طريق تشغيل إطار عمل العرض سريع. وسيشرح لك أيضًا طريقة التأكد من تطبيق سلوك التخزين المؤقت الذي تتوقعه، وذلك باستخدام لوحة "الشبكة" في "أدوات مطوري البرامج" في Chrome.
التعرّف على نموذج المشروع
هذه هي الملفات الأساسية التي ستعمل عليها في نموذج المشروع:
- يحتوي
server.js
على رمز Node.js الذي يعرض محتوى التطبيق الإلكتروني. فهو يستخدم سريع لمعالجة طلبات HTTP واستجاباته. وعلى وجه الخصوص، يتم استخدامexpress.static()
لعرض جميع الملفات المحلية في الدليل العام، وبالتالي يمكنك الاطّلاع على المستندات المتعلقة بـserve-static
. public/index.html
هو رمز HTML لتطبيق الويب. مثل معظم ملفات HTML، لا يحتوي هذا الملف على أي معلومات عن الإصدار كجزء من عنوان URL الخاص به.public/app.15261a07.js
وpublic/style.391484cf.css
هما مواد عرض JavaScript وCSS لتطبيق الويب. تحتوي كلّ من هذه الملفات على تجزئة في عناوين URL الخاصة بها، تتوافق مع محتوياتها. تتحمّلindex.html
مسؤولية متابعة عنوان URL المحدّد الذي يجب تحميله.
ضبط رؤوس التخزين المؤقت لصفحات HTML
عند الردّ على طلبات عناوين URL التي لا تحتوي على معلومات عن الإصدار، احرص
على إضافة Cache-Control: no-cache
إلى رسائل الردّ. بالإضافة إلى ذلك، يُنصح بإعداد أحد عنوانَي الاستجابة الإضافيَين: إما
Last-Modified
أو ETag
. تندرج
index.html
ضمن هذه الفئة. يمكنك تقسيم ذلك إلى خطوتين.
أولاً، يتم التحكّم في عنوانَي Last-Modified
وETag
من خلال خيارَي الضبط
etag
و
lastModified
. في الواقع، يكون كلا الخيارَين تلقائيًا على true
لجميع
ردود HTTP، لذا في هذا الإعداد الحالي، لست بحاجة إلى تفعيل هذا
السلوك. ولكن يمكنك أن تكون صريحًا في الإعدادات على أي حال.
ثانيًا، يجب أن يكون بإمكانك إضافة عنوان Cache-Control: no-cache
، ولكن
لمستندات HTML فقط (index.html
في هذه الحالة). إنّ أسهل طريقة لتحديد هذا العنوان بشكل مشروط هي كتابة setHeaders function
مخصّصة،
وضمن ذلك، التحقّق ممّا إذا كان الطلب الوافد مخصّصًا لمستند HTML.
- انقر على إنشاء ريمكس لتعديل لجعل المشروع قابلاً للتعديل.
تبدأ إعدادات عرض الإعلانات الثابتة في 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');
}
},
}));
ضبط رؤوس التخزين المؤقت لعناوين URL التي تتضمّن إصدارات
عند الردّ على طلبات عناوين URL التي تحتوي على
"معرف إصبع" أو
معلومات عن الإصدارات، والتي لا يُفترض أن تتغيّر محتوياتها أبدًا، أضِف
Cache-Control: max-age=31536000
إلى ردودك. تندرج app.15261a07.js
و
style.391484cf.css
ضمن هذه الفئة.
بناءً على setHeaders function
المستخدم في الخطوة الأخيرة، يمكنك إضافة منطق إضافي للتحقّق مما إذا كان طلب معيّن يتعلّق بعنوان URL ذي نُسخ مختلفة. وفي هذه الحالة، يمكنك إضافة عنوان 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');
}
},
}));
تأكيد السلوك الجديد باستخدام "أدوات مطوّري البرامج"
بعد إجراء التعديلات على خادم الملفات الثابتة، يمكنك التحقّق من التأكّد من ضبط العناوين الصحيحة من خلال معاينة التطبيق المباشر مع فتح لوحة "الشبكة" في "أدوات مطوّري البرامج".
لمعاينة الموقع الإلكتروني، اضغط على عرض التطبيق. ثم اضغط على ملء الشاشة .
يمكنك تخصيص الأعمدة التي يتم عرضها في لوحة "الشبكة" لتضمين المعلومات الأكثر صلةً، وذلك من خلال النقر بزر الماوس الأيمن في عنوان العمود:
في ما يلي الأعمدة التي يجب الانتباه إليها: Name
وStatus
وCache-Control
ETag
وLast-Modified
.
- مع فتح أدوات مطوّري البرامج في لوحة "الشبكة"، أعِد تحميل الصفحة.
بعد تحميل الصفحة، من المفترض أن تظهر لك إدخالات في لوحة "الشبكة" تبدو على النحو التالي:
الصف الأول مخصّص لمستند HTML الذي انتقلت إليه. يتم تقديم هذا المحتوى بشكلٍ سليم
مع Cache-Control: no-cache
. حالة استجابة HTTP لهذا الطلب هي 304
. وهذا
يعني أنّ المتصفّح عرف عدم استخدام ملف HTML المخزّن مؤقتًا على الفور، ولكن بدلاً من ذلك،
قدّم طلب HTTP إلى خادم الويب، باستخدام معلومات Last-Modified
وETag
لمعرفة ما إذا كان هناك أي تعديل على ملف HTML الذي كان لديه في
الذاكرة المؤقتة. تشير استجابة HTTP 304 إلى عدم توفّر ملف HTML معدَّل.
الصفّان التاليان مخصّصان لمواد عرض JavaScript وCSS التي تتضمّن نُسخًا مختلفة. من المفترض أن يتم عرضها باستخدام Cache-Control: max-age=31536000
، ورمز حالة HTTP لكل منها هو 200
.
بسبب الإعدادات المستخدَمة، لا يتم تقديم طلب فعلي إلى
خادم Node.js، وسيؤدي النقر على الإدخال إلى عرض تفاصيل إضافية،
بما في ذلك أنّ الاستجابة جاءت "(من ذاكرة التخزين المؤقت على القرص)".
ولا تحظى القيم الفعلية لعمود ETag وLast-Modified بأهمية كبيرة. والشيء المهم هو التأكّد من أنّه يتم ضبطها.
ملخّص
بعد مراجعة الخطوات الواردة في هذا الدرس التطبيقي حول الترميز، أصبحت الآن على دراية بكيفية ضبط رؤوس استجابة HTTP في خادم ويب يستند إلى Node.js باستخدام Express، للاستفادة إلى أقصى حد من ذاكرة التخزين المؤقت لبروتوكول HTTP. تتوفّر لك أيضًا الخطوات التي تحتاج إليها للتأكّد من استخدام سلوك التخزين المؤقت المتوقّع، وذلك من خلال لوحة "الشبكة" في أدوات مطوّري البرامج في Chrome.