Navigator.sendBeacon()

Bản dịch này chưa hoàn thành. Xin hãy giúp dịch bài viết này từ tiếng Anh

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, ArrayBufferView, Blob, DOMString, FormData, hoặc URLSearchParams.

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 bất đồng bộ được chạy trong sự kiện unload.

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.
  • Tạo 1 thẻ <img> 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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
sendBeaconChrome Full support 39
Notes
Full support 39
Notes
Notes Starting in Chrome 59, this method cannot send a Blob whose type is not CORS safelisted. This is a temporary change until a mitigation can be found for the security issues that this creates. For more information see Chrome bug 720283.
Edge Full support 14Firefox Full support 31IE No support NoOpera Full support 26
Notes
Full support 26
Notes
Notes Starting in Opera 46, this method cannot send a Blob whose type is not CORS safelisted. This is a temporary change until a mitigation can be found for the security issues that this creates. For more information see Chrome bug 720283.
Safari Full support 11.1WebView Android Full support 40
Notes
Full support 40
Notes
Notes Starting in Chrome 59, this method cannot send a Blob whose type is not CORS safelisted. This is a temporary change until a mitigation can be found for the security issues that this creates. For more information see Chrome bug 720283.
Chrome Android Full support 42
Notes
Full support 42
Notes
Notes Starting in Chrome 59, this method cannot send a Blob whose type is not CORS safelisted. This is a temporary change until a mitigation can be found for the security issues that this creates. For more information see Chrome bug 720283.
Firefox Android Full support 31Opera Android Full support 26
Notes
Full support 26
Notes
Notes Starting in Opera 46, this method cannot send a Blob whose type is not CORS safelisted. This is a temporary change until a mitigation can be found for the security issues that this creates. For more information see Chrome bug 720283.
Safari iOS Full support 11.3Samsung Internet Android Full support 4.0
Notes
Full support 4.0
Notes
Notes Starting in Samsung Internet 7.0, this method cannot send a Blob whose type is not CORS safelisted. This is a temporary change until a mitigation can be found for the security issues that this creates. For more information see Chrome bug 720283.

Legend

Full support  
Full support
No support  
No support
See implementation notes.
See implementation notes.

Xem thêm