Gauss Zhou

# Beacon

为了把尽量多的页面信息传到服务器，很多分析工具需要在页面生命周期中尽量晚的时候向服务器发送遥测或分析数据。

如果使用unload事件，分析工具可以使用同步 XMLHttpRequest 强制发送请求，但这样做会导致用户体验问题。浏览器会因为要等待 unload 事件处理程序完成而延迟导航到下一个页面。

为解决这个问题， W3C 引入了补充性的 Beacon API。这个 API 给 navigator 对象增加了一个 sendBeacon() 方法。

// 发送 POST 请求
// URL: 'https://example.com/analytics-reporting-url'
// 请求负载： '{foo: "bar"}'
navigator.sendBeacon('https://example.com/analytics-reporting-url', '{foo: "bar"}');

这个方法虽然看起来只不过是 POST 请求的一个语法糖，但它有几个重要的特性。

  • sendBeacon()并不是只能在页面生命周期末尾使用，而是任何时候都可以使用。
  • 调用 sendBeacon()后，浏览器会把请求添加到一个内部的请求队列。浏览器会主动地发送队 列中的请求。
  • 浏览器保证在原始页面已经关闭的情况下也会发送请求。
  • 状态码、超时和其他网络原因造成的失败完全是不透明的，不能通过编程方式处理。
  • 信标（ beacon）请求会携带调用 sendBeacon()时所有相关的 cookie。