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

Jeff Posnick

ב-Codelab הזה אפשר לראות איך לשנות את כותרות השמירה במטמון ה-HTTP שמוחזרות על ידי שרת אינטרנט מבוסס Node.js, שמפעיל את מילוי הבקשות 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. בכל אחד מהקבצים האלה יש גיבוב (hash) בכתובות ה-URL שלהם, שתואם לתוכן שלהם. index.html אחראי לשמירה על מעקב אחר כתובת ה-URL הספציפית עם גרסאות שונות שצריך לטעון.

כדאי להגדיר כותרות שמירה במטמון של ה-HTML

כשמגיבים לבקשות לכתובות URL שלא מכילות מידע על ניהול גרסאות, חשוב להוסיף את Cache-Control: no-cache להודעות התשובה שלך. יחד עם מומלץ להגדיר אחת משתי כותרות תגובה נוספות: Last-Modified או ETag. הקטגוריה index.html משתייכת לקטגוריה הזו. אפשר לפצל את התהליך לשני שלבים.

קודם כל, הכותרות Last-Modified ו-ETag נשלטות על ידי etag וגם lastModified אפשרויות אישיות. ברירת המחדל של שתי האפשרויות האלה היא true לכולם לכן, בהגדרה הנוכחית, אין צריך להביע הסכמה כדי לקבל או התנהגות המשתמשים. אבל אפשר להשתמש בהגדרות האישיות בכל זאת.

שנית, צריכה להיות לך אפשרות להוסיף את הכותרת 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.

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

לאחר שהדף נטען, אתה אמור לראות רשומות בחלונית 'רשת' שנראות כמו: כמו:

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

לסכם

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