การปรับปรุงการปิดหน้าเว็บใน XMLHttpRequest() พร้อมกัน

การลดการนําทางที่ล่าช้า

Joe Medley
Joe Medley

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

แนวทางปฏิบัตินี้ต้องเปลี่ยนแปลง และเบราว์เซอร์ก็ตอบสนองต่อการเปลี่ยนแปลงนี้ ข้อกําหนดของ XMLHttpRequest()กําลังอยู่ในกำหนดการเลิกใช้งานและนําออกแล้ว Chrome 80 จะเป็นก้าวแรกด้วยการไม่อนุญาตให้มีการเรียกแบบซิงค์ภายในตัวแฮนเดิลเหตุการณ์หลายรายการ โดยเฉพาะ beforeunload, unload, pagehide และ visibilitychange เมื่อมีการเรียกให้แสดง นอกจากนี้ WebKit ยังมีการคอมมิตที่ติดตั้งใช้งานการเปลี่ยนแปลงลักษณะการทำงานเดียวกันด้วย

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

การเลือกใช้ชั่วคราว

Chrome ไม่ได้ต้องการปิดใช้ XMLHttpRequest() เพียงอย่างเดียว ด้วยเหตุนี้จึงมีตัวเลือกในการเลือกไม่ใช้ชั่วคราวอยู่ 2-3 รายการ สําหรับเว็บไซต์บนอินเทอร์เน็ต ช่วงทดลองใช้ต้นทางจะพร้อมใช้งาน ซึ่งจะช่วยให้คุณเพิ่มโทเค็นเฉพาะแหล่งที่มาลงในส่วนหัวของหน้าเว็บเพื่อเปิดใช้การเรียกใช้ XMLHttpRequest() แบบซิงค์ได้ ตัวเลือกนี้จะสิ้นสุดลงก่อนการเปิดตัว Chrome 89 ในช่วงเดือนมีนาคม 2021 ลูกค้า Chrome Enterprise ยังใช้ Flag นโยบาย AllowSyncXHRInPageDismissal ได้ด้วย ซึ่งจะสิ้นสุดลงพร้อมกัน

ตัวเลือกอื่นๆ

ไม่ว่าคุณจะส่งข้อมูลกลับไปยังเซิร์ฟเวอร์ด้วยวิธีใดก็ตาม คุณควรหลีกเลี่ยงการรอจนกว่าหน้าเว็บจะยกเลิกการโหลดเพื่อส่งข้อมูลทั้งหมดในครั้งเดียว นอกจากจะทำให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ไม่ดีแล้ว การยกเลิกการโหลดยังไม่น่าเชื่อถือในเบราว์เซอร์สมัยใหม่และเสี่ยงต่อการสูญเสียข้อมูลหากเกิดข้อผิดพลาด กล่าวโดยละเอียดคือ เหตุการณ์ยกเลิกการโหลดมักไม่ทํางานในเบราว์เซอร์บนอุปกรณ์เคลื่อนที่เนื่องจากมีวิธีปิดแท็บหรือเบราว์เซอร์ในระบบปฏิบัติการบนอุปกรณ์เคลื่อนที่หลายวิธีโดยที่เหตุการณ์ unload จะไม่ทํางาน XMLHttpRequest() ให้คุณเลือกใช้เพย์โหลดขนาดเล็กได้ แต่ตอนนี้เป็นข้อกำหนด ทางเลือกทั้ง 2 รายการมีขีดจำกัดการอัปโหลด 64 KB ต่อบริบท ตามที่ข้อกำหนดระบุ

ดึงข้อมูล Keepalive

Fetch API มีวิธีการที่มีประสิทธิภาพในการจัดการกับการโต้ตอบกับเซิร์ฟเวอร์และอินเทอร์เฟซที่สอดคล้องกันสําหรับใช้ใน API แพลตฟอร์มต่างๆ ตัวเลือกหนึ่งคือ keepalive ซึ่งช่วยให้มั่นใจว่าคําขอจะดําเนินการต่อไม่ว่าหน้าเว็บที่ส่งคําขอจะยังคงเปิดอยู่หรือไม่ก็ตาม

window.addEventListener('unload', {
  fetch
('/siteAnalytics', {
    method
: 'POST',
    body
: getStatistics(),
    keepalive
: true
 
});
}

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

SendBeacon()

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

window.addEventListener('unload', {
  navigator
.sendBeacon('/siteAnalytics', getStatistics());
}

บทสรุป

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

รูปภาพโดย Matthew Hamilton ใน Unsplash