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

Jeff Posnick

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

  • לוחצים על Remix to Edit כדי לאפשר עריכה של הפרויקט.

הגדרת הצגת המודעות הסטטית ב-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 (כלומר תווים הקסדצימליים). תמיד מפריד בין המחרוזת של ה-hash לבין הטקסט תו . מכל צד.

אפשר לבטא ביטוי רגולרי שתואם לכללים הכלליים האלה בתור 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 (רשת) של DevTools פתוחה.

  • כדי לראות תצוגה מקדימה של האתר, לוחצים על הצגת האפליקציה. לאחר מכן לוחצים על מסך מלא מסך מלא.

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

הגדרת חלונית הרשת של DevTools.

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