Navigator.sendBeacon()

Phương thức navigator.sendBeacon() gửi bất đồng bộ 1 lượng nhỏ dữ liệu đến máy chủ (web server) thông qua giao thức HTTP .

Cú pháp

navigator.sendBeacon(url, data);

Tham Số

url
Đường dẫn để nhận dữ liệu (Tạo request). Có thể là đường dẫn tuyệt đối hoặc tương đối.
data
Một đối tượng chứa dữ liệu để gửi đi có thể là 1 ArrayBuffer (en-US), ArrayBufferView (en-US), Blob (en-US), DOMString (en-US), FormData (en-US), hoặc URLSearchParams (en-US).

Giá trị trả về

Phương thức sendBeacon() trả về true nếu như user agent (tác nhân người dùng hay web browser) xếp dữ liệu (data) để gửi đi thành công. Nếu không, sẽ trả về false.

Mô tả

Phương thức này dùng cho phân tích và chuẩn đoán cần gửi dữ liệu về máy chủ trước thời điểm đóng trang, nếu như gửi sớm hơn, có thể sẽ bị thiếu thông tin cần thu thập. Ví dụ, đường dẫn nào người dùng nhấn vào trước khi chuyển đến trang khác và đóng trang.

Việc đảm bảo rằng dữ liệu được gửi đi trong khi đóng trang (unload) trước đây thường rất khó để thực hiện, bởi user agents (web browser) luôn bỏ qua những XMLHttpRequest (en-US) bất đồng bộ được chạy trong sự kiện unload (en-US).

Trước đây, người ta thường làm trễ thời gian tải lại trang đủ lâu để gửi được dữ liệu đi bằng 1 số cách sau:

  • Gửi dữ liệu với 1 XMLHttpRequest đồng bộ, chặn các xử lý khác, được gọi trong sự kiện unload hoặc beforeunload (en-US).
  • Tạo 1 thẻ <img> (en-US) và đặt thuộc tính src trong khi xử lý unload. Hầu hết các user agents (trình duyệt) sẽ làm trễ việc tải lại trang cho đến khi tải xong ảnh.
  • Tạo vòng lặp không xử lý gì chạy trong vài giây khi unload.

Tất cả những phương thức đó đều chặn quá trình tải lại trang, làm chậm việc chuyển đến trang tiếp theo. Trang tiếp theo không thể làm gì để ngăn chặn việc này, vì vậy trang mới sẽ có vẻ chậm đi, mặc dù đó là lỗi từ trang trước.

Ví dụ sau đây là 1 đoạn code mẫu để gửi dữ liệu về server bằng 1 XMLHttpRequest đồng bộ trong khi xử lý unload. Điều này làm trễ việc tải trang tiếp theo.

window.addEventListener("unload", function logData() {
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "/log", false); // tham số thứ 3 là `false` để gửi request bất đồng bộ
  xhr.send(analyticsData);
});

Đây là những gì sendBeacon() thay thế. Với phương thức sendBeacon(), dữ liệu sẽ được gửi đi bất đồng bộ, User Agent (trình duyệt) có thể làm thế mà không tạo trễ khi tải lại trang hoặc chuyển đến trang tiếp theo. Điều này giải quyết tất cả vấn đề với việc gửi các dữ liệu phân tích:

  • Dữ liệu được gửi đi đáng tin cậy
  • Dữ liệu được gửi bất đồng bộ
  • Không ảnh hưởng đến việc tải trang tiếp theo
  • Hơn nữa, code đơn giản hơn so với tất cả các cách trước đây

Ví dụ sau đây là 1 đoạn code mẫu để gửi dữ liệu về server sử dụng phương thức sendBeacon().

window.addEventListener("unload", function logData() {
  navigator.sendBeacon("/log", analyticsData);
});

sendBeacon tạo 1 HTTP request với phương thức POST, kèm theo tất cả cookies liên quan khi được gọi.

Tài liệu chi tiết

Tài liệu Trạng thái Bình luận
Beacon
The definition of 'sendBeacon()' in that specification.
Candidate Recommendation Định nghĩa đầu tiên

Tương thích với trình duyệt

BCD tables only load in the browser

Xem thêm