在 Chrome 39 中发送信标数据

Ewa Gasperowicz

有时,从网页向网络服务器发送一些数据非常方便,而无需等待回复。例如,我们可能需要在用户退出网页之前提交分析或诊断数据。

通常情况下,在退出之前发送数据涉及监听 unload 事件,因为提前发送请求会导致数据不完整,例如,我们可能会错过在退出前发生的点击。需要注意的是,在卸载处理程序中发送的请求必须是同步的,因为大多数浏览器通常会忽略在卸载处理程序中发出的异步 XMLHttpRequest。这种方法会减慢导航速度,因为用户需要等待请求返回,然后才能呈现新页面。

Beacon API 可解决此问题,它允许您将带有少量数据载荷的 HTTP 请求从浏览器异步发送到网络服务器,而不会延迟页面的 unload 事件中的其他代码,也不会影响下一页导航的性能。

navigator.sendBeacon() 方法会尽快将要由浏览器传输的数据加入队列,但不会减慢导航速度。如果浏览器能够成功将数据加入队列以进行传输,该方法会返回 true。否则,它会返回 false

假设我们有一个服务器端点,可用于从位于此地址的网页接收信标数据:

https://putsreq.herokuapp.com/Dt7t2QzUkG18aDTMMcop

如果我们在 pagehide 事件处理脚本中添加 sendBeacon() 方法,端点将会在用户离开页面时收到数据:

在勾选 Preserve logs(保留日志)复选框的情况下检查 Chrome 开发者工具中的“Network”(网络)标签页,那么当你离开该页面时,会看到系统向上述端点发送 HTTP POST 请求。

或者,您可以访问 PutsReq 检查页面,查看是否已收到信标数据。

此外,您还可以通过 <beacon-send> 这个 Polymer 自定义元素发送信标数据。如需了解详情,请访问 ebidel.github.io/beacon-send