วิธีส่งคำขอ HTTP ได้อย่างเชื่อถือได้เมื่อผู้ใช้กำลังออกจากหน้าเว็บ

• บางครั้งมีกรณีที่ต้องการทิ้งล็อกไว้ตอนผู้ใช้ย้ายไปหน้าอื่นหรือส่งฟอร์ม
• การใส่ fetch ไว้ในอีเวนต์คลิกไม่ได้รับประกันว่าจะถูกส่งออกไปแน่นอน
• จึงอาจลองทำเป็น Fetch ก่อนแล้วค่อยย้ายหน้าด้วย window.location แต่แบบนี้ก็ยังไม่รับประกันเหมือนกัน
  • เพราะ XHR เป็นแบบอะซิงก์และไม่บล็อก
• จะใช้ await กับ Promise ของ fetch ก็ได้ แต่ก็มีข้อเสีย
  • ความเร็วในการประมวลผลช้าลง ทำให้ประสบการณ์ผู้ใช้ไม่ดี
  • ไม่ได้เสถียรอย่างที่คิด เช่น กรณีปิดแท็บเบราว์เซอร์นั้นจัดการไม่ได้
• มีหลายตัวเลือกที่ให้เบราว์เซอร์ช่วยคงคำขอ HTTP ไว้
  • ถ้าใช้ keepalive flag กับ Fetch คำขอนั้นจะยังคงอยู่แม้หน้าจะถูกยกเลิกไปแล้ว
  • มีฟังก์ชันที่ง่ายกว่านี้อย่าง Navigator.sendBeacon()
  • เบราว์เซอร์ยังรองรับ แอตทริบิวต์ ping ของแท็ก a ด้วย (ข้อเสียคือใช้ได้กับลิงก์เท่านั้น และ FF ยังไม่รองรับเป็นค่าเริ่มต้น)
• แล้วควรใช้อะไรดี?
  • ถ้าเป็นไปได้ให้ใช้ fetch() + keepalive
    • 80% ของเบราว์เซอร์ รองรับ
    • ส่ง custom header ได้
    • ใช้กับคำขอ GET ได้ด้วย
    • รองรับเบราว์เซอร์รุ่นเก่า
  • กรณีที่ sendBeacon() เหมาะกว่า คือ
    • 96% ของเบราว์เซอร์ รองรับ
    • เมื่อต้องการการปรับแต่งไม่มาก
    • เมื่อต้องการ API ที่สะอาดและเรียบง่าย
    • เมื่อไม่อยากให้ไปแย่งลำดับความสำคัญกับคำขออื่นของเบราว์เซอร์