การเปลี่ยนแปลงการทำงานของ BFCache ที่มีพอร์ตข้อความของส่วนขยาย

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

Mingyu Lei

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

พอร์ตข้อความส่วนขยาย

ส่วนขยายสื่อสารกับสคริปต์เนื้อหาหรือส่วนขยายอื่นๆ ผ่านการส่งข้อความ คุณส่งข้อความได้โดยใช้คําขอแบบครั้งเดียวโดยเรียกใช้ runtime.sendMessage() และ tabs.sendMessage() หรือใช้พอร์ตข้อความแบบนํากลับมาใช้ใหม่ได้ ตราบใดที่พอร์ตยังทำงานอยู่ ทั้งสคริปต์เนื้อหาและสคริปต์เบื้องหลังของส่วนขยายจะใช้พอร์ตนั้นเพื่อโพสต์ข้อความถึงกันได้

ดูข้อมูลเพิ่มเติมได้ที่การส่งข้อความ

แคชย้อนหลัง

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

ขณะที่หน้าเว็บอยู่ใน BFCache หน้าเว็บจะอยู่ในสถานะหยุดทำงาน ซึ่งไม่อนุญาตให้เรียกใช้ JavaScript ซึ่งหมายความว่าจะประมวลผลข้อความที่ได้รับไม่ได้

ดูข้อมูลเพิ่มเติมได้ที่แคชย้อนกลับ/ไปข้างหน้า

ผลกระทบของพอร์ตข้อความส่วนขยายต่อ BFCache

กล่าวโดยย่อคือ ส่วนขยายที่ส่งข้อความไปยังหน้าใน BFCache อาจทําให้ระบบนำแคชออกและส่งผลต่อประสิทธิภาพ

เมื่อระบบจัดเก็บหน้าเว็บที่มีพอร์ตข้อความส่วนขยายที่เปิดอยู่ใน BFCache พอร์ตจะยังคงเปิดอยู่ เมื่อกู้คืนหน้าเว็บจาก BFCache แล้ว เวิร์กเกอร์บริการของส่วนขยายจะยังคงใช้การอ้างอิงเก่าของพอร์ตข้อความเพื่อโพสต์ข้อความไปยังสคริปต์เนื้อหาได้

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

ในการใช้งานปัจจุบันของ Chrome ระบบจะนําหน้าเว็บโฮสต์ออกจาก BFCache และทิ้งข้อความเพื่อหลีกเลี่ยงปัญหาเกี่ยวกับข้อความที่สูญหาย หากผู้ใช้กลับไปที่หน้าเว็บ ระบบจะโหลดหน้าเว็บนั้นใหม่ ซึ่งจะช่วยให้ส่วนขยายสร้างการเชื่อมต่อใหม่ได้

ในทางกลับกัน การใช้งานนี้จะจำกัดสถานการณ์ที่จะใช้ BFCache ซึ่งจะจำกัดประสิทธิภาพที่เพิ่มขึ้น โดยเฉพาะสําหรับส่วนขยายที่มีกลไกการออกอากาศหรือกลไกการเต้นของหัวใจซึ่งส่งข้อความไปยังการเชื่อมต่อทั้งหมดเป็นประจํา นอกจากนี้ เนื่องจากระบบจะทริกเกอร์การนําออกเมื่อส่วนขยายส่งข้อความไปยังสคริปต์เนื้อหา นักพัฒนาเว็บจึงไม่มีวิธีป้องกันไม่ให้หน้าเว็บถูกนําออก

เราวางแผนที่จะเปิดตัวลักษณะการทํางานของพอร์ตข้อความแบบใหม่เพื่อปรับปรุงประสิทธิภาพโดยรวม

ลักษณะการทํางานใหม่: การปิดแชแนลข้อความเมื่อระบบจัดเก็บหน้าเว็บไว้ใน BFCache

ตั้งแต่ Chrome 123 เป็นต้นไป เมื่อระบบจัดเก็บหน้าเว็บที่มีพอร์ตข้อความส่วนขยายที่เปิดอยู่ใน BFCache ระบบจะปิดช่องทางข้อความที่เกี่ยวข้องจากฝั่งสคริปต์เนื้อหา ด้วยเหตุนี้ พอร์ตข้อความทั้งหมดจึงปิดอยู่ และส่วนขยายจะได้รับเหตุการณ์ onDisconnect

เนื่องจากแชแนลปิดอยู่ ระบบจะไม่ส่งข้อความไปยังหน้าเว็บขณะที่อยู่ใน BFCache ดังนั้น หน้าเว็บจะไม่ถูกนำออกเนื่องจากส่วนขยาย

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

// content script

let port;

window.addEventListener('pageshow', (event) => {
  if (event.persisted) {
    // The page is restored from BFCache, set up a new connection.
    port = chrome.runtime.connect();
  }
});

อ่านเพิ่มเติมเกี่ยวกับการสนทนาใน WECG จากตัวแทนของเบราว์เซอร์ต่างๆ (ในปัญหา 474)

ฉันจะได้รับผลกระทบไหม

ลักษณะการทำงานใหม่จะพร้อมใช้งานหลัง Flag ใน Chrome 123 เพื่อให้คุณทดสอบโค้ดได้ ดูข้อมูลเพิ่มเติมได้ที่ไทม์ไลน์ ทําตามขั้นตอนต่อไปนี้เพื่อทดสอบชิ้นงาน โปรดทราบว่าการทดสอบนี้เป็นเพียงการทดสอบแบบง่ายเท่านั้น และเราขอแนะนำให้คุณเรียกใช้ Chrome โดยเปิดใช้ฟีเจอร์นี้ไว้เป็นระยะเวลาหนึ่ง เนื่องจากอาจคาดเดาได้ยากว่าฟีเจอร์ใดในส่วนขยายที่อาจทำให้เกิดปัญหา

การทดสอบลักษณะการทำงานใหม่

วิธีบังคับเปิดใช้การทดสอบใน Chrome 123

1. เปิด Chrome โดยใช้ Flag ต่อไปนี้ ซึ่งจะบังคับให้ใช้ลักษณะการทำงานใหม่

   --enable-features=DisconnectExtensionMessagePortWhenPageEntersBFCache
   

2. ไปที่หน้าเว็บและโต้ตอบกับส่วนขยายหากจําเป็น เพื่อให้สคริปต์เนื้อหาเปิดพอร์ตไปยังส่วนขยาย

3. ไปยังส่วนอื่นแล้วกลับ ตอนนี้หน้าเว็บควรได้รับการกู้คืนแล้ว แต่ช่องข้อความระหว่างสคริปต์เนื้อหากับ Service Worker ควรถูกตัดการเชื่อมต่อ

4. ทดสอบว่าส่วนขยายยังทํางานตามปกติหรือไม่ หากไม่ คุณควรเชื่อมต่ออีกครั้งด้วยตนเองตามที่แสดงในส่วนก่อนหน้า

ระบุปัญหาง่ายๆ โดยใช้ลักษณะการทำงานแบบเก่า

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

1. ตรวจสอบว่า Chrome เป็นเวอร์ชัน 123 เป็นอย่างน้อย เราขอแนะนำให้ใช้ Chrome Canary ซึ่งมีคำเตือนเพิ่มเติมเพื่อให้การทดสอบง่ายขึ้น

2. เปิด Chrome โดยใช้ Flag ต่อไปนี้ ซึ่งจะบังคับให้ใช้ลักษณะการทำงานแบบเก่า

   --disable-features=DisconnectExtensionMessagePortWhenPageEntersBFCache
   

3. ไปที่หน้าเว็บที่มีสิทธิ์ใช้ BFCache โดยที่ส่วนขยายไม่ทำงาน (เช่น เว็บไซต์ง่ายๆ บางแห่ง เช่น https://example.com/) ทำตามบทแนะนำ BFCache เพื่อให้แน่ใจว่ามีการกู้คืนจาก BFCache

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

5. หากต้องโหลดหน้าเว็บใหม่แทนจาก BFCache เนื่องจากการลบออก และปัญหาที่ป้องกันไม่ให้มีการคืนค่าคือ "ExtensionSentMessageToCachedFrame" แสดงว่าส่วนขยายอาจได้รับผลกระทบจากการเปลี่ยนแปลงนี้

   ใน Chrome Canary 124.0.6315.0 ขึ้นไป คุณจะเห็นคำเตือนต่อไปนี้ในหน้าเว็บด้วย

   

เมื่อยืนยันว่าส่วนขยายโพสต์ข้อความไปยังหน้า BFCache แล้ว ให้ทําตามขั้นตอนในส่วนก่อนหน้าเพื่อบังคับใช้การทดสอบและดูว่าตรรกะใดขัดข้องหรือไม่

ลำดับเวลาในการเผยแพร่

เราวางแผนที่จะทยอยเพิ่มลักษณะการทำงานใหม่นี้ตั้งแต่ Chrome 123 เป็นต้นไป แผนโดยละเอียดมีดังนี้