几个有用的Web API——网络状态API
前言
在手机上浏览视频网站，能够根据用户当前使用的网络类型，在必要的时候给出提示，是一种很好的体验。
像这样（手机UC浏览器）：
这样（手机QQ浏览器）：
这个功能还有一个用途：资源预加载。在wifi下，手机可以提前加载页面的静态资源，以此提升用户观览体验， 在非wifi下可使用懒加载，为用户节省流量。
然而，不难发现，这些都是软件外壳的API实现的，并非简单的JS实现。（一般视频在其他媒体上播放时不会弹出提示，可以猜测并未调用该环境下的JSBridge）
例如在微信或微信小程序里，可以这样获取网络类型：
//微信
WeixinJSBridge.invoke('getNetworkType', {}, e => {
//blabla
});
//小程序
wx.getNetworkType({
success: res => {
//blabla
}
})
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
实际上，HTML5已经有这样的Web API来规范这个功能：onLine和connection API。
现在，手机端和PC端对前者的实现比较好，后者只有PC端的某些高级版本才支持（我用的Chrome67支持）。 所以，如果想用纯JS在手机上实现该功能，到这里就可以关掉了😂 。。。
如果还寄希望于PC端，还是可以继续看一看的😄 。
onLine：一个属性两个事件
navigator.onLine:
Boolean类型，判断设备是否连接上网络。
online、offline事件
通常绑定在window上，当设备有网和没网之间切换时触发。
var online = navigator.onLine; //是否在线
//事件绑定
window.addEventListener('online', updateOnlineStatus);
window.addEventListener('offline', updateOnlineStatus);
1
2
3
4
2
3
4
connection：一个对象一个事件
一个对象：navigator.connection
type
网络类型
bluetooth: 蓝牙
cellular: 蜂窝网络(e.g., EDGE, HSPA, LTE, etc.)
ethernet: 以太网
none: 无连接
mixed: 多类型混合
other: 类型可知，但不可枚举
unknown: 有链接，但类型未知
wifi: Wi-Fi
wimax: WiMAX
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
effectiveType
有效连接类型
'2g'
'3g'
'4g'
'slow-2'
1
2
3
4
2
3
4
downlink
有效带宽，M/s
downlinkMax
下行最大比特率
rtt:
往返时间（round-trip time）：表示从发送端发送数据开始，到发送端收到来自接收端的确认（接收端收到数据后便立即发送确认，不包含数据传输时间）总共经历的时间。
一个事件： connection.onchange
很简单，当设备网络连接类型发生变化时触发该事件
Demo
主要代码:
{
onGetStatus () {
if(!this.canUseConnection) {
this.$message.error('浏览器不支持navigator.connection（>_<）...');
return;
}
this.updateConnectionStatus();
},
update () {
this.connection = navigator.connection;
},
bindEvents () {
let self = this;
window.addEventListener('online', e => {
console.log(e);
self.updateOnlineStatus();
});
window.addEventListener('offline', e => {
console.log(e);
self.updateOnlineStatus();
});
if(navigator.connection) {
let timer = null;
navigator.connection.addEventListener('change', e => {
timer && clearTimeout(timer);
timer = setTimeout(() => {
self.updateConnectionStatus(e);
}, 500);
});
}
},
updateOnlineStatus () {
this.online = navigator.onLine;
console.log(this.online);
if(this.online) {
this.$message.success('有网啦❛‿˂̵✧');
} else {
this.$message.error('掉线啦（>_<）...');
}
},
updateConnectionStatus (e) {
console.log(e);
this.connection = navigator.connection || initConnection;
this.$notify.info({
title: '提示',
message: '当前网络：' + (e ? e.currentTarget.type : this.connection.type || 'unknown')
});
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
切换或者断开网络试试？
浏览器不支持navigator.connection
无法获取当前所用网络
不支持navigator.connection，看不到效果？大概是这样子的（截图）——
总结
由于兼容性的限制，现在能做的功能真的很——有——限。
但还是让我们寄希望于——未来😄。