บางครั้งการส่งข้อมูลบางอย่างจากหน้าเว็บไปยังเว็บเซิร์ฟเวอร์โดยไม่ต้องรอการตอบกลับก็มีประโยชน์ เช่น เราอาจต้องการส่งข้อมูลวิเคราะห์หรือการวินิจฉัยก่อนที่ผู้ใช้จะออกจากหน้าเว็บ
โดยทั่วไป การส่งข้อมูลก่อนการออกเกี่ยวข้องกับการฟังเหตุการณ์ unload เนื่องจากการส่งคําขอก่อนเวลาดังกล่าวจะส่งผลให้ข้อมูลไม่สมบูรณ์ เช่น เราอาจพลาดการคลิกที่เกิดขึ้นก่อนการออก
ข้อควรระวังคือคําขอที่ส่งในตัวแฮนเดิลการยกเลิกการโหลดต้องเป็นแบบซิงค์ เนื่องจากโดยทั่วไปเบราว์เซอร์ส่วนใหญ่จะไม่สนใจ XMLHttpRequest แบบแอซิงค์ที่สร้างขึ้นในตัวแฮนเดิลการยกเลิกการโหลด
วิธีนี้ทําให้การไปยังส่วนต่างๆ ช้าลง เนื่องจากผู้ใช้ต้องรอให้คําขอกลับมาก่อนที่จะแสดงผลหน้าใหม่ได้
Beacon API ช่วยแก้ปัญหานี้ด้วยการให้คุณส่งคําขอ HTTP ที่มีข้อมูลเพย์โหลดขนาดเล็กจากเบราว์เซอร์ไปยังเว็บเซิร์ฟเวอร์แบบไม่พร้อมกันได้ โดยไม่ต้องรอให้โค้ดอื่นๆ ในเหตุการณ์การยกเลิกการโหลดของหน้าเว็บทำงาน หรือส่งผลต่อประสิทธิภาพในการไปยังหน้าถัดไป
เมธอด navigator.sendBeacon() จะจัดคิวข้อมูลเพื่อให้เบราว์เซอร์ส่งโดยเร็วที่สุด แต่ไม่ทำให้การไปยังส่วนต่างๆ ช้าลง
โดยจะแสดงผลเป็น true หากเบราว์เซอร์จัดคิวข้อมูลเพื่อโอนได้สําเร็จ ไม่เช่นนั้น ระบบจะแสดงผลเป็น false
สมมติว่าเรามีปลายทางเซิร์ฟเวอร์ที่พร้อมรับข้อมูลบีคอนจากหน้าเว็บของเราที่ที่อยู่นี้
https://putsreq.herokuapp.com/Dt7t2QzUkG18aDTMMcop
หากเราเพิ่มเมธอด sendBeacon() ในตัวแฮนเดิลเหตุการณ์ pagehide ปลายทางจะได้รับข้อมูลเมื่อผู้ใช้ออกจากหน้าเว็บ
หากคุณตรวจสอบแท็บเครือข่ายในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของ Chrome โดยเลือกช่องทําเครื่องหมายเก็บบันทึกไว้ คุณจะเห็นคําขอ HTTP POST ที่ส่งไปยังปลายทางข้างต้นเมื่อคุณออกจากหน้าเว็บ
หรือไปที่หน้าตรวจสอบ PutsReq เพื่อดูว่าระบบได้รับข้อมูลบีคอนหรือไม่
นอกจากนี้ยังมีองค์ประกอบที่กําหนดเองของ Polymer ที่ช่วยให้คุณส่งข้อมูลบีคอนได้ <beacon-send> โปรดดูที่ ebidel.github.io/beacon-send