การกำหนดค่าลักษณะการแคช 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 ไฟล์เหล่านี้แต่ละไฟล์มีแฮชใน URL ที่สอดคล้องกับเนื้อหาของตน index.html มีหน้าที่เก็บรักษา ติดตามว่า URL ที่มีเวอร์ชันใดที่จะโหลด

กำหนดค่าส่วนหัวการแคชสำหรับ HTML ของเรา

เมื่อตอบกลับคำขอสำหรับ URL ที่ไม่มีข้อมูลการกำหนดเวอร์ชัน ให้ตั้งค่า อย่าลืมเพิ่ม Cache-Control: no-cache ในข้อความตอบกลับของคุณ พร้อมทั้ง เราขอแนะนำให้ตั้งค่าส่วนหัวการตอบกลับเพิ่มเติม 1 จาก 2 รายการ ดังนี้ Last-Modified หรือ ETag index.html จัดอยู่ในหมวดหมู่นี้ คุณสามารถแบ่งออกเป็น 2 ขั้นตอน

อย่างแรก ส่วนหัว Last-Modified และ ETag จะควบคุมโดย etag และ lastModified ตัวเลือกการกำหนดค่า ทั้ง 2 ตัวเลือกนี้ตั้งค่าเริ่มต้นเป็น 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');
    }
  },
}));

ยืนยันลักษณะการทำงานใหม่โดยใช้เครื่องมือสำหรับนักพัฒนาเว็บ

เมื่อมีการปรับเปลี่ยนเซิร์ฟเวอร์ไฟล์แบบคงที่แล้ว คุณสามารถตรวจสอบเพื่อ ตรวจสอบว่าได้ตั้งค่าส่วนหัวที่ถูกต้องแล้วโดยดูตัวอย่างแอปที่เผยแพร่อยู่โดยเปิดแผงเครือข่ายเครื่องมือสำหรับนักพัฒนาเว็บไว้

  • หากต้องการดูตัวอย่างเว็บไซต์ ให้กดดูแอป แล้วกด เต็มหน้าจอ เต็มหน้าจอ

  • กำหนดค่าคอลัมน์ที่ ที่แสดงในแผงเครือข่ายเพื่อรวมข้อมูลที่เกี่ยวข้องมากที่สุด โดยคลิกขวาใน ส่วนหัวของคอลัมน์

การกำหนดค่าเครื่องมือสำหรับนักพัฒนาเว็บ แผงเครือข่าย

คอลัมน์ที่ควรตรวจสอบตรงนี้คือ Name, Status, Cache-Control ETag และ Last-Modified

  • รีเฟรชหน้าเว็บเมื่อเปิดเครื่องมือสำหรับนักพัฒนาเว็บในแผงเครือข่าย

หลังจากหน้าเว็บโหลดแล้ว คุณจะเห็นรายการในแผงเครือข่ายที่มีลักษณะ ดังนี้

คอลัมน์แผงเครือข่าย

แถวแรกเป็นเอกสาร HTML ที่คุณสำรวจ ถูกต้อง แสดงด้วย Cache-Control: no-cache สถานะการตอบกลับ HTTP สำหรับคำขอนั้น คือ 304 ช่วงเวลานี้ หมายความว่าเบราว์เซอร์รู้ว่าจะไม่ใช้ HTML ที่แคชไว้ทันที แต่ ส่งคำขอ HTTP ไปยังเว็บเซิร์ฟเวอร์โดยใช้ Last-Modified และ ETag เพื่อดูว่ามีการอัปเดต HTML ที่มีอยู่ใน แคชของอุปกรณ์ การตอบกลับ HTTP 304 ระบุว่าไม่มี HTML ที่อัปเดต

อีก 2 แถวถัดไปมีไว้สำหรับเนื้อหา JavaScript และ CSS ที่มีเวอร์ชัน คุณควร เห็นการแสดงผลพร้อม Cache-Control: max-age=31536000 และสถานะ HTTP สำหรับ แต่ละรายการเท่ากับ 200 เนื่องจากการกำหนดค่าที่ใช้ จึงไม่มีการส่งคำขอจริงไปยัง เซิร์ฟเวอร์ Node.js และการคลิกที่รายการจะแสดงรายละเอียดเพิ่มเติม โดยแจ้งว่าการตอบกลับมาจาก "(จากดิสก์แคช)"

สถานะการตอบสนองของเครือข่ายเป็น 200

ค่าจริงสำหรับคอลัมน์ ETag และคอลัมน์แก้ไขล่าสุดไม่มีความสำคัญมากนัก สิ่งสำคัญคือการยืนยันว่า มีการตั้งค่าแล้ว

สรุปข้อมูล

หลังจากทำตามขั้นตอนใน Codelab นี้แล้ว ตอนนี้คุณก็คุ้นเคยกับวิธีการ กำหนดค่าส่วนหัวการตอบกลับ HTTP ในเว็บเซิร์ฟเวอร์ที่ใช้ Node.js โดยใช้ Express เพื่อการใช้แคช HTTP อย่างเหมาะสม คุณยังมีขั้นตอนที่จำเป็นในการยืนยัน มีการใช้ลักษณะการแคชที่คาดไว้ผ่านทางแผงเครือข่ายใน เครื่องมือสำหรับนักพัฒนาเว็บของ Chrome