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


Posted in Javascript onApril 01, 2015

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

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地址:http://demo.3water.com/js/2015/net.html
Demo中对不支持connection的浏览器直接返回了{type:0},这样就很便利解决了某些浏览器不支持的问题;对于不支持又能上网的浏览器处理为“unknown”当然也是合乎情理的。

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

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

Javascript 相关文章推荐
jQuery当鼠标悬停时放大图片的效果实例
Jul 03 Javascript
js编码、解码函数介绍及其使用示例
Sep 05 Javascript
JavaScript Ajax Json实现上下级下拉框联动效果实例代码
Nov 23 Javascript
ExtJs中gridpanel分组后组名排序实例代码
Dec 02 Javascript
jQuery图片旋转插件jQueryRotate.js用法实例(附demo下载)
Jan 21 Javascript
javascript中的3种继承实现方法
Jan 27 Javascript
jQuery图片瀑布流的简单实现代码
Mar 15 Javascript
Javascript中类式继承和原型式继承的实现方法和区别之处
Apr 25 Javascript
详解vue-router 2.0 常用基础知识点之router-link
May 10 Javascript
JS中Attr的用法详解
Oct 09 Javascript
Node.js中sequelize时区的配置方法
Dec 10 Javascript
微信小程序实现手指触摸画板
Jul 09 Javascript
Javascript中数组方法汇总(推荐)
Apr 01 #Javascript
javascript闭包的理解
Apr 01 #Javascript
JavaScript数据类型之基本类型和引用类型的值
Apr 01 #Javascript
JavaScript之Object类型介绍
Apr 01 #Javascript
JS修改iframe页面背景颜色的方法
Apr 01 #Javascript
JS返回iframe中frameBorder属性值的方法
Apr 01 #Javascript
javascript算法题:求任意一个1-9位不重复的N位数在该组合中的大小排列序号
Apr 01 #Javascript
You might like
JQuery 技巧和窍门整理(8个)
2010/04/22 Javascript
Javascript 面向对象 重载
2010/05/13 Javascript
心扬JS分页函数代码
2010/09/10 Javascript
悬浮数字的实现案例
2014/02/19 Javascript
Bootstrap的图片轮播示例代码
2015/08/31 Javascript
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
2017/08/01 jQuery
thinkjs微信中控之微信鉴权登陆的实现代码
2019/08/08 Javascript
解决layui 表单元素radio不显示渲染的问题
2019/09/04 Javascript
Vue 组件的挂载与父子组件的传值实例
2020/09/02 Javascript
python之matplotlib学习绘制动态更新图实例代码
2018/01/23 Python
对pandas进行数据预处理的实例讲解
2018/04/20 Python
浅谈python requests 的put, post 请求参数的问题
2019/01/02 Python
python tkinter实现界面切换的示例代码
2019/06/14 Python
ORM Django 终端打印 SQL 语句实现解析
2019/08/09 Python
Python帮你微信头像任意添加装饰别再@微信官方了
2019/09/25 Python
给我一面国旗 python帮你实现
2019/09/30 Python
python 解决flask uwsgi 获取不到全局变量的问题
2019/12/22 Python
Python图像处理库PIL的ImageGrab模块介绍详解
2020/02/26 Python
Pycharm最常用的快捷键及使用技巧
2020/03/05 Python
Python是什么 Python的用处
2020/05/26 Python
python新手学习使用库
2020/06/11 Python
python脚本使用阿里云slb对恶意攻击进行封堵的实现
2021/02/04 Python
泰国王权免税店官方网站:KingPower
2019/03/11 全球购物
黄色火烈鸟:De Gele Flamingo
2019/03/18 全球购物
意大利在线大学图书馆:Libreria universitaria
2019/07/16 全球购物
外贸业务员岗位职责
2013/11/24 职场文书
科技开发中心办公室主任岗位责任制
2014/02/10 职场文书
个人自我鉴定总结
2014/03/25 职场文书
诚信的演讲稿范文
2014/05/12 职场文书
乡镇食品安全责任书
2014/07/28 职场文书
2014年教师节演讲稿
2014/09/03 职场文书
普通党员四风问题对照检查材料
2014/09/27 职场文书
专职安全员岗位职责
2015/04/11 职场文书
如何用JS实现简单的数据监听
2021/05/06 Javascript
MySQL千万级数据表的优化实战记录
2021/08/04 MySQL
pandas时间序列之pd.to_datetime()的实现
2022/06/16 Python