BOM – Navigator SendBeacon

介绍

游览器专门做给 tracking 用的接口. 从前我们想 tracking 用户点击 anchor 是比较麻烦的.

因为 click 事件触发后, 想发 ajxax 去做 tracking record 但在 ajax 还没有返回时, 游览器已经跳转了.

解决方案是 preventDefault 等 ajax 返回后才执行跳转, 但这样体验就很差了丫. 所以就有了 SendBeacon.

游览器会背地里执行它, 确保不影响用户体验又成功发送 request.

参考

MDN – Navigator.sendBeacon()

操作

const aboutLink = document.querySelector("#about-link")!;
aboutLink.addEventListener("click", (e) => {
  const formData = new FormData();
  formData.append("source", "google");
  formData.append("medium", "cpc");

  const queryParams = new URLSearchParams({
    source: "google",
    medium: "cpc",
  });

  navigator.sendBeacon("https://192.168.1.152:44300/api/tracking", queryParams);
  navigator.sendBeacon("https://192.168.1.152:44300/api/tracking", formData);
});

它的 data 支持很多种格式

不支持 header 哦. 不要把它当成 Fetch 或者 XMLHttpRequest 来使用. 它只属于 tracking purpose 而已.