การลดการนําทางที่ล่าช้า
เป็นเรื่องปกติที่หน้าเว็บหรือแอปจะมีข้อมูลวิเคราะห์หรือข้อมูลอื่นๆ ที่ยังไม่ได้ส่งเมื่อผู้ใช้ปิดหน้าเว็บหรือแอป เว็บไซต์บางแห่งใช้การเรียกแบบซิงค์กับ 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