การเลิกใช้งานเหตุการณ์ยกเลิกการโหลด

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

ไทม์ไลน์การเลิกใช้งาน

เราทราบว่าลักษณะการยกเลิกการโหลดอาจมีการเปลี่ยนแปลงตั้งแต่เดือนมกราคม 2019 เมื่อเราประกาศความตั้งใจที่จะใช้แคช "ย้อนกลับ/ไปข้างหน้า" ควบคู่ไปกับการติดตั้งใช้งาน เรายังได้ทําการติดต่อสื่อสารกับผู้ใช้จํานวนมาก ซึ่งส่งผลให้การใช้งานการยกเลิกการโหลดลดลงอย่างมาก เพื่อเป็นการเสริมการติดต่อนี้ เรายังได้เริ่มเสนอวิธีทดสอบผลของการเลิกใช้งานการยกเลิกการโหลดจาก Chrome 115 ด้วย

หลังจากช่วงการติดต่อและช่วงทดลองใช้แล้ว เราคาดว่าการเลิกใช้งานแบบค่อยเป็นค่อยไปจะเปิดตัวดังนี้

  • ระยะที่มีขอบเขตซึ่งการยกเลิกการโหลดจะค่อยๆ หยุดทํางานสําหรับเว็บไซต์ยอดนิยม 50 อันดับแรก (ข้อมูลอ้างอิง ณ เวลาที่เขียน)
    • โดยเริ่มจากผู้ใช้ 1% จาก Chrome 120 (ปลายเดือนพฤศจิกายน 2023)
    • สิ้นสุดด้วยผู้ใช้ 100% ภายในสิ้นไตรมาสที่ 3 ปี 2024
  • นอกจากนี้ ตั้งแต่ไตรมาสที่ 3 ปี 2024 เป็นต้นไป เราตั้งใจที่จะเริ่มระยะทั่วไปซึ่งการยกเลิกการโหลดจะค่อยๆ หยุดทํางานในเว็บไซต์ต่างๆ โดยเริ่มจากผู้ใช้ 1% และสิ้นสุดที่ผู้ใช้ 100% ภายในสิ้นไตรมาสที่ 1 ปี 2025

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

ไทม์ไลน์ของการเลิกใช้งานการยกเลิกการโหลด

ข้อมูลเบื้องต้น

unload ได้รับการออกแบบให้ทํางานเมื่อระบบยกเลิกการโหลดเอกสาร ในทางทฤษฎีแล้ว สามารถใช้เพื่อเรียกใช้โค้ดได้ทุกเมื่อที่ผู้ใช้ออกจากหน้าเว็บ หรือใช้เป็นคอลแบ็กการสิ้นสุดเซสชัน

สถานการณ์ที่ใช้เหตุการณ์นี้มากที่สุด ได้แก่

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

อย่างไรก็ตาม เหตุการณ์ unload ไม่น่าเชื่อถืออย่างยิ่ง

ใน Chrome และ Firefox บนเดสก์ท็อป unload ค่อนข้างน่าเชื่อถือ แต่ส่งผลเสียต่อประสิทธิภาพของเว็บไซต์ด้วยการป้องกันการใช้ bfcache (แคชย้อนกลับ/ไปข้างหน้า)

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

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

เหตุผลที่เลิกใช้งานเหตุการณ์ unload

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

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

การนําเหตุการณ์ unload ออกเนื่องจากล้าสมัยเป็นการแสดงให้เห็นว่าเราในฐานะนักพัฒนาเว็บต้องตรวจสอบว่ากระบวนทัศน์ของเราสอดคล้องกับโลกแห่งความเป็นจริง และไม่ใช้แนวคิดที่ล้าสมัยซึ่งไม่ถูกต้องอีกต่อไป (หากเคยถูกต้อง)

ทางเลือกสำหรับเหตุการณ์ unload

เราขอแนะนำให้ใช้ unload แทน

  • visibilitychange: เพื่อระบุเวลาที่ระดับการเข้าถึงของหน้าเว็บมีการเปลี่ยนแปลง เหตุการณ์นี้เกิดขึ้นเมื่อผู้ใช้เปลี่ยนแท็บ ย่อหน้าต่างเบราว์เซอร์ หรือเปิดหน้าใหม่ พิจารณาสถานะ hidden เป็นเวลาที่เชื่อถือได้ล่าสุดในการบันทึกข้อมูลแอปและผู้ใช้
  • pagehide: เพื่อระบุเวลาที่ผู้ใช้ออกจากหน้า เหตุการณ์นี้เกิดขึ้นเมื่อผู้ใช้ออกจากหน้าเว็บ โหลดหน้าเว็บซ้ำ หรือปิดหน้าต่างเบราว์เซอร์ เหตุการณ์ pagehide จะไม่ทริกเกอร์เมื่อมีการย่อหน้าเว็บหรือเปลี่ยนไปใช้แท็บอื่น โปรดทราบว่า pagehide ไม่ได้ทําให้หน้าเว็บไม่มีสิทธิ์ใช้แคชย้อนหลัง/ไปข้างหน้า จึงเป็นไปได้ที่หน้าเว็บจะกู้คืนได้หลังจากเหตุการณ์นี้เริ่มทํางาน หากคุณกําลังล้างข้อมูลทรัพยากรในเหตุการณ์นี้ คุณอาจต้องกู้คืนทรัพยากรเหล่านั้นในการกู้คืนหน้าเว็บ

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

ดูรายละเอียดเพิ่มเติมได้ที่คําแนะนํานี้เกี่ยวกับการไม่ใช้ตัวแฮนเดิล unload

ตรวจหาการใช้งาน unload

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

เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome มีการตรวจสอบ back-forward-cache เพื่อช่วยคุณระบุปัญหาที่อาจทำให้หน้าเว็บไม่มีสิทธิ์ใช้แคชย้อนหลัง/ไปข้างหน้า รวมถึงการใช้งานตัวแฮนเดิล unload

หากต้องการทดสอบแคชย้อนกลับ/ไปข้างหน้า ให้ทำตามขั้นตอนต่อไปนี้

  1. ในหน้าเว็บ ให้เปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ จากนั้นไปที่แอปพลิเคชัน > บริการที่ทำงานอยู่เบื้องหลัง > แคชย้อนกลับ/ไปข้างหน้า

  2. คลิกทดสอบแคชย้อนกลับ/ไปข้างหน้า Chrome จะนําคุณไปยัง chrome://terms/ และกลับไปยังหน้าเว็บโดยอัตโนมัติ หรือจะคลิกปุ่มย้อนกลับและไปข้างหน้าของเบราว์เซอร์ก็ได้

หากหน้าเว็บไม่มีสิทธิ์ใช้แคชหน้าย้อนกลับ/หน้าไปข้างหน้า แท็บแคชหน้าย้อนกลับ/หน้าไปข้างหน้าจะแสดงรายการปัญหา ในส่วนดำเนินการได้ คุณจะเห็นว่าคุณกำลังใช้ unload หรือไม่

เครื่องมือทดสอบแคชย้อนกลับ/ไปข้างหน้าของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome แสดงว่ามีการใช้ตัวแฮนเดิลการยกเลิกการโหลด

Reporting API

คุณสามารถใช้ Reporting API ร่วมกับนโยบายสิทธิ์แบบอ่านอย่างเดียวเพื่อตรวจหาการใช้ unload จากผู้ใช้เว็บไซต์ได้

ดูรายละเอียดเพิ่มเติมได้ที่การใช้ Reporting API เพื่อค้นหาการยกเลิกการโหลด

Bfcache notRestoredReasons API

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

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

ควบคุมการเข้าถึง unload

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

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

  • นโยบายสิทธิ์: นี่คือ API ของแพลตฟอร์มสําหรับเจ้าของเว็บไซต์ในการควบคุมการเข้าถึงฟีเจอร์ที่ระดับเว็บไซต์หรือระดับหน้าเว็บแต่ละหน้าผ่านการใช้ส่วนหัว HTTP
  • นโยบายสำหรับองค์กร: เครื่องมือสำหรับผู้ดูแลระบบไอทีในการกำหนดค่า Chrome ให้กับองค์กรหรือธุรกิจ โดยสามารถกำหนดค่าผ่านแผงการดูแลระบบ เช่น คอนโซลผู้ดูแลระบบของ Google
  • Flag ของ Chrome: ฟีเจอร์นี้ช่วยให้นักพัฒนาซอฟต์แวร์แต่ละรายเปลี่ยนการตั้งค่าการเลิกใช้งาน unload เพื่อทดสอบผลกระทบในเว็บไซต์ต่างๆ ได้

นโยบายสิทธิ์

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

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

นโยบายองค์กร

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

Flag ของ Chrome และสวิตช์บรรทัดคำสั่ง

นอกจากนโยบายขององค์กรแล้ว คุณยังปิดใช้การเลิกใช้งานสำหรับผู้ใช้แต่ละรายผ่าน Flag ของ Chrome และคำสั่งบรรทัดได้ด้วย โดยทำดังนี้

การตั้งค่า chrome://flags/#deprecate-unload นี้เป็น enabled จะเป็นการเลื่อนการเลิกใช้งานเริ่มต้นไปข้างหน้าและป้องกันไม่ให้ตัวแฮนเดิล unload ทำงาน ผู้ใช้ยังคงลบล้างนโยบายเหล่านี้ได้ทีละเว็บไซต์ผ่านนโยบายสิทธิ์ แต่จะยังคงทํางานต่อไปโดยค่าเริ่มต้น

นอกจากนี้ คุณยังควบคุมการตั้งค่าเหล่านี้ได้ด้วยสวิตช์บรรทัดคำสั่ง

การเปรียบเทียบตัวเลือก

ตารางต่อไปนี้สรุปการใช้ตัวเลือกต่างๆ ที่กล่าวถึงก่อนหน้านี้

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

บทสรุป

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

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

ขอขอบคุณ

ขอขอบคุณ Kenji Baheux, Fergal Daly, Adriana Jara และ Jeremy Wagner ที่ช่วยตรวจสอบบทความนี้

รูปภาพหลักโดย Anja Bauermann ใน Unsplash