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

Jeff Posnick

בשיעור הזה תלמדו איך לשנות את כותרות השמירה במטמון ה-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.

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

אפשר לבטא ביטוי רגולרי שתואם לכללים הכלליים האלה בתור 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');
    }
  },
}));

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

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