Đôi khi, bạn nên gửi một số dữ liệu từ một trang web đến máy chủ web mà không cần phải đợi trả lời. Ví dụ: chúng ta nê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 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 sớm hơn sẽ dẫn đến việc 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ý huỷ tải cần phải có tính đồ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 đưa ra trong trình xử lý huỷ tải.
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 đợi yêu cầu quay lại thì mới có thể hiển thị một trang mới.
API beacon 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 dữ liệu nhỏ từ trình duyệt đến máy chủ web mà không làm chậm các mã khác trong sự kiện huỷ tải của trang hoặc ảnh hưởng đến hiệu suất của lần điều hướng trang tiếp theo.
Phương thức navigator.sendBeacon() sẽ xếp dữ liệu để trình duyệt truyền sớm nhất có thể, 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 dữ liệu để chuyển thành công. Nếu không, hàm này sẽ trả về false.
Giả sử chúng tôi có một điểm cuối máy chủ để nhận dữ liệu beacon từ trang của chúng tôi 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ụ của Chrome cho nhà phát triển với hộp đánh dấu duy trì nhật ký, bạn sẽ thấy yêu cầu POST qua HTTP đến đ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 trang kiểm tra PutsReq để xem liệu dữ liệu beacon đã được nhận hay chưa.
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 khám phá tại ebidel.github.io/beacon-send.