通过JS判断联网类型和连接状态的实现代码

 中国的移动网络环境复杂,为了给用户带去更好访问体验,开发者希望能了解用户当前的联网方式,然后给用户一个符合当前网络环境的请求结果。

W3C的规范中给出了一个方法来获得现在的网络状态navigator.connection;根据Working Draft 29 November 2012协议规范我们可以从接口中获得bandwidth(带宽,M/s)和metered两个参数的值;还提供了一个监听方法,来时刻监听接入环境的变化情况。现实中我们发现很多浏览器并没有返回bandwidth值,而且遵守了Working Draft 07 June 2011的协议返回给我们type(类型,wifi/2g/3g/4g)。

我们接下来就看看各家的支持情况

 

Android 2.3+ Browser UC Dolphin QQ浏览器 Baidu Firefox Chrome Opera Mini Maxthon
Yes No* Yes Yes* Yes Yes(New) No No Yes

说明下在iPhone中任何浏览器都无法得到相关信息。

通过上面的说明,我们发现还是可以通过这个参数了解很大一部分用户的联网情况的,并且为他们提供更加优质的体验。
接下来我们重点说说各浏览器的返回情况。

大部分浏览器会返回一个int型的类型,其中的特例是QQ浏览器,返回的就是类型名称,对应关系如下

 

返回值 QQ返回值 类型
0 unknown UNKNOWN
1 ethernet ETHERNET
2 wifi WIFI
3 2g CELL_2G
4 3g CELL_3G
5 4g CELL_4G(中国现在也会出现这个值,是hspa+)
? none NONE

接下去是一个更大的特例,这就是firefox,他使用了新版规范,所以返回的是bandwidth;不过很奇怪的是只要是wifi或3G他就返回20,如果是2G返回的就是0.1953125;每次都一样不管现在网络状态到底是多少。这个问题还会继续跟进。
Demo中对不支持connection的浏览器直接返回了{type:0},这样就很便利解决了某些浏览器不支持的问题;对于不支持又能上网的浏览器处理为“unknown”当然也是合乎情理的。

很多工程师觉得这个功能支持还不好,还是先不使用的好;但是我觉得只要错误能被处理,风险能被把控,为什么不给那些先天优秀的客户提供更友好的体验呢。

今天同学说到让后端判断速度,这个可能有点难;不过确实可以通过每次的异步请求去得到用户大概的速度(加载的时间和文件大小其实前端都能得到),然后在选择性的提供某些服务,之后也准备向这个方向上多思考下。

时间: 2024-10-28 23:42:54

通过JS判断联网类型和连接状态的实现代码的相关文章

通过JS判断联网类型和连接状态的实现代码_javascript技巧

中国的移动网络环境复杂,为了给用户带去更好访问体验,开发者希望能了解用户当前的联网方式,然后给用户一个符合当前网络环境的请求结果. W3C的规范中给出了一个方法来获得现在的网络状态navigator.connection:根据Working Draft 29 November 2012协议规范我们可以从接口中获得bandwidth(带宽,M/s)和metered两个参数的值:还提供了一个监听方法,来时刻监听接入环境的变化情况.现实中我们发现很多浏览器并没有返回bandwidth值,而且遵守了Wo

js判断undefined类型,undefined,null的区别详细解析

 本篇文章主要是对js判断undefined类型,undefined,null,NaN的区别进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助 js判断undefined类型   今天使用showModalDialog打开页面,返回值时.当打开的页面点击关闭按钮或直接点浏览器上的关闭则返回值是undefined 所以自作聪明判断      var reValue=window.showModalDialog("","",""); 

js判断undefined类型示例代码

 这篇文章主要介绍了js判断undefined类型的实现方法,需要的朋友可以参考下  代码如下: if (reValue== undefined){  alert("undefined");  }  发现判断不出来,最后查了下资料要用typeof方法:  if (typeof(reValue) == "undefined") {  alert("undefined");    }    typeof 返回的是字符串,有六种可能:"num

js判断undefined类型,undefined,null, 的区别详细解析_javascript技巧

js判断undefined类型 今天使用showModalDialog打开页面,返回值时.当打开的页面点击关闭按钮或直接点浏览器上的关闭则返回值是undefined所以自作聪明判断   var reValue=window.showModalDialog("","","");   if (reValue== undefined){  alert("undefined"); } 发现判断不出来,最后查了下资料要用typeof 方

js判断浏览器类型及设备(移动页面开发)_javascript技巧

下面主要用javascript代码来判断浏览器类型及设备访问该网页面,支持手机上的所有浏览器,具体代码如下. <!DOCTYPE html> <html> <head> <title>JS判断是什么设备是什么浏览器-www.jb51.net</title> <meta charset="utf-8"> <meta name="apple-touch-fullscreen" content=

css js判断浏览器类型与浏览器版本

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.111cn.net/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="conte

js判断浏览器类型

其实jQuery 也可以判断浏览器类型,但是从1.9之后就删除了$.browser  所以我没有使用jQuery 测试页面: Html代码   <html>   <head lang="en">       <meta charset="UTF-8">       <title></title>       <script type="text/javascript" src=&q

js判断浏览器类型,版本的代码(附多个实例代码)_javascript技巧

在网站前端开发中,浏览器兼容性问题本已让我们手忙脚乱,Chrome的出世不知道又要给我们添多少乱子.浏览器兼容性是前端开发框架要解决的第一个问题,要解决兼容性问题就得首先准确判断出浏览器的类型及其版本. JavaScript是前端开发的主要语言,我们可以通过编写JavaScript程序来判断浏览器的类型及版本.JavaScript判断浏览器类型一般有两种办法,一种是根据各种浏览器独有的属性来分辨,另一种是通过分析浏览器的userAgent属性来判断的.在许多情况下,值判断出浏览器类型之后,还需判

js判断单选框是否选中状态代码

当<input type="radio" name="radio_name" value="radiobutton">(单选框) 是动态加入页面时,它的数量有可能为0,1,或者大于1,因此在js 中需要判断单选框是否选中时,就必须循环判断每个单选框的状态,用var obj=document.getelementsbyname('audit_result');就可以得到单选框组合,并可通过obj.length得到它的长度,这样就不用判断