Web中的网络问题

navigator.onLine 用于检测浏览器是否连网，true/false；
navigator.connection 用于检测网络状况；

    {
        onchange: null,
        effectiveType: "4g",
        rtt: 50,
        downlink: 2,
        saveData: false
    }

通过 navigator.connection 可以判断出online，fast 3g，slow 3g，和 offline，这四种状态下的effectiveType分别为4g，3g，2g，slow-2g（rtt，downlink均为0）。

rtt 和 downlink 反映网络状况，比effectiveType更加具象且更能反映当前网络的真实情况。
常见网络情况：

网络状况    rtt(ms)     downlink(Mbit/s)
online      100           2.2
fast 3g     600           1.55
slow 3g     2150          0.4
offline      0             0

注意：rtt 和 downlink 不是定值，而是实时变化的。online时，可能它现在是rtt 100ms，2.2Mb/s，下一秒就变成125ms，2.1Mb/s了。
rtt：连接预估往返时间，单位ms，值为四舍五入到 25ms 的最接近倍数（x%25 === 0），值越小网速就越快。在Web Worker中可用；
downlink：带宽预估值，单位Mbit/s(注意是Mbit，不是MByte)，值也是四舍五入到最接近 25bit/s 的倍数。一般带宽速度越快，信道上可以传输更多数。值越大网速越快。在Web Worker中可用。

草案（Draft）阶段NetworkInformation API
无论是rtt，还是downlink，都是这个草案中的内容。 除此之外还有downlinkMax，saveData，type等属性。 所以要注意兼容问题。
NetworkInformation继承自EventTarget，可以通过监听change事件去做一些响应。

• 监听网络状况的变更事件

var connection = navigator.connection
var type = connection.effectiveType

function updateConnectionStatus() {
  console.log("网络状况从 " + type + " 切换至" + connection.effectiveType)
  type = connection.effectiveType
}

connection.addEventListener('change', updateConnectionStatus)

• 监听断网、连网的状况

window.addEventListener('online',  ev => {
    console.log('online: ', ev)
})
window.addEventListener('offline',  ev => {
    console.log('offline: ', ev)
})