Đôi khi, bạn có thể gửi một số dữ liệu từ trang web đến máy chủ web mà không cần chờ phản hồi. Ví dụ: chúng ta có thể muốn gửi dữ liệu phân tích hoặc chẩn đoán trước khi người dùng thoát khỏi một trang.
Thông thường, việc gửi dữ liệu trước khi thoát sẽ liên quan đến việc nghe sự kiện unload, vì việc gửi yêu cầu bất cứ lúc nào trước đó sẽ dẫn đến dữ liệu không đầy đủ – ví dụ: chúng ta có thể đã bỏ lỡ một lượt nhấp xảy ra ngay trước khi thoát.
Lưu ý là các yêu cầu được gửi trong trình xử lý giải phóng cần phải đồng bộ, vì hầu hết các trình duyệt thường bỏ qua các XMLHttpRequest không đồng bộ được thực hiện trong trình xử lý giải phóng.
Phương pháp này làm chậm quá trình điều hướng vì người dùng cần phải chờ yêu cầu quay lại trước khi có thể hiển thị trang mới.
Beacon API giải quyết vấn đề này bằng cách cho phép bạn gửi không đồng bộ các yêu cầu HTTP có tải trọng dữ liệu nhỏ từ trình duyệt đến máy chủ web mà không làm chậm mã khác trong sự kiện tải trang xuống hoặc ảnh hưởng đến hiệu suất của thao tác điều hướng trang tiếp theo.
Phương thức navigator.sendBeacon() đưa dữ liệu vào hàng đợi để trình duyệt truyền càng sớm càng tốt, nhưng không làm chậm quá trình điều hướng.
Phương thức này trả về true nếu trình duyệt có thể xếp thành công dữ liệu vào hàng đợi để chuyển. Nếu không, hàm này sẽ trả về false.
Giả sử chúng ta có một điểm cuối máy chủ để nhận dữ liệu beacon từ trang của chúng ta tại địa chỉ này:
https://putsreq.herokuapp.com/Dt7t2QzUkG18aDTMMcop
Nếu chúng ta thêm một phương thức sendBeacon() vào trình xử lý sự kiện pagehide, thì điểm cuối sẽ nhận được dữ liệu khi người dùng rời khỏi trang:
Nếu kiểm tra thẻ mạng trong Công cụ dành cho nhà phát triển Chrome và đánh dấu vào hộp đánh dấu preserve logs (duy trì nhật ký), bạn sẽ thấy một yêu cầu POST HTTP tới điểm cuối ở trên được gửi khi bạn rời khỏi trang.
Ngoài ra, bạn có thể truy cập vào trang kiểm tra PutsReq để xem liệu dữ liệu beacon có được nhận hay không.
Ngoài ra, còn có một phần tử tuỳ chỉnh Polymer cho phép bạn gửi dữ liệu beacon – <beacon-send>. Hãy xem tại ebidel.github.io/beacon-send.