Web API - Beacon

原文链接：https://github.com/taoliujun/blog/issues/53

Beacon

MDN: https://developer.mozilla.org/zh-CN/docs/Web/API/Beacon_API

Beacon用于发送请求到服务器，且不需要响应。浏览器会保证在页面卸载前，将请求运行完成。

方法

sendBeacon

通过POST发送少量数据到服务器。

navigator.sendBeacon(url, data);

示例

示例：https://taoliujun.github.io/example/web-api/Beacon_API/index.html

1. 创建一个页面，放一个按钮用于发送manual统计数据：

<button onclick="javascript:sendData('manual');">sendData</button>

2. 在页面隐藏、卸载的时候发送hidden统计数据：

document.addEventListener("visibilitychange", ()=> {
  if (document.visibilityState === "hidden") {
    sendData('hidden');
  }
});

3。 发送统计数据的函数：

let data = 0;

function sendData(source) {
  data += 1;
  // getUrl用于获取服务端地址
  navigator.sendBeacon(getUrl(), new URLSearchParams({ data, source }));
}

4. 创建服务端，打印request body数据以测试点击按钮、关闭页面的效果，发现关闭页面后也发送了数据。

body: [Object: null prototype] { data: '1', source: 'manual' }
body: [Object: null prototype] { data: '2', source: 'hidden' }