`

使用 navigator.sendBeacon 上报数据

 
阅读更多
如某些统计系统,在页面unload时,如果要上报当前数据,采用xhr的同步上报方式,会阻塞当前页面的跳转;使用new Image有可能遇到aborted,导致无法成功发送。
 
现在好了,可以使用浏览器来提供发送保障的更简洁的sendBeacon方法。sendBeacon是异步的,不会影响当前页到下一个页面的跳转速度,且不受同域限制。
 
window.addEventListener('unload', logData, false);
 
function logData() {
navigator.sendBeacon("/log", analyticsData);
}
 
sendBeacon 如果成功进入浏览器的发送队列后,会返回true;如果受到队列总数、数据大小的限制后,会返回false。返回ture后,只是表示进入了发送队列,浏览器会尽力保证发送成功,但是否成功了,不会再有任何返回值。目前暂无具体的数据长度限制标准。
 
考虑到对目前浏览器的支持情况,需要做一下降级支持(如同步模式下的xhr,如果不是同域则要支持CORS):
 
navigator.sendBeacon || new Function('var xhr=new XMLHttpRequest();xhr.open("POST",arguments[0],true);r.send(arguments[1]);');
 
当前浏览器对sendBeacon的支持情况(最新进展见:http://caniuse.com/#search=sendBeacon):
 
Chrome 37+
Firefox (Gecko) 31+
Internet Explorer 不支持
Opera 24+
Safari 不支持
手机端常用浏览器不支持:Android浏览器支持了,但是iOS尚无支持
Google Analytics已经使用了navigator.sendBeacon()来上报数据:http://www.thyngster.com/google-analytics-added-sendbeacon-functionality-universal-analytics-javascript-api/
 
via:
W3标准描述:https://dvcs.w3.org/hg/webperf/raw-file/tip/specs/Beacon/Overview.html
MDN介绍:https://developer.mozilla.org/en-US/docs/Web/API/navigator.sendBeacon
 
example:
function SendBeacon(src)
     if (typeof(navigator.sendBeacon) == "function") {
          var b = new Blob([], {type: 'application/x-www-form-urlencoded'});
          return navigator.sendBeacon(src, b);
     }
     return false;

 

}
分享到:
评论

相关推荐

    sendBeacon:在离开页面之前使用 navigator.sendBeacon 提交内容

    标题中的“navigator.sendBeacon”是Web开发中一个重要的API,它允许网页在用户离开页面时,仍能向服务器发送小量数据,如分析信息、日志数据等。这一功能对于实现无损数据追踪和提高用户体验非常关键。下面将详细...

    vue3前端js通过navigator.serial直接连接地磅仪串口显示重量

    vue3前端js通过navigator.serial直接连接地磅仪串口显示重量 vue3前端js通过navigator.serial直接连接地磅仪串口显示重量 vue3前端js通过navigator.serial直接连接地磅仪串口显示重量 vue3前端js通过navigator....

    修改 navigator.platform 的值.user.js

    修改 navigator.platform 的值.user.js

    core-estimator, 用于 navigator.hardwareConcurrency的跨浏览器 polyfill.zip

    core-estimator, 用于 navigator.hardwareConcurrency的跨浏览器 polyfill 核心估计量核心估算器是一个用于 navigator.hardwareConcurrency的跨浏览器 polyfill 。估计器通过执行定时攻击来运行不同数量的同步网络...

    Install Navigator.exe

    ssd Install Navigator.exe

    DiscoverUriSchemes:使用 navigator.msLaunchUri 慢慢发现已注册的应用程序 URI 方案

    总之,理解并正确使用`navigator.msLaunchUri`可以帮助开发者为用户提供更加无缝的Web体验,特别是在需要与本地应用程序交互的情况下。但是,考虑到浏览器兼容性和安全性,务必提供替代方案,并遵循最佳实践。

    windows 模拟com端口接收和发送数据

    使用navigator.serial首先需要获取权限,然后可以进行打开、读取、写入和关闭串口的操作。 1. 获取权限:调用`navigator.serial.requestPort()`方法向用户请求访问串口的权限。 2. 打开串口:成功获取权限后,使用`...

    Navigator.

    在`Navigator`中,你可以使用`navigator.push`和`navigator.pop`方法来在屏幕之间进行导航。`push`方法将新的`Route`添加到堆栈顶部,而`pop`方法则移除堆栈顶部的`Route`,返回到前一个屏幕。通过这种方式,你可以...

    HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题

    navigator.mediaDevices.getUserMedia 应项目要求,需要实现移动端app嵌入H5页面完成实人认证的功能。打开getUserMedia文档,链接如下: ...看上去很简单,最终却写的怀疑人生。 API环境 问题一:(为什么不管怎么配置...

    flutter_bottom_navigator.zip

    总结来说,"flutter_bottom_navigator.zip"的资源着重展示了Flutter中如何使用BottomNavigationBar和StackWidget来构建一个底部导航切换内容的场景。通过理解这两个组件的工作原理和交互方式,开发者可以为用户提供...

    com.autonavi.xmgd.navigator.1401261712

    高德导航软件 com.autonavi.xmgd.navigator.1401261712.apk

    path-navigator.zip

    在本项目"path-navigator.zip"中,我们探讨了一个基于Vue.js框架的示例应用,该应用利用了高德地图API来实现一个功能丰富的巡航轨迹回放功能。这个功能不仅包含轨迹的显示,还带有进度条和速度控制,提供了一种用户...

    完整版 LJ-Navigator.zip

    综上所述,"完整版 LJ-Navigator.zip" 是一个包含基恩士激光传感器调试软件的压缩包,提供了从安装到使用的全套资源。用户可以通过运行setup.exe或LJ-Navigator.msi来安装软件,并利用其中的工具进行传感器的调试...

    前端数据采集+行为上报(数据埋点)

    通过使用 Collct.js,开发者可以跟踪用户的行为,如点击按钮、浏览页面、填写表单等,这些数据随后会被上报到服务器进行分析。 在实际应用中,数据埋点是实现数据采集的关键技术。数据埋点是指在代码中预设特定的...

    path-navigator.zip.zip

    "path-navigator.zip.zip"这个文件名可能暗示了一个与路径处理相关的工具或代码库,可能是用于帮助用户或开发者在复杂的文件路径中进行导航。尽管没有具体的标签提供额外信息,我们可以从“path navigator”这个主题...

    ArcGIS Navigator.apk

    ArcGIS Navigator.apk

    关于navigator.userAgent

    用js中的用户代理,判断浏览的类型,其中包括判断pc端、移动端、判断用户移动端使用的系统平台和操作系统的版本号,判断用户是否在微信中打开

    geolocation:navigator.geolocation 对象

    **地理定位:navigator.geolocation对象** 在Web开发中,JavaScript的`navigator.geolocation`对象扮演着重要的角色,它允许我们获取用户的地理位置信息。这个功能极大地丰富了网页的交互性,可以用于提供基于位置...

    clipboard复制当前链接/网址/url ,兼容所有浏览器,移动端也适用

    例如,使用Web API如`navigator.clipboard.writeText()`可以实现复制到剪贴板的功能,但并非所有浏览器都支持。 3. **Flash的替代**: 以前,复制链接功能可能依赖于Adobe Flash,但由于安全和性能问题,Flash逐渐被...

Global site tag (gtag.js) - Google Analytics