在 Chrome 39 中傳送信標資料

Ewa Gasperowicz

有時候,將網頁的資料傳送至網路伺服器會很方便,無需等待回覆。例如,我們可能想在使用者離開網頁前提交分析或診斷資料。

通常,在結束離開前傳送資料就必須監聽 unload 事件,因為如果提早傳送要求,會導致資料不完整,例如我們可能遺漏在離開前發生的點擊。需注意的是,在卸載處理常式中傳送的要求必須同步,因為大部分瀏覽器通常會忽略在卸載處理常式中產生的非同步 XMLHttpRequest。這個方法會減慢瀏覽速度,因為使用者需要等要求返回之後,才能轉譯新網頁。

Beacon API 能解決這項問題,方法是讓您以非同步方式將包含小型資料酬載的 HTTP 要求從瀏覽器傳送至網路伺服器,而無須延遲網頁卸載事件中的其他程式碼,或是影響下一個網頁導覽的效能。

navigator.sendBeacon() 方法會將資料排入佇列,供瀏覽器盡快傳輸的資料,但不會降低瀏覽速度。如果瀏覽器能夠成功將資料排入要轉移的佇列,則會傳回 true。如果沒有,則會傳回 false

假設我們有一個伺服器端點,可透過此位址從我們的網頁接收信標資料:

https://putsreq.herokuapp.com/Dt7t2QzUkG18aDTMMcop

如果在 pagehide 事件處理常式中新增 sendBeacon() 方法,當使用者離開頁面時,端點就會接收資料:

如果在 Chrome 開發人員工具檢查網路分頁且勾選「保留記錄」核取方塊,您會在離開頁面時看到傳送至上述端點的 HTTP POST 要求。

或者,您也可以前往 PutsReq 檢查頁面,查看是否已收到信標資料。

此外,您還可以透過 Polymer 自訂元素,傳送信標資料:<beacon-send>。歡迎前往 ebidel.github.io/beacon-send查看。