在 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 查看。