使用 navigator.sendBeacon() 上报数据

http://kaifage.com/notes/76/navigator-sendBeacon.html

如某些统计系统,在页面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/
https://developers.google.com/analytics/devguides/collection/analyticsjs/field-reference?hl=zh-cn

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

时间: 2024-12-16 13:26:17

使用 navigator.sendBeacon() 上报数据的相关文章

navigator.sendBeacon

navigator.sendBeacon(url, data) 用于向服务器异步发送小的HTTP数据.主要用于满足统计和诊断代码的需要. 默认是发post请求,后端需要能够post接收数据 Beacon API不提供相应的回调,因此后端返回最好省略response body,(例如,204 No Content) navigator.sendBeacon()之后的代码可以执行

温故而知新 前端日志上传新姿势 navigator.sendBeacon(信标)

原文地址:https://mp.weixin.qq.com/s/-moAfEZicrFmun4qfWLdOQ 简单示例js: var data = JSON.stringify({ name: 'Berwin' }); navigator.sendBeacon('http://localhost:80/index.php', data) 简单php示例: 由于是新标发送的数据是 "text/plain" 数据类型,所以用$GLOBALS['HTTP_RAW_POST_DATA']接受,

传感器从 “组网成功 -> 上报数据“ “二次上电” “删除节点”整个数据流

//一. 出厂首次上电, 组网之后报文 //1. 网关主动上报新 F3EF 节点(网关收到之后,并查询设备类型,类型确定之后,取消网关上报节点)cpp:111# 0x44 0x55 0x00 0x12 0x4B 0x00 0x08 0xC6 0xF2 0x4E 0x08 0x10 0x00 0x0D 0x00 0x01 0x0B 0x00 0x12 0x4B 0x00 0x08 0xC6 0xF3 0xEF 0xE9 0xF3 //2. 中控主动查询设备类型cpp:111# 0x44 0x55

ESP8266上报数据到中国移动物联网平台HTTP

#include <HttpPacket.h> #include <ArduinoJson.h> #include <ESP8266WiFi.h> HttpPacketHead packet; #define myPeriodic 5 int L = 0; //LED指示灯引脚 int sent = 0; char OneNetServer[] = "api.heclouds.com"; //不需要修改 const char ssid[] = &qu

sql在服务器上报数据无法库远程错误

是vs中数据库中连接字符串出现问题. 解决办法: 在桌面创建后缀为.udl文件.点击后在服务器名称中填写.. 全部完成后,点开文件 将Integrated后的字符串填写到vs的数据库连接字符串中.

客户端数据上报的简单实现

发布到外网的安装包和客户端程序,经常需要向后台上报一些数据.实现数据上报的方法有很多,其中最简单的方法是,用IE静默打开一个带有查询字符串的URL.这样,只要在apache上部署一个简单的脚本,就能统计数据上报了. 先看下安装包中数据上报的实现,nsis代码如下: ExecShell "open" "iexplore.exe" "http://127.0.0.1" SW_HIDE 这个脚本对应到win32的API,是ShellExecute.奇怪

xml文件数据上报——根据模型生成对应的xml文件进行上报

1.引入命名空间:System.Xml 2.xml数据格式-xml存放位置 \XmlFiles\jgsj\AddAdminSuperItemInfo.xml <?xml version="1.0" encoding="utf-8" ?> <!--新增行政监管事项信息--> <Data> <AdminSuperItemInfo> <tenderProjectName>项目名称</tenderProjec

数据上报-动态生成winform表单

winform+Oracle数据库 通过数据库查询出所有列名.数据类型.描述等信息进行动态生成winform表单文件,再通过发射对类进行取值赋值.........适用于表结构单一,需要快速开发的项目 经理预估期1个星期的工作时间,我也不知道如果真的一个星期做完我会不会挂掉,而实际情况是数据库建立都花了一个星期虽然表名称.数据类型都不需要自己想,从建表模型设计,框架寻找. 1.需要用的类 public class FiledInfo { /// <summary> /// 字段名 /// <

伪基站,卒于5G——本质上是基于网络和UE辅助的伪基站检测,就是将相邻基站的CI、信号强度等信息通过测量报告上报给网络,网络结合网络拓扑、配置信息等相关数据,对所有数据进行综合分析,确认在某个区域中是否存在伪基站

伪基站,卒于5G from:https://www.huxiu.com/article/251252.html?h_s=h8 2018-07-05 21:58收藏27评论6社交通讯 本文来自微信公众号:网优雇佣军(hr_opt),虎嗅获授权发表,题图来自:pixabay.com. 伪基站是2G时代的产物,通过伪装运营商的基站,向用户手机发送广告推销.诈骗.钓鱼网站等信息,侵犯公民隐私,危害人身财产安全,扰乱社会秩序. 2G时代,由于GSM只有单向鉴权加密,手机无法确认网络的合法性,导致伪基站有机