navigator.sendBeacon初步学习

使用navigator.sendBeacon进行数据上报

有时业务需要需要采集用户的行为数据进行上报，此时使用navigator.sendBeacon是一个不错的选择

navigator.sendBeacon的优点

1. 不受页面卸载过程的影响，确保数据可靠发送
2. 异步执行，不阻塞页面关闭或跳转
3. 能够发送跨域请求。

navigator.sendBeacon的缺点

1 fetch 和 ajax 都可以发送任意请求 而 sendBeacon 只能发送POST fetch 和 ajax 可 以传输任意字节数据
2而 sendBeacon 只能传送少量数据（64KB 以内） fetch 和 ajax 可以定义任意请求头 而 sendBeacon无法自定义请求头
3sendBeacon 只能传输ArrayBuffer、ArrayBufferView、Blob、DOMString、FormData 或URLSearchParams 类型的数据
4 如果处于危险的网络环境，或者开启了广告屏蔽插件 此请求将无效

navigator.sendBeacon的应用场景

在这里我就只记录一下埋点相关的使用场景
埋点：可以使用 navigator.sendBeacon 在页面关闭或卸载时记录用户在线时间，pv uv，以及错误日志上报 按钮点击次数
发送用户反馈：可以使用 navigator.sendBeacon 发送用户反馈信息，如用户意见、bug 报告等，以便进行产品优化和改进