当前位置: 首页 > 编程笔记 >

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

佟嘉祯
2023-03-14
本文向大家介绍通过JS判断联网类型和连接状态的实现代码,包括了通过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地址:http://demo.jb51.net/js/2015/net.html
Demo中对不支持connection的浏览器直接返回了{type:0},这样就很便利解决了某些浏览器不支持的问题;对于不支持又能上网的浏览器处理为“unknown”当然也是合乎情理的。

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

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

 类似资料:
  • 本文向大家介绍Android中判断网络连接状态的方法,包括了Android中判断网络连接状态的方法的使用技巧和注意事项,需要的朋友参考一下 App判断用户是否联网是很普遍的需求,实现思路大概有下面几种 利用Android自带的ConnectivityManager类 有时候连上了wifi,但这个wifi是上不了网的,我们可以通过ping www.baidu.com来判断是否可以上网 也可以利用ge

  • 可确认目前连接的接入点信息或网络的连接状态。

  • 本文向大家介绍python 判断网络连通的实现方法,包括了python 判断网络连通的实现方法的使用技巧和注意事项,需要的朋友参考一下 开发中偶尔需要判断网络的连通性,没有什么方法比 ping 更直接了当,通常检查网络情况都是运行命令ping www.baidu.com ,查看输出信息即可。 简单方法 python执行批处理用多种方法,考虑到我们仅仅用于验证网络连通性,只需要最终的结果,os.sy

  • 本文向大家介绍基于js实现判断浏览器类型代码实例,包括了基于js实现判断浏览器类型代码实例的使用技巧和注意事项,需要的朋友参考一下 前言 工作中需要用到判断浏览器类型,网上找到的内容不怎么全,故在此进行一下总结。 一、不同浏览器及版本下User-Agent信息 待续.....欢迎补充 二、根据User-Agent信息进行判断 以下代码目前还判断不了win10下的edge 以上就是本文的全部内容,希

  • 本文向大家介绍Android中监听判断网络连接状态的方法,包括了Android中监听判断网络连接状态的方法的使用技巧和注意事项,需要的朋友参考一下 在无网或网速差的状态下,没必要去连接服务器。 你可以使用 ConnectivityManager 来判断是否连到网络,以及网络类型。 判断是否有网络连接 下面的代码用ConnectivityManager查询是活动网络连接判断是否有Internet连接

  • 本文向大家介绍如何判断软件程序是否联网 联网状态提示信息Android实现,包括了如何判断软件程序是否联网 联网状态提示信息Android实现的使用技巧和注意事项,需要的朋友参考一下 在项目中,经常需要判断是否有网络连接。最近学习了如何判断软件是否联网,如果没有联网,弹出提示信息,连接网络。 效果: (1)联网情况下:   (2)不联网情况下: (3)点击“检测设置”: 源码下载:http://x