ดูการนําทางที่ถูกบล็อกไม่ให้ใช้ bfcache และเหตุผล
พร็อพเพอร์ตี้ notRestoredReasons
ที่เพิ่มลงในคลาส PerformanceNavigationTiming
จะรายงานข้อมูลว่าเฟรมที่อยู่ในเอกสารถูกบล็อกจากการใช้ bfcache ในการนำทางหรือไม่และเพราะเหตุใด นักพัฒนาซอฟต์แวร์จะใช้ข้อมูลนี้เพื่อระบุหน้าเว็บที่ต้องมีการอัปเดตเพื่อให้เข้ากันได้กับ bfcache ซึ่งจะช่วยเพิ่มประสิทธิภาพของเว็บไซต์
สถานะปัจจุบัน
ขั้นตอน | สถานะ |
---|---|
1. สร้างข้อความอธิบาย | เสร็จสมบูรณ์ |
2. สร้างฉบับร่างเริ่มต้นของข้อกำหนด | Not started |
3. รวบรวมความคิดเห็นและทำซ้ำเกี่ยวกับการออกแบบ | กำลังดำเนินการ |
4. ช่วงทดลองใช้จากต้นทาง | เริ่มแล้ว |
5. เปิดตัว | Not started |
ลองใช้ 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
และแจ้งให้เราทราบว่าคุณใช้แฮชแท็กนี้ที่ไหนและอย่างไร