Back-Forward Cache notRestoredreasons API

ดูการนําทางที่ถูกบล็อกไม่ให้ใช้ bfcache และเหตุผล

Chris Mills

พร็อพเพอร์ตี้ notRestoredReasons ที่เพิ่มลงในคลาส PerformanceNavigationTiming จะรายงานข้อมูลว่าเฟรมที่อยู่ในเอกสารถูกบล็อกจากการใช้ bfcache ในการนำทางหรือไม่และเพราะเหตุใด นักพัฒนาซอฟต์แวร์จะใช้ข้อมูลนี้เพื่อระบุหน้าเว็บที่ต้องมีการอัปเดตเพื่อให้เข้ากันได้กับ bfcache ซึ่งจะช่วยเพิ่มประสิทธิภาพของเว็บไซต์

สถานะปัจจุบัน

ลองใช้ bfcache notRestoredReasons API

ตั้งแต่เวอร์ชัน 109 เป็นต้นไป bfcache notRestoredReasons API จะพร้อมใช้งานในรูปแบบช่วงทดลองใช้จากต้นทางใน Chromium ค้นหาข้อมูลที่อัปเดตเกี่ยวกับกำหนดการเผยแพร่ของฟีเจอร์นี้โดยไปที่หน้าฟีเจอร์ของ ChromeStatus.com (ดูแผนกลยุทธ์ของ Chrome สำหรับวันที่เปิดตัวเวอร์ชัน)

คุณลองใช้ bfcache notRestoredReasons API ได้โดยการลงทะเบียนทดลองใช้จากต้นทาง และใช้ในการทดสอบ ดูวิธีการในการใช้โทเค็นหลังจากลงทะเบียนแล้วได้ที่เข้าร่วมช่วงทดลองใช้จากต้นทาง

แนวคิดและการใช้งาน

เบราว์เซอร์ที่ทันสมัยมีฟีเจอร์การเพิ่มประสิทธิภาพสำหรับการนำทางประวัติการเข้าชมที่เรียกว่า Back/Forward Cache (bfcache) วิธีนี้จะทำให้ผู้ใช้ได้รับประสบการณ์การโหลดหน้าทันทีเมื่อกลับไปยังหน้าที่เข้าชมแล้ว หน้าเว็บอาจถูกบล็อกไม่ให้เข้าสู่ bfcache หรือถูกนําออกขณะอยู่ใน bfcache ด้วยสาเหตุต่างๆ บางข้อจำเป็นสำหรับการใช้งานเบราว์เซอร์

ก่อนหน้านี้นักพัฒนาซอฟต์แวร์ไม่สามารถทราบได้ว่าเหตุใดหน้าเว็บของตนจึงถูกบล็อกไม่ให้ใช้ bfcache ในช่องดังกล่าว แม้ว่าจะมีการทดสอบในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome ก็ตาม หากต้องการเปิดใช้การตรวจสอบในช่อง เราได้ขยายคลาส PerformanceNavigationTiming ให้รวมพร็อพเพอร์ตี้ notRestoredReasons การดำเนินการนี้จะแสดงออบเจ็กต์ที่มีข้อมูลที่เกี่ยวข้องในเฟรมทั้งหมดที่อยู่ในเอกสาร ดังนี้

• รายละเอียด เช่น เฟรม id และ name เพื่อช่วยระบุรายการเหล่านี้ใน HTML
• มีการบล็อกไม่ให้ใช้ bfcache หรือไม่

• สาเหตุที่ถูกบล็อกไม่ให้ใช้ bfcache

  วิธีนี้ช่วยให้นักพัฒนาซอฟต์แวร์ดำเนินการเพื่อทำให้หน้าเหล่านั้นเข้ากันได้กับ bfcache ซึ่งจะช่วยเพิ่มประสิทธิภาพของเว็บไซต์

ตัวอย่าง

อินสแตนซ์ PerformanceNavigationTiming จะได้จากฟีเจอร์ต่างๆ เช่น Performance.getEntriesByType() และ PerformanceObserver

ตัวอย่างเช่น คุณสามารถเรียกใช้ฟังก์ชันต่อไปนี้เพื่อแสดงออบเจ็กต์ PerformanceNavigationTiming ทั้งหมดที่มีอยู่ในไทม์ไลน์ประสิทธิภาพในปัจจุบัน และบันทึก notRestoredReasons ของออบเจ็กต์ดังกล่าว

function returnNRR() {
  const navEntries = performance.getEntriesByType("navigation");
  for (let i = 0; i < navEntries.length; i++) {
    console.log(`Navigation entry ${i}`);
    let navEntry = navEntries[i];
    console.log(navEntry.notRestoredReasons);
  }
}

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

{
  blocked: true,
  children: [],
  id: "",
  name: "",
  reasons: [ "Internal Error", "Unload handler" ],
  src: "",
  url: "a.com"
}

คุณสมบัติมีดังนี้

blocked

ค่าบูลีนที่ระบุว่าหน้าที่มีการนำทางถูกบล็อกจากการใช้ bfcache (true) หรือไม่ (false)

children

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

id

สตริงที่แสดงค่าแอตทริบิวต์ id ของเฟรม (เช่น <iframe id="foo" src="...">) หากเฟรมไม่มี id ค่าจะเป็นสตริงว่างเปล่า

name

สตริงที่แสดงค่าแอตทริบิวต์ name ของเฟรม (เช่น <iframe name="bar" src="...">) หากเฟรมไม่มี name ค่าจะเป็นสตริงว่างเปล่า

reasons

อาร์เรย์ของสตริงแต่ละสตริงแสดงสาเหตุที่หน้าเว็บที่ไปยังส่วนต่างๆ ถูกบล็อกไม่ให้ใช้ bfcache การบล็อกอาจเกิดขึ้นจากหลายสาเหตุ ดูรายละเอียดเพิ่มเติมได้ที่ส่วนเหตุผลในการบล็อกด้านล่าง

src

สตริงที่แสดงถึงเส้นทางไปยังแหล่งที่มาของเฟรม (เช่น <iframe src="b.html">) หากเฟรมไม่มี src ค่าจะเป็นสตริงว่างเปล่า

url

สตริงที่แสดงถึง URL ของหน้าที่สำรวจ

สำหรับออบเจ็กต์ PerformanceNavigationTiming รายการที่ไม่ได้แสดงถึงการนำทางของประวัติ พร็อพเพอร์ตี้ notRestoredReasons จะแสดงผล null ซึ่งมีประโยชน์ในการตัดสินว่า bfcache ไม่เกี่ยวข้องกับการนำทางหนึ่งๆ หรือไม่ ซึ่งตรงข้ามกับที่ notRestoredReasons จะไม่ได้รับการสนับสนุน ซึ่งในกรณีนี้ระบบจะแสดงผล undefined

การรายงานการบล็อก bfcache ในเฟรมต้นทางเดียวกัน

เมื่อหน้าเว็บมีเฟรมต้นทางเดียวกันฝังอยู่ ค่า notRestoredReasons ที่แสดงผลจะมีออบเจ็กต์ภายในพร็อพเพอร์ตี้ children ซึ่งแสดงถึงสถานะที่ถูกบล็อกของเฟรมที่ฝังแต่ละเฟรม

เช่น

{
  blocked: false,
  children: [
    { url: "a.com", src: "b.a.com", id: "b", name: "b", blocked: false, reasons: [], children: [] },
    { url: "a.com", src: "c.a.com", id: "c", name: "c", blocked: true, reasons: [ "BroadcastChannel" ], children: [] },
    { url: "a.com", src: "d.a.com", id: "d", name: "d", blocked: false, reasons: [], children: [] }
  ],
  id: "",
  name: "",
  reasons: [],
  src: "",
  url:"a.com"
}

การรายงานการบล็อก bfcache ในเฟรมข้ามต้นทาง

เมื่อหน้าเว็บมีเฟรมแบบข้ามต้นทางฝังอยู่ เราจะจำกัดปริมาณข้อมูลที่แชร์เกี่ยวกับเฟรมดังกล่าวเพื่อไม่ให้ข้อมูลข้ามต้นทางรั่วไหล เราจะรวมเฉพาะข้อมูลที่หน้าด้านนอกทราบอยู่แล้ว และทรีย่อยแบบข้ามต้นทางบล็อก bfcache หรือไม่ เราไม่รวมเหตุผลในการบล็อกหรือข้อมูลเกี่ยวกับระดับที่ต่ำกว่าของแผนผังย่อย (แม้ว่าระดับย่อยบางระดับจะเป็นต้นทางเดียวกัน)

เช่น

{
  blocked: false,
  children: [
    { url: "a.com", src: "c.a.com", id: "c", name: "c", blocked: true, reasons: [ "ScreenReader" ], children: [] },
    /* cross-origin frame */
    { url: "", src: "b.com", id: "d", name: "d", blocked: true, reasons: [], children: [] }
  ],
  id: "",
  name: "",
  reasons: [],
  src: "",
  url:"a.com"
}

หากเฟรมแบบข้ามต้นทางหลายเฟรมมีเหตุผลในการบล็อก เราจะสุ่มเลือก iframe แบบข้ามต้นทาง 1 รายการและรายงานว่า iframe ดังกล่าวบล็อก bfcache หรือไม่ สำหรับเฟรมที่เหลือ เราจะรายงาน null สำหรับค่า blocked เพื่อป้องกันไม่ให้ผู้ไม่ประสงค์ดีคาดคะเนข้อมูลเกี่ยวกับสถานะผู้ใช้บนเว็บไซต์ที่ไม่ได้ควบคุมด้วยการฝังเฟรมของบุคคลที่สามหลายเฟรมลงในหน้า แล้วเปรียบเทียบข้อมูลการบล็อกจากแต่ละเว็บ

{
  blocked: false,
  children: [
    /* cross-origin frames */
    {url: "", src: "b.com", id: "b", name: "b", blocked: null, reasons: [], children: []},
    {url: "", src: "c.com", id: "c", name: "c", blocked: true, reasons: [], children: []},
    {url: "", src: "d.com", id: "d", name: "d", blocked: null, reasons: [], children: []}
  ]
  id: "",
  name: "",
  reasons: [],
  src: "",
  url:"a.com"
}

โปรดดูส่วนความปลอดภัยและความเป็นส่วนตัวในข้อความอธิบายสำหรับรายละเอียดเพิ่มเติมเกี่ยวกับข้อควรพิจารณาด้านความปลอดภัยและความเป็นส่วนตัว

เหตุผลที่บล็อก

ดังที่กล่าวไปก่อนหน้านี้ การบล็อกอาจเกิดขึ้นจากหลายสาเหตุ เราได้รวบรวมสเปรดชีตที่มีประโยชน์ ซึ่งแสดงสตริงเหตุผลทั้งหมดและอธิบายความหมาย

มีหมวดหมู่หลักๆ 2-3 หมวดหมู่ที่ควรกล่าวถึง ดังนี้

• Circumstantial: หมายถึงเหตุผลที่บล็อกซึ่งไม่เกี่ยวข้องกับโค้ดหน้าเว็บของนักพัฒนาซอฟต์แวร์โดยตรง ตัวอย่างเช่น คอมโพเนนต์ที่เกี่ยวข้องขัดข้อง เกิดข้อผิดพลาดในกระบวนการโหลด หน้าเว็บอยู่ในสถานะชั่วคราวที่แคชไม่ได้ มีการปิดใช้ bfcache เนื่องจากหน่วยความจำไม่เพียงพอ หรือ Service Worker ทำอะไรบางอย่างกับหน้าเว็บที่ทำให้ไม่สามารถแคชหน้าได้
• Extensions: ข้อความแสดงเหตุผลบางประการที่เกี่ยวข้องกับส่วนขยาย โดยทั่วไปเราจะรวมเหตุผลต่างๆ เข้าด้วยกันเป็นเหตุผลของ "ส่วนขยาย" เราตั้งใจให้คลุมเครือเกี่ยวกับเหตุผลในการบล็อกที่เกี่ยวข้องกับส่วนขยาย เนื่องจากเราไม่ต้องการให้ข้อมูลมากเกินไปเกี่ยวกับส่วนขยายที่ผู้ใช้ติดตั้ง ส่วนขยายใดที่ทำงานอยู่ในหน้าเว็บ การทำงานของส่วนขยายใด เป็นต้น
• PageSupportNeeded: โค้ดของนักพัฒนาซอฟต์แวร์ใช้ฟีเจอร์แพลตฟอร์มเว็บที่ไม่ใช่การบล็อก bfcache แต่ปัจจุบันอยู่ในสถานะที่เป็นการบล็อก bfcache ตัวอย่างเช่น ปัจจุบันหน้าเว็บมี BroadcastChannel ที่ Listener ลงทะเบียนไว้ หรือมีการเชื่อมต่อ IndexedDB แบบเปิด หรือหน้าเว็บได้ลงทะเบียนเครื่องจัดการ unload ซึ่งปัจจุบันป้องกันไม่ให้มีการใช้ bfcache ในบางเบราว์เซอร์
• SupportPending: โค้ดของนักพัฒนาซอฟต์แวร์ใช้ฟีเจอร์แพลตฟอร์มเว็บที่ทำให้หน้าเว็บถูกตัดสิทธิ์จาก bfcache เช่น Web Serial API, Web Authentication API, File System Access API หรือ Media Session API หรือหน้าเว็บกำลังใช้ Cache-Control: no-store ซึ่งปัจจุบันป้องกันไม่ให้มีการใช้ bfcache ในบางเบราว์เซอร์ หมวดหมู่นี้ยังใช้เพื่อรายงานการมีเครื่องมือนอกหน้าเว็บซึ่งบล็อก bfcache เช่น โปรแกรมอ่านหน้าจอหรือเครื่องมือจัดการรหัสผ่านของ Chrome อีกด้วย

ความคิดเห็น

ทีม Chromium ต้องการทราบข้อมูลเกี่ยวกับประสบการณ์ของคุณในการใช้ bfcache notRestoredReasons API

บอกให้เราทราบเกี่ยวกับการออกแบบ API

มีอะไรเกี่ยวกับ API ที่ทำงานไม่เหมือนที่คุณคาดหวังไว้ไหม หรือมีวิธีการหรือพร็อพเพอร์ตี้ ที่ขาดหายไปที่คุณจำเป็นต้องใช้ในการนำแนวคิดของคุณไปปฏิบัติหรือไม่ หากมีข้อสงสัยหรือความคิดเห็น เกี่ยวกับโมเดลความปลอดภัย แจ้งปัญหาเกี่ยวกับข้อมูลจำเพาะใน [GitHub repo][feedback] ที่เกี่ยวข้อง หรือแสดงความคิดเห็นเกี่ยวกับปัญหาที่มีอยู่

รายงานปัญหาเกี่ยวกับการใช้งาน

คุณพบข้อบกพร่องในการใช้งาน Chromium หรือไม่ หรือการใช้งานแตกต่างจากข้อกำหนดหรือไม่ รายงานข้อบกพร่องที่ new.crbug.com อย่าลืมใส่รายละเอียดให้มากที่สุดเท่าที่จะทำได้ วิธีการง่ายๆ ในการทำซ้ำ และระบุคอมโพเนนต์เป็น UI > Browser > Navigation > bfcache Glitch เหมาะสำหรับการแชร์การดำเนินการซ้ำที่ง่ายและรวดเร็ว

แสดงการสนับสนุนสำหรับ API

คุณวางแผนที่จะใช้ API ของ bfcache notRestoredReasons ไหม การสนับสนุนสาธารณะของคุณช่วยให้ทีม Chromium จัดลำดับความสำคัญของคุณลักษณะต่างๆ และแสดงให้ผู้ให้บริการเบราว์เซอร์รายอื่นๆ เห็นว่าการสนับสนุนนั้นสำคัญเพียงใด

ส่งทวีตไปที่ @ChromiumDev โดยใช้แฮชแท็ก #NotRestoredReasons และแจ้งให้เราทราบว่าคุณใช้แฮชแท็กนี้ที่ไหนและอย่างไร

ลิงก์ที่มีประโยชน์

• Back-Forward Cache
• คำอธิบายแบบสาธารณะ
• ข้อบกพร่องในการติดตาม Chromium
• ช่วงทดลองใช้จากต้นทางสำหรับ Back/Forward Cache NotRestoredReason API
• หน้าฟีเจอร์ ChromeStatus.com
• ความตั้งใจในการทดสอบ