使用 navigator.sendBeacon 上报数据

如某些统计系统，在页面unload时，如果要上报当前数据，采用xhr的同步上报方式，会阻塞当前页面的跳转；使用new Image有可能遇到aborted，导致无法成功发送。

 

现在好了，可以使用浏览器来提供发送保障的更简洁的sendBeacon方法。sendBeacon是异步的，不会影响当前页到下一个页面的跳转速度，且不受同域限制。

 

window.addEventListener('unload', logData, false);

 

function logData() {

navigator.sendBeacon("/log", analyticsData);

}

 

sendBeacon 如果成功进入浏览器的发送队列后，会返回true；如果受到队列总数、数据大小的限制后，会返回false。返回ture后，只是表示进入了发送队列，浏览器会尽力保证发送成功，但是否成功了，不会再有任何返回值。目前暂无具体的数据长度限制标准。

 

考虑到对目前浏览器的支持情况，需要做一下降级支持(如同步模式下的xhr，如果不是同域则要支持CORS)：

 

navigator.sendBeacon || new Function('var xhr=new XMLHttpRequest();xhr.open("POST",arguments[0],true);r.send(arguments[1]);');

 

当前浏览器对sendBeacon的支持情况(最新进展见：http://caniuse.com/#search=sendBeacon)：

 

Chrome 37+

Firefox (Gecko) 31+

Internet Explorer 不支持

Opera 24+

Safari 不支持

手机端常用浏览器不支持：Android浏览器支持了，但是iOS尚无支持

Google Analytics已经使用了navigator.sendBeacon()来上报数据：http://www.thyngster.com/google-analytics-added-sendbeacon-functionality-universal-analytics-javascript-api/

 

via:

W3标准描述：https://dvcs.w3.org/hg/webperf/raw-file/tip/specs/Beacon/Overview.html

MDN介绍：https://developer.mozilla.org/en-US/docs/Web/API/navigator.sendBeacon

 

example:

function SendBeacon(src)

     if (typeof(navigator.sendBeacon) == "function") {

          var b = new Blob([], {type: 'application/x-www-form-urlencoded'});

          return navigator.sendBeacon(src, b);

     }

     return false;

 

}