信标API简介

钥匙要点

Beacon API为Web开发人员提供了一个解决方案，以在当前页面卸载时将少量数据（例如分析或诊断）发送回服务器，从而解决了潜在的延迟或丢失有价值信息的问题。 🎜> Beacon API由一种附加到Navigator对象的方法SendBeacon组成。它需要两个参数，即提交数据的URL以及要提交的数据。数据是通过HTTP POST请求提交的，可以作为arraybufferview，blob，domstring或formdata对象发送。
• > Beacon API得到了Chrome，Firefox和Opera等主要桌面浏览器的支持，但在IE和Safari的最新版本中没有支持。对于没有支持的浏览器，开发人员可以使用功能检测和后备到较旧的页面上提交数据的方法。
• Beacon API使Web开发人员可以轻松地将少量数据（例如分析或诊断数据）发送回服务器时，在当前页面卸载时会异步回到服务器。在本文中，我们将研究Beacon API解决的一些问题，并向您展示如何使用API​​。
没有信标API，当用户从页面上导航时，将数据发送回服务器可能比看起来更棘手。您不想将下一页推迟加载，因为这会损害用户对网站的体验。但是，您不想失去可能有助于改善您的网站的宝贵信息：发送数据过早可能意味着您会释放
• >
可以捕获的有价值的信息，如果您等待了更长的时间。 >

>典型的

解决方案

将分析数据发送到服务器，因为文档卸载可能看起来像这样：

>卸载事件处理程序，该处理程序通过AJAX请求提交数据。当页面卸载事件启动时，数据将通过caureanalyticsdata函数捕获，并通过AJAX请求发送到服务器。请注意Xhr.open的第三个参数是错误的，表明AJAX请求为 synChronous

。浏览器通常会忽略卸载处理程序期间提出的异步请求，因此任何此类ajax请求

>都具有同步性。由于它是同步的，因此浏览器必须等待请求在>之前完成>它可以卸载文档并显示下一页。等待的额外等待可能会导致表现不佳的感觉。

<span>window.addEventListener('unload', function(event) {
</span>  <span>var xhr = new XMLHttpRequest(),
</span>    data <span>= captureAnalyticsData(event);
</span>
  xhr<span>.open('post', '/log', false);
</span>  xhr<span>.send(data);
</span><span>});
</span>
<span>function captureAnalyticsData(event) {
</span>  <span>return 'sample data';
</span><span>}</span>

>使用的其他技术代替同步AJAX请求包括在卸载处理程序中设置图像对象的SRC。浏览器将在卸载文档之前等待图像加载，在此期间可以将数据提交给服务器。但是，这仍然存在相同的问题：当前文档的卸载将在请求，这次完成图像完成时延迟，这可能会导致性能差。

创建了Beacon API，以帮助解决这些问题。它定义了一个接口，该接口使开发人员可以将少量数据发送到Web服务器异步。它仅包含一种连接到导航对象的方法，即sendbeacon。 SendBeacon采用两个参数，您要提交数据的URL以及要提交的数据：>

数据是通过HTTP POST请求提交的，可以作为arraybufferview，blob，domstring或formdata对象发送。浏览器将请求排队，并将其发送“最早的可用机会，但与其他网络流量相比，数据的传输更低。” （根据W3C规格）。如果数据已成功提交到服务器，则SendBeacon将返回true，或者否则为false。

<span>window.addEventListener('unload', function(event) {
</span>  <span>var xhr = new XMLHttpRequest(),
</span>    data <span>= captureAnalyticsData(event);
</span>
  xhr<span>.open('post', '/log', false);
</span>  xhr<span>.send(data);
</span><span>});
</span>
<span>function captureAnalyticsData(event) {
</span>  <span>return 'sample data';
</span><span>}</span>

> Navigator.SendBeacon在主要桌面浏览器中都不错。您会发现它在当前版本的Chrome，Firefox和Opera中得到了支持，但在IE和Safari的最新版本中不支持它。但是，您不能保证它的可用性，最好的选择是使用功能检测和后备到页面上提交数据的旧方法之一：

>

>我创建了一个小示例应用程序，您可以使用该应用程序来查看Beacon API的作用。您需要安装node.js来运行服务器。运行样本：

<span>window.addEventListener('unload', function(event) {
</span>  <span>var data = captureAnalyticsData(event);
</span>  <span>navigator.sendBeacon('/log', data);
</span><span>});</span>

>下载并将zip文件解压缩到您选择的文件夹中，例如BeaConapi

>打开终端并将目录更改为您在步骤1中创建的文件夹，例如CD/PATH/TO/BEACONAPI
仍在终端中，输入NPM安装，然后按
2. >
现在键入debug = beacconapi_demo ./bin/www and pers press
3. >
>打开一个支持信标API并将其指向http：// localhost：3000
4. >的浏览器
5. 您应该看到一个看起来像这样的页面：

在此示例中，我们使用的是Chrome。打开开发工具，切换到网络选项卡，然后勾选“保存日志”复选框。过滤结果，以便您只看到其他请求。现在，当您单击“卸载”按钮时，您应该在Dev Tools中查看请求 /日志记录。

结论

>本文介绍了信标API。这是一个很小的API，但充满了特定的利基市场。希望您能够充分利用它。

经常询问有关信标API

的问题（常见问题解答）

> Beacon API的主要功能是什么？>

>我如何在Web应用程序中使用Beacon API？要在Web应用程序中使用信标API，可以使用Navigator.sendBeacon（）方法。此方法需要两个参数：将数据发送到的URL以及发送的数据。数据可以是formdata对象，blob，arraybufferview或urlsearchparams对象。这是一个示例：

var data = new formdata（）;

data.append（'name'，'john doe'）; navigator.sendbeacon（'/api/endpoint'，data，data ）;

使用Beacon API？>

>使用BEACON API？信标API的限制是，它没有提供有关服务器成功收到数据的反馈。这意味着您不能将其用于需要确认收据的关键数据。此外，所有浏览器中都不支持BEACON API，因此您可能需要为不支持它的浏览器提供后备。

>
> Beacon Api处理失败如何？信标API没有提供有关服务器是否成功收到数据的任何反馈。如果由于网络问题而无法发送数据，则API不会重试发送数据。这就是为什么建议将信标API用于不需要确认收据的非关键数据的原因。

>我可以使用信标API将数据发送到其他域吗？但是，服务器必须支持CORS（交叉原始资源共享），并且必须配置以接受您的域中的交叉原始请求。

>是否在所有浏览器中支持的信标API？ Beacon API在大多数现代浏览器中都得到支持，包括Chrome，Firefox，Safari和Edge。但是，Internet Explorer不支持它。您可以在网站上检查当前的浏览器支持。例如分析数据。尽管您可以发送的数据量没有严格的限制，但是发送大量数据可能会影响用户网络性能。因此，建议使用信标API发送少量的非关键数据。

>

>我可以取消信标的请求吗？

不，一旦提出了信标请求，就不能是取消。信标API不提供取消或撤销信标请求的方法。这是建议将信标API用于不需要确认收据的非关键数据的另一个原因。

>

以上是信标API简介的详细内容。更多信息请关注PHP中文网其他相关文章！