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; } }