Back-Forward Cache notRestoredreasons API

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

Chris Mills
Barry Pollard

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

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

notRestoredReasons API จัดส่งมาจาก Chrome 123 และเรากำลังทยอยเปิดตัว

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

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

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

  • เหตุผลที่บล็อกไม่ให้ใช้ bfcache

  • รายละเอียดต่างๆ เช่น เฟรม id และ name เพื่อช่วยระบุ iframe ใน HTML

    วิธีนี้จะช่วยให้นักพัฒนาซอฟต์แวร์ดำเนินการเพื่อให้หน้าเหล่านั้นเข้ากันได้กับ 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 จะแสดงออบเจ็กต์ที่มีโครงสร้างต่อไปนี้ ซึ่งแสดงถึงสถานะที่ถูกบล็อกของเฟรมระดับบนสุด

{
  children: [],
  id: null,
  name: null,
  reasons: [
    {"reason", "unload-listener"}
  ],
  src: null,
  url: "https://www.example.com/page/"
}

โดยพร็อพเพอร์ตี้มีดังนี้

children
อาร์เรย์ของออบเจ็กต์ที่แสดงสถานะถูกบล็อกของเฟรมต้นทางเดียวกันที่ฝังอยู่ในเฟรมระดับบนสุด แต่ละวัตถุมีโครงสร้างเดียวกันกับวัตถุหลัก ทำให้สามารถแสดงเฟรมแบบฝังกี่ระดับภายในวัตถุนั้นซ้ำๆ หากเฟรมไม่มีรายการย่อย อาร์เรย์จะว่างเปล่า
id
สตริงที่แสดงค่าแอตทริบิวต์ id ของเฟรม (เช่น <iframe id="foo" src="...">) หากเฟรมไม่มี id ค่าจะเป็น null สำหรับหน้าระดับบนสุดคือ null
name
สตริงที่แสดงค่าแอตทริบิวต์ name ของเฟรม (เช่น <iframe name="bar" src="...">) หากเฟรมไม่มี name ค่าจะเป็นสตริงว่างเปล่า สำหรับหน้าระดับบนสุดคือ null
reasons
อาร์เรย์ของสตริงซึ่งแต่ละสตริงแสดงเหตุผลที่หน้าเว็บที่นำทางถูกบล็อกไม่ให้ใช้ bfcache การบล็อกอาจเกิดขึ้นด้วยเหตุผลหลายประการ ดูรายละเอียดเพิ่มเติมได้ที่ส่วนเหตุผลในการบล็อก
src
สตริงที่แสดงเส้นทางไปยังแหล่งที่มาของเฟรม (เช่น <iframe src="b.html">) หากเฟรมไม่มี src ค่าจะเป็นสตริงว่าง สำหรับหน้าระดับบนสุดคือ null
url
สตริงที่แสดง URL ของหน้า/iframe ที่ไปยังส่วนต่างๆ

สำหรับออบเจ็กต์ PerformanceNavigationTiming ที่ไม่ได้แสดงการนำทางในประวัติการเข้าชม พร็อพเพอร์ตี้ notRestoredReasons จะแสดงผล null

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

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

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

เช่น

{
  children: [
    {
      children: [],
      id: "iframe-id",
      name: "iframe-name",
      reasons: [],
      src: "./index.html",
      url: "https://www.example.com/"
    },
    {
      children: [],
      id: "iframe-id2",
      name: "iframe-name2",
      reasons: [
        {"reason": "unload-listener"}
      ],
      src: "./unload-examples.html",
      url: "https://www.example.com/unload-examples.html"
    },
  ],
  id: null,
  name: null,
  reasons: [],
  src: null,
  url:"https://www.example.com"
}

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

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

เช่น

{
  children: [
    {
      children: [],
      id: "iframe-id",
      name: "iframe-name",
      reasons: [],
      src: "./index.html",
      url: "https://www.example2.com/"
    }
  ],
  id: null,
  name: null,
  reasons: [
        {"reason": "masked"}
  ],
  src: null,
  url:"https://www.example.com"
}

สำหรับ iframe แบบข้ามต้นทางทั้งหมด เราจะรายงาน null สำหรับค่า reasons ของเฟรม และเฟรมระดับบนสุดจะแสดงเหตุผลเป็น "masked" โปรดทราบว่า "masked" อาจใช้เพื่อเหตุผลเฉพาะ User Agent ด้วย จึงอาจไม่แสดงปัญหาใน iframe เสมอไป

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

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

อย่างที่กล่าวไว้ก่อนหน้านี้ อาจมีหลายสาเหตุที่ทำให้เกิดการบล็อก

ต่อไปนี้เป็นตัวอย่างสาเหตุที่พบบ่อยที่สุดส่วนหนึ่งที่ทำให้ใช้ bfcache ไม่ได้

  • unload-listener: หน้านี้จะลงทะเบียนตัวแฮนเดิล unload ซึ่งป้องกันไม่ให้ใช้ bfcache ในบางเบราว์เซอร์ ดูข้อมูลเพิ่มเติมได้ที่การเลิกใช้เหตุการณ์ยกเลิกการโหลด
  • response-cache-control-no-store: หน้าเว็บใช้ no-store เป็นค่า cache-control
  • related-active-contents: หน้านั้นเปิดจากหน้าอื่น (โดยใช้ "แท็บซ้ำ") ซึ่งยังคงมีการอ้างอิงมายังหน้านี้

ความคิดเห็น

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

บอกเราเกี่ยวกับการออกแบบ API

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

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

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

แสดงการรองรับ API

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

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

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