华为角标api_信标API简介

华为角标api

使用Beacon API,Web开发人员可以在当前页面卸载时轻松地将少量数据(例如分析或诊断数据)异步发送回服务器。 在本文中,我们将探讨Beacon API所解决的一些问题,并向您展示如何使用API​​。

如果没有Beacon API,则当用户离开页面导航时将数据发送回服务器可能会比看起来复杂。 您不想延迟下一页的加载,因为这会损害用户对您网站的体验。 但是,您不想散布有助于改善站点的有价值的信息:过早发送数据可能意味着您散布了一些等待较长时间可以捕获的有价值的信息。

一种典型的解决方案 ,可以在文档卸载时将分析数据发送到服务器,如下所示:

window.addEventListener('unload', function(event) {
  var xhr = new XMLHttpRequest(),
    data = captureAnalyticsData(event);

  xhr.open('post', '/log', false);
  xhr.send(data);
});

function captureAnalyticsData(event) {
  return 'sample data';
}

unload事件处理程序,它通过Ajax请求提交数据。 当页面卸载事件触发时,将通过captureAnalyticsData函数捕获数据,并通过Ajax请求将其发送到服务器。 注意, xhr.open的第三个参数为false ,指示Ajax请求是同步的 。 浏览器通常会忽略在卸载处理程序期间发出的异步请求,因此任何此类Ajax请求必须是同步的。 因为它是同步的,浏览器必须等待请求完成可以卸载文件并显示下一个页面。 这种额外的等待可能会导致性能下降的感觉。

代替同步Ajax请求使用的其他技术包括在卸载处理程序中设置Image对象的src 。 浏览器将在加载文档之前等待Image加载,在此期间可以将数据提交到服务器。 然而,这仍然有同样的问题:当前文档的卸载将同时请求被推迟,此时为Image ,完成,这可能会导致性能不佳的印象。

创建信标API就是为了帮助解决这些问题。 它定义了一个接口,使开发人员可以将少量数据异步发送到Web服务器。 它仅包含一个附加到navigator对象的方法sendBeaconsendBeacon具有两个参数,您要向其提交数据的URL和要提交的数据:

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

数据是通过HTTP POST请求提交的,可以作为ArrayBufferViewBlobDOMStringFormData对象发送。 浏览器将请求放入队列,然后“在可能的最早时机将其发送,但可以优先于比其他网络流量低的数据传输”。 (根据W3C规范 )。 如果数据已成功提交到服务器,则sendBeacon返回true否则返回false

navigator.sendBeacon支持在主要的桌面浏览器中都不错。 您会发现它在当前版本的Chrome,Firefox和Opera中受支持,但在最新版本的IE和Safari中不受支持。 但是,由于无法保证其可用性,因此最好的办法是使用功能检测和回退到页面卸载时提交数据的一种旧方法:

window.addEventListener('unload', function(event) {
  var xhr,
      data = captureAnalyticsData(event);

  if (navigator.sendBeacon) {
    navigator.sendBeacon('/log', data);
  } else {
    xhr = new XMLHttpRequest();
    xhr.open('post', '/log', false);
    xhr.send(data);
  }
});

我创建了一个小示例应用程序 ,您可以使用它来查看运行中的Beacon API。 您需要安装Node.js才能运行服务器。 要运行示例:

  1. 将zip文件下载并解压缩到您选择的文件夹中,例如beaconapi
  2. 打开终端并将目录更改为您在步骤1中创建的文件夹,例如cd /path/to/beaconapi
  3. 仍然在终端中,键入npm install并按<Enter>
  4. 现在输入DEBUG=beaconapi_demo ./bin/www并按<Enter>
  5. 打开支持Beacon API的浏览器,并将其指向http:// localhost:3000

您应该看到一个如下页面:

信标API演示屏幕截图

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

Chrome开发工具屏幕截图

结论

本文介绍了Beacon API。 这是一个很小的API,但可以满足特定的需求。 希望您能够充分利用它。

翻译自: https://www.sitepoint.com/introduction-beacon-api/

华为角标api

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值