html5统计数据上报API:SendBeacon

公司为了精准的了解本身产品的用户使用状况，一般会对用户数据进行统计分析，获取pv、uv、页面留存率、访问设备等信息。与之相关的就是客户端的数据采集，而后上报的服务端。为了保证数据的准确性，就须要保证数据上报不会有差错。

常见方案缺陷

数据发回服务器的常见作法是，将收集好的用户数据，放在unload事件里面，用 AJAX 请求发回服务器。可是这种方法有个弊端，由于AJAX一般应用的场景是异步发送请求，在 unload 事件中，使用 XHR 异步发送数据。这种作法有可能致使服务端未收到数据，浏览器就已经断开链接，数据就会丢失。虽然AJAX支持同步请求，但这种作法会阻塞页面的跳转，影响用户体验。

解决方案

Beacon API 的出现就是为了解决这个问题的。使用 sendBeacon() 方法会使用户代理在有机会时异步地向服务器发送数据，同时不会延迟页面的卸载或影响下一导航的载入性能。这就解决了提交分析数据时的全部的问题：数据可靠，传输异步而且不会影响下一页面的加载。

使用方法

使用方式也很简单:navigator.sendBeacon(url, data)

• url参数代表 data 将要被发送到的网络地址。
• data 参数是将要发送的 ArrayBufferView 或 Blob, DOMString 或者 FormData 类型的数据
• return: 当用户代理成功把数据加入传输队列时，sendBeacon() 方法将会返回 true，不然返回 false。
  例如：

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

兼容性

beacon api 的兼容性以下：

在不支持的浏览器中，可使用如下 fallback 代码解决浏览器不支持 Beancon API 的问题（仅实现了 GET 方法）。

function sendBeacon (url) { if (typeof navigator !== 'undefined' && navigator.sendBeacon) { return navigator.sendBeacon(url); } try { var req = new window.XMLHttpRequest(); req.open('GET', url, false); req.send(); } catch (e) { // Fix IE9 cross-site error var img = new window.Image(); img.src = url; } }