Beacon API All In One

Beacon API

navigator.sendBeacon

navigator.__proto__.sendBeacon;


if (navigator.sendBeacon) {
  // Beacon API
} else {
 // fallback sync XHR / Fetch API / Axios
}

https://developer.mozilla.org/en-US/docs/Web/API/Beacon_API

https://developer.mozilla.org/en-US/docs/Web/API/Beacon_API/Using_the_Beacon_API

https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon

navigator.sendBeacon(url, data);

window.addEventListener("unload", function logData() {
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "/log", false); // third parameter of `false` means synchronous
  xhr.send(analyticsData); 
});


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

window.onsubmit = function send_analytics() {
  var data = JSON.stringify({
    location: location.href,
    time: Date()
  });

  navigator.sendBeacon('/analytics', data);
};

window.onload = window.onunload = function analytics(event) {
  if (!navigator.sendBeacon) return;

  var url = "https://example.com/analytics";
  // Create the data to send
  var data = "state=" + event.type + "&location=" + location.href;

  // Send the beacon
  var status = navigator.sendBeacon(url, data);

  // Log the data and result
  console.log("sendBeacon: URL = ", url, "; data = ", data, "; status = ", status);
};

demo

https://developer.aliyun.com/article/752954

W3C

https://www.w3.org/TR/beacon/

Beacon

W3C Candidate Recommendation 13 April 2017

https://w3c.github.io/beacon/#sendbeacon-method

refs

---

---

©xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---