跳到主要内容

sendBeacon

2024年02月04日
柏拉文
越努力，越幸运

一、认识​

navigator.sendBeacon() 方法可用于通过 HTTP POST 将少量数据异步传输到 Web 服务器。它主要用于将统计数据发送到 Web 服务器，同时避免了用传统技术（如：XMLHttpRequest）发送分析数据的一些问题。

navigator.sendBeacon 存在的意义: XMLHttpRequest 与 IMG 上报数据的方式, 都会迫使用户延迟卸载文档, 并使得下一个导航出现的更晚; navigator.sendBeacon 会在合适的时机通过 HTTP POST 将少量数据异步发送到服务端, 不会阻塞当前页面的卸载, 也不会阻塞下个新页面的加载, 不存在性能问题, 这意味着 navigator.sendBeacon 在可靠、异步发送数据的同时, 不会影响当前页面、下一个页面。

二、语法​

const result = navigator.sendBeacon(url);
const result = navigator.sendBeacon(url, data);

  • url: url 参数表明 data 将要被发送到的网络地址。

  • data: data 参数是将要发送的 ArrayBuffer、ArrayBufferView、Blob、DOMString、FormData 或 URLSearchParams 类型的数据。

三、请求​

navigator.sendBeacon 发送的请求是 ping 类型, 所以只会在 Network 中的 All 或者 Other 里出现, 不会出现在 Fetch/XHR 列表中。如图所示:

Preview

四、返回值​

当用户代理成功把数据加入传输队列时，sendBeacon() 方法将会返回 true，否则返回 false。

五、应用场景​

5.1 在会话结束时上报数据​

上报数据: 用户点击事件、页面切换之后、页面关闭之后都可以通过 navigator.sendBeacon 上报数据

function buryingPointBySendBeacon(type) {
    const params = JSON.stringify({
        type,
        url: "sendBeacon",
        device: "pc",
    });
    const result = navigator.sendBeacon(
        "/server/buryingPoint/sendBeacon",
        params
    );
    console.log(result);
}

function handleVisibilitychange() {
    if (document.visibilityState === "hidden") {
        buryingPointBySendBeacon();
    }
}

document.addEventListener("visibilitychange", handleVisibilitychange);
const buttonSendBeacon = document.querySelector("#button-sendBeacon");
    buttonSendBeacon.addEventListener("click", function () {
    buryingPointBySendBeacon("sendBeacon");
});