通过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 相关文章推荐
JavaScript的单例模式 (singleton in Javascript)
Jun 11 Javascript
基于JQuery的模拟苹果桌面Dock效果(稳定版)
Oct 15 Javascript
关于extjs4如何获取grid修改后的数据的问题
Aug 07 Javascript
JavaScript作用域链示例分享
May 27 Javascript
使用RequireJS库加载JavaScript模块的实例教程
Jun 06 Javascript
浅谈Javascript中的Label语句
Dec 14 Javascript
JavaScript输入分钟、秒倒计时技巧总结(附代码)
Aug 17 Javascript
全新打包工具parcel零配置vue开发脚手架
Jan 11 Javascript
基于webpack-hot-middleware热加载相关错误的解决方法
Feb 22 Javascript
Vue Cli3 创建项目的方法步骤
Oct 15 Javascript
在小程序中推送模板消息的实现方法
Jul 22 Javascript
使用javascript解析二维码的三种方式
Nov 11 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
PHP文件读写操作之文件写入代码
2011/01/13 PHP
PHP导出EXCEL快速开发指南--PHPEXCEL的使用详解
2013/06/03 PHP
php轻松实现中英文混排字符串截取
2014/05/28 PHP
js实现运行代码需要刷新的解决方法
2007/08/18 Javascript
一个挺有意思的Javascript小问题说明
2011/09/26 Javascript
S2SH整合JQuery+Ajax实现登录验证功能实现代码
2013/01/30 Javascript
Jquery EasyUI的添加,修改,删除,查询等基本操作介绍
2013/10/11 Javascript
js对象内部访问this修饰的成员函数示例
2014/04/27 Javascript
js style动态设置table高度
2014/10/21 Javascript
JS 实现列表与多选框选择附预览动画
2014/10/29 Javascript
JavaScript实现的链表数据结构实例
2015/04/02 Javascript
JS中常用的正则表达式
2016/09/29 Javascript
jQuery 检查某个元素在页面上是否存在实例代码
2016/10/27 Javascript
Javascript 函数的四种调用模式
2016/11/05 Javascript
vue实现鼠标经过动画
2019/10/16 Javascript
Element-Ui组件 NavMenu 导航菜单的具体使用
2019/10/24 Javascript
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
2020/12/01 Vue.js
[01:07:02]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第三场 2月26日
2021/03/11 DOTA
linux系统使用python获取cpu信息脚本分享
2014/01/15 Python
python错误处理详解
2014/09/28 Python
用Python编写一个基于终端的实现翻译的脚本
2015/04/24 Python
python爬取51job中hr的邮箱
2016/05/14 Python
浅谈numpy中linspace的用法 (等差数列创建函数)
2017/06/07 Python
kafka监控获取指定topic的消息总量示例
2019/12/23 Python
Win10下安装并使用tensorflow-gpu1.8.0+python3.6全过程分析(显卡MX250+CUDA9.0+cudnn)
2020/02/17 Python
英国领先的办公用品供应商:Viking
2016/08/01 全球购物
在加拿大在线租赁和购买电子游戏:Game Access
2019/09/02 全球购物
远程调用的原理
2014/07/05 面试题
办理护照介绍信
2014/01/16 职场文书
家长对学生的评语
2014/04/18 职场文书
创文明城市标语
2014/06/16 职场文书
2014党员学习《反腐倡廉警示教育读本》思想汇报
2014/09/13 职场文书
刘公岛导游词
2015/02/05 职场文书
小兵张嘎观后感
2015/06/03 职场文书
婚礼男方父母答谢词
2015/09/29 职场文书
Android studio 简单计算器的编写
2022/05/20 Java/Android