如何将埋点信息在页面关闭之前发送出去？

公司自己搭建的数据监控后台系统，旨在统计一些前端应用的用户行为。为了不添加过多的请求压力，前端会定时将用户行为数据发送，这样会遇到一个问题，当行为数据栈里面有数据，没有在规定周期发出的时候关闭页面，会导致部分数据不能成功发出。遂想到添加如下代码：

window.onbeforeunload = () => {
  // 请求后端数据,参数省略
  Api.send({...})
}

查阅资料又接触到了beforeunload、unload、pagehide 和 visibilitychange这些事件，具体区别可以学习以下阮一峰大神的博客Page Visibility API 教程。文中着重说明了，移动端与PC端由于运行机制的差异导致页面进程杀死与否，不能做到两端统一。为了解决这个问题，诞生了 Page Visibility API。不管手机或桌面电脑，所有情况下，这个 API 都会监听到页面的可见性发生变化。

document.addEventListener('visibilitychange', () => {
  // 用户离开了当前页面
  if (document.visibilityState === 'hidden') {
    Api.send({...})
  }
  // 用户打开或回到页面
  if (document.visibilityState === 'visible') {
    // ...
  }
});

如何监听页面卸载在文中也给出了方法，不过多介绍。总结一下就是监听页面卸载，只需要监听visibilitychange事件，因为在页面可见时，用户关闭 Tab 页或浏览器窗口、页面可见时，用户在当前窗口前往另一个页面、页面不可见时，用户或系统关闭浏览器窗口这三种页面卸载情况下都会触发visibilitychange事件。

---

回到正题，显然上述第一种方法在某些情况下是不会请求接口发送数据的。测试过程中发现，仅页面刷新时会请求（偶尔不会请求），当页面关闭时，浏览器直接报错：

Chrome now disallows synchronous XHR during page dismissal when the page is being navigated away from or closed by the user. This involves the following events (when fired on the path of page dismissal): beforeunload, unload, pagehide, and visibilitychange.

也就是说在页面导航离开或者被用户关闭时，不允许发送同步 XHR 请求。

解决方案：

1. 换用监听visibilitychange事件，上文已经提到。
2. （推荐）navigator.sendBeacon()方法。

navigator.sendBeacon()方法主要用于满足统计和诊断代码的需要，这些代码通常尝试在卸载（unload）文档之前向web服务器发送数据。MDN对于navigator.sendBeacon()的描述

// 代码样例
window.addEventListener('unload', logData, false);
function logData() {
    navigator.sendBeacon("/log", analyticsData); // 参数：url , data
}

行文至此，大致上算是解决了这个需求，后期有问题再来补充。