navigator.sendBeacon

发送网络请求的方式

1. AJAX（xml 是代表）
2. fetch
3. sse
4. websocket
5. jsonp
6. image 的 src
7. navigator.sendBeacon

使用 navigator.sendBeacon 实现高效的数据上报

在 web 开发中，我们经常需要将用户行为或性能数据上报到服务器。为了不影响用户体验，开发者通常会在页面卸载时进行数据上报。然而，传统的数据上报方式，如 XMLHttpRequest 或 Fetch API，容易受到页面卸载过程中的阻塞，导致数据丢失。为了解决这个问题，navigator.sendBeacon API 被引入，它可以在页面卸载时安全、可靠地发送数据。

navigator.sendBeacon 基于 ping 请求 是 html5 新增的 并且是 sendBeacon 特有的 ping 请求 只能携带少量数据，并且不需要等待服务端响应，因此非常适合做埋点统计，以及日志统计相关功能。

对比 ajax fetch 的优点

1. fetch 和 ajax 受页面卸载过程的影响，而 sendBeacon 不受
2. 异步执行，不阻塞页面关闭或跳转
3. 原生支持发送跨域请求

对比 ajax fetch 的缺点

1. fetch 和 ajax 都可以发送任意请求 而 sendBeacon 只能发送 POST。

2. fetch 和 ajax 可以传输任意字节数据 而 sendBeacon 只能传送少量数据（64KB 以内），因为 ping 请求只能发送少量数据

3. fetch 和 ajax 可以定义任意请求头 而 sendBeacon 无法自定义请求头，难以携带 token 等信息

4. sendBeacon 只能传输 ArrayBuffer、ArrayBufferView、Blob、DOMString、FormData 或 URLSearchParams 类型的数据，不能直接传 JSON 数据

5. 如果处于危险的网络环境比如公共网络，或者开启了广告屏蔽插件 此请求将无效

应用场景

1. 发送心跳包：可以使用 navigator.sendBeacon 发送心跳包，以保持与服务器的长连接，避免因为长时间没有网络请求而导致连接被关闭。
2. 数据埋点：可以使用 navigator.sendBeacon 在页面关闭或卸载时记录用户在线时间，pv uv，以及错误日志上报 按钮点击次数。
3. 发送用户反馈：可以使用 navigator.sendBeacon 发送用户反馈信息，如用户意见、bug 报告等，以便进行产品优化和改进

客户端

const sendBeaconBtn = document.createElement('button');
sendBeaconBtn.innerHTML = 'send beacon';
document.body.appendChild(sendBeaconBtn);
sendBeaconBtn.addEventListener('click', () => {
  // navigator.sendBeacon('/api/sendBeacon/sendBeacon');

  // 传递json格式参数
  // 只接受formdata blob arrayBuffer等数据格式，不支持json
  // 所以需要手动转换一下数据格式
  const json = JSON.stringify({ name: 'mmy', age: 23 });
  const blob = new Blob([json], { type: 'application/json' });
  navigator.sendBeacon('/api/sendBeacon/sendBeacon', blob);
});

服务端

import express from 'express';
const router = express.Router();
// sendbeacon只能接受post
router.post('/sendBeacon', (req, res) => {
  console.log(req.body);
  // sendBeacon基于ping，有数据大小限制，返回数据应该保持轻量级
  res.send('ok');
});
export default router;