如何使用 Beacon Web API 记录用户活动？

Beacon Web API

如何使用 Beacon API？

演示

源代码

🔎 Tracker - Web Beacon API 演示

🚀 如何跑步？

主要用例

Beacon API 的数据限制

概括

这Beacon API是一种相对不为人知、轻量级且高效的网页活动日志记录方式，可将网页活动记录到服务器。它是一个 JavaScript API，可帮助开发者将少量数据（例如分析或跟踪信息、调试或诊断数据）从浏览器发送到服务器。

本文将介绍如何Beacon API使用日志记录器将一些用户活动记录到服务器。希望您喜欢这篇文章。

Beacon Web API

它会向 Web 服务器发送Beacon API一个异步且非阻塞的请求。信标请求有一些特殊之处：

• Beacon 请求不需要服务器响应。这与常规请求有很大不同XHR，常规fetch请求中客户端（浏览器）需要服务器响应。
• 即使您关闭浏览器，也能保证在页面卸载之前发起信标请求。
• Beacon 请求无需阻塞请求（例如 XHR）即可完成。
• Beacon 请求使用 HTTP POST 方法。

信标请求的一些特性，例如non-blocking，对服务器没有期望，response使得信标请求在页面卸载时（例如，关闭浏览器、页面导航等）向服务器发送数据非常有用。

如何使用 Beacon API？

Beacon API具有广泛的浏览器支持。除了旧版本的Internet Explorer之外，它几乎可以在所有浏览器上运行。

为了更保险起见，我们可以使用这个简单的检查方法来测试浏览器是否支持。

if (navigator.sendBeacon) {
  // Initiate a beacon request
} else {
  // May be, fallback to XHR or fetch?
}

该Navigator.sendBeacon()方法向服务器发送信标请求。该方法接受两个参数：服务器 URL 和数据。该方法返回一个布尔值。如果请求已正确放入队列，sendBeacon()则返回 true；否则返回 false。truefalse

if (navigator.sendBeacon) {
  navigator.sendBeacon('/log-tracking', data);
} else {
  // May be, fallback to XHR or fetch?
}

data该方法的参数是sendBeacon()可选的，其类型为 `int` ArrayBufferView、 `int` Blob、DOMString`int` 或 `int` FormData。让我们使用 `int`FormData来创建示例数据。

function sendAnalytics(msg) {
  if (navigator.sendBeacon) {
    let data = new FormData();
    data.append('start', startTime);
    data.append('end', performance.now());
    data.append('msg', msg);

    navigator.sendBeacon('/log-tracking', data);
  } else {
    // May be, fallback to XHR or fetch?
  }
}

在上面的例子中，我们发送了用户在应用程序上花费的时间。我们还发送了一个跟踪数据start，用于记录用户执行的活动（例如，点击按钮、滚动到页面某个部分等）。endmsg

我们可以为unloadand/orbeforeunload事件指定一个处理程序并调用该sendAnalytics()方法。

window.addEventListener('unload', function() {
  sendAnalytics(msg);
});

由于我们是data通过 URL发送信息的/log-tracking，服务器端代码可以将这些信息记录在任何地方，并将其用于分析目的。

以下是一段示例express服务器代码，它会将此信息记录到控制台。我们也可以灵活地将其记录到文件系统、数据库等位置。请注意，服务器在此处不会返回任何响应。

app.post('/log-tracking', function(req, res) {
  console.log('**** Tracked. Now logging ****');

  let startTime = req.body.start;
  let endTime = req.body.end;
  let trackInfo = req.body.msg;

  let logMsg = '';
  let time = (endTime - startTime) / 1000;
  logMsg = `${time.toFixed(2)} seconds`;

  if (time > 60) {
      time = time / 60;
      logMsg = `${time.toFixed(2)} minutes`;
  }
  console.log('In Session for: ', logMsg);
  console.log('Tracking info: ', trackInfo);
});

演示

这里有一个简短的演示（12 秒），展示Beacon请求的工作原理。这里有两个按钮。一个按钮用于向服务器发送临时信标请求，另一个按钮模拟浏览器unload事件。

如下所示，服务器控制台会记录用户停留的时间信息以及示例消息。另请注意，该信息还会记录用户何时关闭浏览器。

如果我们在开发者工具（网络选项卡）中查看信标请求，会发现请求显示为“pending未连接”，因为服务器没有发送响应。因此，在浏览器卸载事件中发送信标请求效果更佳。

另需注意的是，信标请求并非真正的XHR请求。您可以看到All上方已选择跟踪此请求的选项。

源代码

本文及演示中使用的所有源代码都位于下方提到​​的 GitHub 代码库中。欢迎随意 fork、修改和使用。如果您喜欢这个项目，请点个星标 (⭐) 以示支持。欢迎在 GitHub 上关注我，保持联系。

主要用例

它主要在两种使用场景下Beacon API有用。

用户活动跟踪和分析

您可能需要收集并发送用户活动和行为的分析报告。这些活动可能包括：

• 用户会话持续时间有多长？
• 用户使用的用户界面控件有哪些？
• 需要采集的其他类型的遥测信息。

我们可能想使用像 Google Analytics 这样的分析工具和服务来实现这一点，但是，对于企业应用程序来说，要让客户感到方便是很困难的。

关于分析和用户活动跟踪还有一点需要注意，启用此类功能之前，您需要获得最终用户的同意。

调试和诊断

你是否遇到过这样的情况：某个功能在本地（开发模式）运行正常，但在客户环境（生产模式）中却无法正常工作？这种情况非常典型，而这个工具Beacon API可以帮你解决燃眉之急。

您可以发送这些轻量级的信标请求来记录有用的跟踪路径信息，并根据需要进行调试。

Beacon API 的数据限制

使用 Beacon API 发送到服务器的数据量有限制。但是，这个限制在不同的浏览器和用户代理中并不统一。

根据规格说明，

用户代理必须限制最大数据大小，以确保信标请求能够快速及时地完成。

请阅读w3c.org 上的beacon API 规范以获取更多信息。

概括

总之，

• Beacon API 是一个轻量级 API，用于从浏览器向服务器发送少量数据。
• 信标请求是非阻塞异步请求。服务器无需对信标请求发送响应。
• 保证在页面卸载之前发起信标请求。
• 我们可以将其用于用户活动、行为分析和生产环境调试。
• 市面上有很多工具可以进行用户活动、行为分析并生成日志。然而，由于成本高昂以及企业用户对这些应用程序的不友好态度，这些工具很多时候并不实用。
• 了解 JavaScript 原生支持的功能对于更好地理解基础知识也很重要。

有关 Beacon API 的更多信息，请点击此处。

• MDN 的 Beacon API

希望你今天学到了新知识，并准备Beacon API好尽快尝试。你可能还会喜欢：

• 10 个你可能想用的鲜为人知的 Web API
• JavaScript 标记模板字面量（Tated Template Literal）究竟是什么？
• 用五岁小孩都能听懂的方式解释：什么是 ES6 符号？

如果对您有用，请点赞/分享，让更多人看到。

您可以在 Twitter 上 @ 我 ( @tapasadhikary ) 留言，或者关注我。