好的断网处理会让人很舒适：lol的断线重连，王者荣耀的断线重连 可以确保游戏的继续进行
坏的断网处理甚至不处理会出bug：比如我手上的项目就出了个bug 业务人员表示非常苦恼
网络问题一直是一个很值得关注的问题。
比如在慢网情况下，增加loading避免重复发请求，使用promise顺序处理请求的返回结果，或者是增加一些友好的上传进度提示等等。
那么大家有没有想过断网情况下该怎么做呢？比如说网络正常->断网->网络正常。
其实我一直也没想过，直到组里的测试测出一个断网导致的bug，让我意识到重度依赖网络请求的前端，在断网情况下可能会出现严重的bug。
因此我将在这里记录一下自己对系统断网情况下的处理，一方面避免bug产生，一方面保证用户及时在应用内知道网络已经断开连接
概览
用于检测浏览器是否连网的navigator.onLine
用于检测网络状况的navigator.connection
断网事件"offline"和连网事件"online"
断网处理项目实战
思路和效果
断网处理组件使用
断网处理组件详情
发现
参考资料
概览
为了构建一个 “断网（offline）可用”的web应用，你需要知道应用在什么时候是断网（offline）的。
不仅仅要知道什么时候断网，更要知道什么时候网络恢复正常（online）。
可以分解陈本下面两种常见情况：
你需要知道用户何时online，这样你可以与服务器之间re-sync（重新同步）。
你需要知道用户何时offline，这样你可以将你未发出的请求过一段时间再向服务器发出。
通常可以通过online/offline事件去做这个事情。
用于检测浏览器是否连网的navigator.onLine
navigator.onLine
true online
false offline
可以通过network的online选项切换为offline，打印navigator.onLine验证。
当浏览器不能连接到网络时，这个属性会更新。规范中是这样定义的：
The navigator.onLine attribute must return false if the user agent will not contact the network when the user follows links or when a script requests a remote page (or knows that such an attempt would fail)...
用于检测网络状况的navigator.connection
在youtube观看视频时，自动检测网络状况切换清晰度是如何做到的呢？
国内的视频网站也会给出一个切换网络的提醒，该如何去检测呢？
也就是说，有没有办法检测网络状况？判断当前网络是流畅，拥堵，繁忙呢？
可以通过navigator.connection，属性包括effectiveType，rtt，downlink和变更网络事件change。继承自NetworkInformation API。
navigator.connection
online状态下运行console.log(navigator.connection);
{
onchange: null,
effectiveType: "4g",
rtt: 50,
downlink: 2,
saveData: false }
通过navigator.connection可以判断出online，fast 3g，slow 3g，和offline，这四种状态下的effectiveType分别为4g，3g，2g，4g（rtt，downlink均为0）。
rtt和downlink是什么？NetworkInformation是什么？
这是两个反映网络状况的参数，比type更加具象且更能反映当前网络的真实情况。
常见网络情况rtt和downlink表
网络状况 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
值为四舍五入到25毫秒的最接近倍数（就是说这个值x%25===0，可以观察常见网络情况rtt和downlink表）
值越小网速越快。类似ping的time吧
在Web Worker中可用
downlink
带宽预估值
单位为Mbit/s（注意是Mbit，不是MByte。）
值也是四舍五入到最接近的25比特/秒的倍数（就是说这个值x%25===0，可以观察常见网络情况rtt和downlink表）
一般越宽速度越快，也就是，信道上可以传输更多数。（吐槽一句，学过的通信原理还蛮有用。）
值越大网速越快。类似高速一般比国道宽。
在Web Worker中可用
草案（Draft）阶段NetworkInformation API
无论是rtt，还是downlink，都是这个草案中的内容。
除此之外还有downlinkMax，saveData，type等属性。
更多资料可以查询：NetworkInformation
如何检测网络变化去做出响应呢？
NetworkInformation继承自EventTarget，可以通过监听change事件去做一些响应。
本文只代表个人观点！
原文链接：http://www.662p.com/article/2973.html