ضبط سلوك تخزين HTTP

Jeff Posnick

يعرض لك هذا الدرس التطبيقي كيفية تغيير عناوين تخزين 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');
    }
  },
}));

تأكيد السلوك الجديد باستخدام "أدوات مطوري البرامج"

ومع وجود التعديلات على خادم الملفات الثابت، يمكنك التحقق لإجراء تأكَّد من ضبط العناوين الصحيحة من خلال معاينة التطبيق المباشر مع فتح لوحة "شبكة مطوري البرامج" (DevTools Network).

  • لمعاينة الموقع الإلكتروني، اضغط على عرض التطبيق. ثم اضغط ملء الشاشة ملء الشاشة

  • تخصيص الأعمدة المعروضة في لوحة "الشبكة" لتضمين المعلومات الأكثر صلة، عن طريق النقر بزر الماوس الأيمن عنوان العمود:

تكوين أدوات مطوري البرامج" لوحة الشبكة.

في ما يلي الأعمدة التي يجب الانتباه إليها هي 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، وسيؤدي النقر على الإدخال إلى عرض تفاصيل إضافية، بما في ذلك أن الاستجابة جاءت "(من ذاكرة التخزين المؤقت على القرص)".

حالة استجابة الشبكة 200.

ولا تحظى القيم الفعلية لعمود ETag وLast-Modified بأهمية كبيرة. تشير رسالة الأشكال البيانية المهم هو التأكد من ضبطها.

تلخيص الأمور

وبعد الاطّلاع على الخطوات الواردة في هذا الدرس التطبيقي حول الترميز، أصبحت الآن على دراية بكيفية يمكنك إعداد عناوين استجابة HTTP في خادم ويب مستند إلى Node.js باستخدام Express، لتحقيق الاستخدام الأمثل لذاكرة التخزين المؤقت HTTP. لديك أيضًا الخطوات التي تحتاج إلى تأكيدها استخدام سلوك التخزين المؤقت المتوقع، عبر لوحة "الشبكة" في أدوات مطوري البرامج في Chrome