Navigator.sendBeacon()

用户卸载网页的时候，有时需要向服务器发一些数据。很自然的做法是在unload事件或beforeunload事件的监听函数里面，使用XMLHttpRequest对象发送数据。但是，这样做不是很可靠，因为XMLHttpRequest对象是异步发送，很可能在它即将发送的时候，页面已经卸载了，从而导致发送取消或者发送失败。

解决方法就是unload事件里面，加一些很耗时的同步操作。这样就能留出足够的时间，保证异步 AJAX 能够发送成功。

  1. function log() {
  2.   let xhr = new XMLHttpRequest();
  3.   xhr.open('post', '/log', true);
  4.   xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  5.   xhr.send('foo=bar');
  6. }
  8. window.addEventListener('unload', function(event) {
  9.   log();
  11.   // a time-consuming operation
  12.   for (let i = 1; i < 10000; i++) {
  13.     for (let m = 1; m < 10000; m++) { continue; }
  14.   }
  15. });

上面代码中，强制执行了一次双重循环，拖长了unload事件的执行时间，导致异步 AJAX 能够发送成功。

类似的还可以使用setTimeout。下面是追踪用户点击的例子。

  1. // HTML 代码如下
  2. // <a id="target" href="https://baidu.com">click</a>
  3. const clickTime = 350;
  4. const theLink = document.getElementById('target');
  6. function log() {
  7.   let xhr = new XMLHttpRequest();
  8.   xhr.open('post', '/log', true);
  9.   xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  10.   xhr.send('foo=bar');
  11. }
  13. theLink.addEventListener('click', function (event) {
  14.   event.preventDefault();
  15.   log();
  17.   setTimeout(function () {
  18.     window.location.href = theLink.getAttribute('href');
  19.   }, clickTime);
  20. });

上面代码使用setTimeout，拖延了350毫秒，才让页面跳转，因此使得异步 AJAX 有时间发出。

这些做法的共同问题是，卸载的时间被硬生生拖长了，后面页面的加载被推迟了，用户体验不好。

为了解决这个问题，浏览器引入了Navigator.sendBeacon()方法。这个方法还是异步发出请求，但是请求与当前页面线程脱钩，作为浏览器进程的任务，因此可以保证会把数据发出去，不拖延卸载流程。

  1. window.addEventListener('unload', logData, false);
  3. function logData() {
  4.   navigator.sendBeacon('/log', analyticsData);
  5. }

Navigator.sendBeacon方法接受两个参数，第一个参数是目标服务器的 URL，第二个参数是所要发送的数据（可选），可以是任意类型（字符串、表单对象、二进制对象等等）。

  1. navigator.sendBeacon(url, data)

这个方法的返回值是一个布尔值，成功发送数据为true，否则为false。

该方法发送数据的 HTTP 方法是 POST，可以跨域，类似于表单提交数据。它不能指定回调函数。

下面是一个例子。

  1. // HTML 代码如下
  2. // <body onload="analytics('start')" onunload="analytics('end')">
  4. function analytics(state) {
  5.   if (!navigator.sendBeacon) return;
  7.   var URL = 'http://example.com/analytics';
  8.   var data = 'state=' + state + '&location=' + window.location;
  9.   navigator.sendBeacon(URL, data);
  10. }