הגדרת התנהגות של שמירה במטמון 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 לכל תגובות ה-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');
    }
  },
}));

איך מאשרים את ההתנהגות החדשה באמצעות כלי הפיתוח ל-Chrome

אחרי שמשנים את שרת הקבצים הסטטיים, אפשר לבדוק אם הכותרות הנכונות מוגדרות. כדי לעשות את זה, פותחים את החלונית "רשת" בכלי הפיתוח וצופים בתצוגה המקדימה של האפליקציה בזמן אמת.

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

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

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

סיכום

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