在 Chrome 39 中发送信标数据

Ewa Gasperowicz

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

通常,在退出之前发送数据需要监听 unload 事件,因为在任何更早的时间发送请求都会导致数据不完整,例如,我们可能会错过在退出前发生的点击。需要注意的是,在 unload 处理脚本中发送的请求需要是同步的,因为大多数浏览器通常会忽略在 unload 处理脚本中发出的异步 XMLHttpRequest。这种方法会降低导航速度,因为用户需要等待请求返回,然后才能呈现新页面。

Beacon API 可让您从浏览器异步向网络服务器发送包含小数据载荷的 HTTP 请求,而不会延迟页面卸载事件中的其他代码或影响下一次页面导航的性能,从而解决此问题。

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

假设我们有一个服务器端点,可用于接收来自以下网址的页面信标数据:

https://putsreq.herokuapp.com/Dt7t2QzUkG18aDTMMcop

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

如果您在 Chrome DevTools 中检查“Network”标签页,并选中保留日志复选框,则会在您离开该页面时看到向上述端点发送的 HTTP POST 请求。

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

还有一个 Polymer 自定义元素可让您发送信标数据 - <beacon-send>。您可以访问 ebidel.github.io/beacon-send 查看该示例。