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