หมั่นอัปเดตสิ่งใหม่ให้เป็นปัจจุบันเสมอพร้อมตรวจสอบความถูกต้องอีกครั้ง

เครื่องมือเพิ่มเติมที่จะช่วยให้คุณรักษาสมดุลระหว่างความทันท่วงทีและความใหม่เมื่อแสดงเว็บแอป

Jeff Posnick

สินค้าที่จัดส่งมีอะไรบ้าง

stale-while-revalidate ช่วยให้นักพัฒนาแอปรักษาสมดุลระหว่างความรวดเร็วระหว่างการโหลดเนื้อหาที่แคชไว้ทันทีและความสดใหม่ เพื่อให้มั่นใจว่าจะมีการใช้การอัปเดตเนื้อหาที่แคชไว้ในอนาคต หากคุณดูแลรักษาบริการเว็บหรือไลบรารีของบุคคลที่สามที่มีการอัปเดตตามกำหนดการเป็นประจำ หรือเนื้อหาของบุคคลที่หนึ่งมีแนวโน้มที่จะมีอายุการใช้งานสั้นๆ stale-while-revalidate อาจเป็นส่วนเสริมที่มีประโยชน์สำหรับนโยบายการแคชที่มีอยู่

การรองรับการตั้งค่า stale-while-revalidate ควบคู่ไปกับ max-age ในส่วนหัวการตอบกลับ Cache-Control พร้อมใช้งานใน Chrome 75 และ Firefox 68

เบราว์เซอร์ที่ไม่รองรับ stale-while-revalidate จะไม่สนใจการกำหนดค่าดังกล่าว และจะใช้ max-age ตามที่เราจะอธิบายให้ฟังเร็วๆ นี้...

ความหมาย

เราจะแบ่ง stale-while-revalidate ออกเป็น 2 ส่วน ได้แก่ แนวคิดที่ว่าการตอบกลับที่แคชไว้อาจไม่มีการอัปเดต และกระบวนการตรวจสอบอีกครั้ง

ก่อนอื่น เบราว์เซอร์จะรู้ได้อย่างไรว่าการตอบกลับที่แคชไว้เป็น "ไม่มีอัปเดต" ส่วนหัวการตอบกลับ Cache-Control ที่มี stale-while-revalidate ควรมี max-age ด้วย และจำนวนวินาทีที่ระบุผ่าน max-age คือสิ่งที่ระบุ การไม่มีอัปเดต การตอบกลับที่แคชไว้ที่ใหม่กว่า max-age จะถือว่าเป็นคำตอบใหม่ และการตอบกลับที่แคชไว้ที่เก่ากว่าจะไม่มีอัปเดต

หากการตอบกลับที่แคชไว้ในเครื่องยังคงเป็นของใหม่ ก็สามารถใช้การตอบกลับที่แคชไว้ตามที่เป็นอยู่เพื่อดำเนินการตามคำขอของเบราว์เซอร์ จากมุมมองของ stale-while-revalidate สถานการณ์นี้ไม่ต้องดำเนินการใดๆ

แต่หากการตอบกลับที่แคชไว้ไม่มีอัปเดต ระบบจะดำเนินการตรวจสอบตามอายุอีกครั้ง กล่าวคือ อายุการตอบกลับที่แคชภายในกรอบเวลาเพิ่มเติมที่ได้รับจากการตั้งค่า stale-while-revalidate หรือไม่

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

แต่หากการตอบกลับที่แคชไว้ซึ่งไม่มีการอัปเดตนานพอจะเกินกรอบเวลาstale-while-revalidate แล้ว การตอบกลับดังกล่าวก็จะไม่ทำให้คำขอของเบราว์เซอร์เสร็จสมบูรณ์ เบราว์เซอร์จะดึงการตอบกลับจากเครือข่ายแทน และใช้การตอบสนองทั้ง 2 อย่างกับคำขอเริ่มต้นและป้อนข้อมูลแคชในเครื่องด้วยการตอบกลับใหม่

ตัวอย่างที่เผยแพร่อยู่

ด้านล่างนี้เป็นตัวอย่าง HTTP API ง่ายๆ สำหรับการส่งคืนเวลาปัจจุบัน โดยเฉพาะจำนวนนาทีปัจจุบันเมื่อผ่านไป 1 ชั่วโมง

ในสถานการณ์นี้ เว็บเซิร์ฟเวอร์จะใช้ส่วนหัว Cache-Control นี้ในการตอบกลับ HTTP:

Cache-Control: max-age=1, stale-while-revalidate=59

การตั้งค่านี้หมายความว่า หากคำขอเวลาซ้ำกันภายใน 1 วินาทีถัดไป ค่าที่แคชไว้ก่อนหน้านี้จะยังเป็นข้อมูลล่าสุดและจะใช้ตามที่เป็นอยู่โดยไม่มีการตรวจสอบซ้ำ

หากมีคำขอซ้ำกันในช่วง 1 ถึง 60 วินาทีหลังจากนั้น ค่าที่แคชจะไม่มีอัปเดต แต่จะใช้เพื่อดำเนินการตามคำขอ API นี้ ในขณะเดียวกัน "ในเบื้องหลัง" จะมีการส่งคำขอตรวจสอบซ้ำเพื่อแสดงแคชด้วยค่าใหม่สำหรับการใช้งานในอนาคต

หากส่งคำขอซ้ำหลังจากผ่านไปเกิน 60 วินาที ระบบจะไม่ใช้การตอบสนองที่ไม่มีการอัปเดตเลย และทั้งการดำเนินการตามคำขอของเบราว์เซอร์และการตรวจสอบแคชอีกครั้งจะขึ้นอยู่กับการได้รับการตอบกลับจากเครือข่าย

ต่อไปนี้คือรายละเอียดของ 3 สถานะที่แตกต่างกัน รวมถึงกรอบเวลาที่ใช้แต่ละสถานะสำหรับตัวอย่างของเรา

แผนภาพแสดงข้อมูลจากส่วนก่อนหน้า

กรณีการใช้งานที่พบบ่อย

แม้ว่าตัวอย่างข้างต้นสำหรับบริการ API "นาทีหลังจากชั่วโมง" สร้างขึ้น แต่ข้อมูลนี้แสดงให้เห็นถึงกรณีการใช้งานที่คาดไว้ ซึ่งเป็นบริการที่ให้ข้อมูลที่จำเป็นต้องรีเฟรช แต่ยอมรับการที่ไม่มีอัปเดตได้ในระดับหนึ่ง

ตัวอย่างที่คล้ายกันอาจเป็น API สำหรับสภาพอากาศปัจจุบันหรือพาดหัวข่าวเด่นที่เขียนเมื่อชั่วโมงที่ผ่านมา

โดยทั่วไปแล้ว คำตอบที่อัปเดตตามช่วงเวลาที่ทราบ มีแนวโน้มที่จะได้รับคำขอหลายครั้ง และเป็นแบบคงที่ภายในช่วงเวลาดังกล่าวเป็นตัวเลือกที่ดีสำหรับการแคชระยะสั้นผ่าน max-age การใช้ stale-while-revalidate นอกเหนือจาก max-age จะเพิ่มความเป็นไปได้ที่จะมีการดำเนินการตามคำขอในอนาคตจากแคชด้วยเนื้อหาใหม่ โดยไม่บล็อกการตอบสนองของเครือข่าย

โปรแกรมดังกล่าวโต้ตอบกับโปรแกรมทำงานของบริการอย่างไร

หากคุณเคยได้ยินว่า stale-while-revalidate มีโอกาสสูงที่ข้อความดังกล่าวอยู่ในบริบทของสูตรอาหารที่ใช้ภายในโปรแกรมทำงานของบริการ

การใช้ฟีเจอร์ "ไม่มีอัปเดตขณะตรวจสอบใหม่" ผ่านส่วนหัว Cache-Control จะมีความคล้ายคลึงกันกับการใช้งานในโปรแกรมทำงานของบริการ ซึ่งก็ต้องคำนึงถึงปัจจัยเดียวกันหลายอย่างเกี่ยวกับเวลาที่เสียไปและอายุการใช้งานสูงสุด อย่างไรก็ตาม มีข้อควรพิจารณา 2-3 ประการที่คุณควรคำนึงถึงเมื่อตัดสินใจว่าจะใช้แนวทางสำหรับ Service Worker หรือไม่ หรือจะใช้เพียงการกำหนดค่าส่วนหัว Cache-Control

ใช้ระบบ Service Worker ในกรณีต่อไปนี้

  • คุณใช้ Service Worker ในเว็บแอปอยู่แล้ว
  • คุณต้องควบคุมเนื้อหาของแคชอย่างละเอียด และต้องการใช้นโยบายการหมดอายุที่ใช้งานล่าสุด โมดูล การหมดอายุของแคช ของ Workbox ช่วยแก้ปัญหานี้ได้
  • คุณต้องการรับการแจ้งเตือนเมื่อคำตอบที่ไม่มีการอัปเดตเปลี่ยนในพื้นหลังในระหว่างขั้นตอนการตรวจสอบอีกครั้ง โมดูลการอัปเดตแคชการออกอากาศของ Workbox ช่วยแก้ปัญหานี้ได้
  • คุณต้องมีลักษณะการทำงาน stale-while-revalidate นี้ในเบราว์เซอร์รุ่นใหม่ทั้งหมด

ใช้แนวทางการควบคุมแคชหาก...

  • คุณไม่ต้องจัดการกับค่าใช้จ่ายในการทำให้ใช้งานได้และดูแลรักษาโปรแกรมทำงานของบริการสำหรับเว็บแอป
  • คุณสามารถปล่อยให้การจัดการแคชอัตโนมัติของเบราว์เซอร์ป้องกันไม่ให้แคชในเครื่องของคุณมีขนาดใหญ่เกินไป
  • คุณยังใช้แนวทางที่ปัจจุบันยังไม่รองรับในเบราว์เซอร์ใหม่ๆ ทั้งหมดได้ (ข้อมูล ณ เดือนกรกฎาคม 2019 เป็นต้นไป การรองรับอาจเพิ่มขึ้นในอนาคต)

หากคุณใช้ Service Worker และเปิดใช้ stale-while-revalidate สำหรับการตอบกลับบางอย่างผ่านส่วนหัว Cache-Control ด้วย โดยทั่วไปโปรแกรมทำงานของบริการจะ "แคร็กแรก" ในการตอบกลับคำขอ หากโปรแกรมทำงานของบริการตัดสินใจที่จะไม่ตอบกลับ หรือในกระบวนการสร้างการตอบกลับ จะมีการส่งคำขอเครือข่ายโดยใช้ fetch() ลักษณะการทำงานที่กำหนดค่าผ่านส่วนหัว Cache-Control ก็จะมีผลในที่สุด

ดูข้อมูลเพิ่มเติม

รูปภาพหลักโดย Samuel Zeller