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

Joe Medley

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

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

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

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

Chrome ต้องการให้เวลาแก่นักพัฒนาซอฟต์แวร์ในการเลิกใช้ XMLHttpRequest() จึงได้เสนอตัวเลือกการเลือกไม่ใช้ชั่วคราว

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

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

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

ดึงข้อมูล Keepalive

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

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

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

SendBeacon()

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

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

บทสรุป

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