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

Demián Renzulli

Barry Pollard

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

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

ข้อมูลอัปเดต: ไทม์ไลน์นี้อัปเดตแล้วเมื่อวันที่ 13 พฤศจิกายน 2023

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

• การทดสอบเวอร์ชันที่ใช้งานจริงผ่าน Permission-Policy API สําหรับการยกเลิกการโหลดใน Chrome 115 (กรกฎาคม 2023)
• การทดสอบในเครื่องโดยการเปิดใช้ธงใน Chrome 117 (กันยายน 2023)

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

• ระยะที่มีขอบเขตซึ่งการยกเลิกการโหลดจะค่อยๆ หยุดทํางานสําหรับเว็บไซต์ยอดนิยม 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 หรือไม่

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 และสวิตช์บรรทัดคำสั่ง

คุณปิดใช้การเลิกใช้งานสำหรับผู้ใช้แต่ละรายผ่านแฟล็ก 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