הגדרת התנהגות של שמירה במטמון HTTP

ג'ף פוזניק

בשיעור הזה תלמדו איך לשנות את הכותרות לשמירת HTTP במטמון HTTP שהוחזרו משרת אינטרנט מבוסס Node.js, עם ה-framework להצגת Express. נסביר גם איך לוודא שהתנהגות השמירה במטמון שאתם מצפים לה אכן חלה, באמצעות החלונית 'רשת' בכלי הפיתוח ב-Chrome.

היכרות עם הפרויקט לדוגמה

אלה קובצי המפתח שאיתם תעבוד בפרויקט לדוגמה:

  • server.js מכיל את הקוד של Node.js שמגיש את התוכן של אפליקציית האינטרנט. היא משתמשת ב-Express כדי לטפל בבקשות ובתגובות 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.

הדרך הטובה ביותר לעשות זאת היא להשתמש בביטוי רגולרי כדי לבדוק אם הנכס המבוקש תואם לדפוס ספציפי שאתם יודעים שהגיבובים מתכוננים אליו. במקרה של הפרויקט לדוגמה הזה, המזהה תמיד כולל 8 תווים מקבוצת הספרות 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 פתוחה.

  • כדי לראות תצוגה מקדימה של האתר, מקישים על View App ואז על Fullscreen מסך מלא.

  • ניתן להתאים אישית את העמודות שמוצגות בחלונית Network כך שיכללו את המידע הרלוונטי ביותר, על ידי לחיצה ימנית על כותרת העמודה:

הגדרת החלונית 'רשת' של כלי הפיתוח.

כאן, העמודות שכדאי לשים לב אליהן הן Name, Status, Cache-Control, ETag ו-Last-Modified.

  • כשכלי הפיתוח פתוחים בחלונית 'רשת', מרעננים את הדף.

אחרי טעינת הדף, בחלונית Network יופיעו רשומות שנראות כך:

עמודות בחלונית 'רשת'.

השורה הראשונה מתייחסת למסמך ה-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-Variable אין חשיבות רבה. הדבר החשוב ביותר הוא לוודא שהם מוגדרים.

מסכם דברים

אחרי שביצעתם את השלבים ב-codelab זה, אתם כבר יודעים איך להגדיר את הכותרות של תגובת HTTP בשרת אינטרנט מבוסס Node.js באמצעות Express, כדי לאפשר שימוש אופטימלי במטמון ה-HTTP. יש גם את השלבים שצריך כדי לוודא שנעשה שימוש בהתנהגות הצפויה של השמירה במטמון, באמצעות החלונית 'רשת' בכלי הפיתוח ב-Chrome.