如何处理浏览器的断网情况？

好的断网处理会让人很舒适：lol的断线重连，王者荣耀的断线重连 可以确保游戏的继续进行

坏的断网处理甚至不处理会出bug：比如我手上的项目就出了个bug 业务人员表示非常苦恼

网络问题一直是一个很值得关注的问题。

比如在慢网情况下，增加loading避免重复发请求，使用promise顺序处理请求的返回结果，或者是增加一些友好的上传进度提示等等。

那么大家有没有想过断网情况下该怎么做呢？比如说网络正常->断网->网络正常。

其实我一直也没想过，直到组里的测试测出一个断网导致的bug，让我意识到重度依赖网络请求的前端，在断网情况下可能会出现严重的bug。

因此我将在这里记录一下自己对系统断网情况下的处理，一方面避免bug产生，一方面保证用户及时在应用内知道网络已经断开连接

概览

  • 用于检测浏览器是否连网的navigator.onLine
  • 用于检测网络状况的navigator.connection
  • 断网事件"offline"和连网事件"online"
  • 断网处理项目实战
    • 思路和效果
    • 断网处理组件使用
    • 断网处理组件详情
    • 发现
  • 参考资料

概览

为了构建一个 “断网（offline）可用”的web应用，你需要知道应用在什么时候是断网（offline）的。

不仅仅要知道什么时候断网，更要知道什么时候网络恢复正常（online）。

可以分解陈本下面两种常见情况：

  1. 你需要知道用户何时online，这样你可以与服务器之间re-sync（重新同步）。
  2. 你需要知道用户何时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);

 
 
 
 
    
  
  
  
  
  1. { 
    2. 
  
  
  
  
  2.     onchange: null, 
    3. 
  
  
  
  
  3.     effectiveType: "4g", 
    4. 
  
  
  
  
  4.     rtt: 50, 
    5. 
  
  
  
  
  5.     downlink: 2, 
    6. 
  
  
  
  
  6.     saveData: false 
    7. 
  
  
  
  
  7. } 
    8.

通过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事件去做一些响应。

例如可以获得网络状况的变更？

 
 
 
 
    
  
  
  
  
  1. var connection = navigator.connection； 
    2. 
  
  
  
  
  2. var type = connection.effectiveType; 
    3. 
  
  
  
  
  3. function updateConnectionStatus() { 
    4. 
  
  
  
  
  4.   console.log("网络状况从 " + type + " 切换至" + connection.effectiveType); 
    5. 
  
  
  
  
  5.   type = connection.effectiveType; 
    6. 
  
  
  
  
  6. } 
    7. 
  
  
  
  
  7. connection.addEventListener('change', updateConnectionStatus);
    8.

 监听变更之后，我们可以弹一个Modal提醒用户，也可以出一个Notice通知用户网络有变化，或者可以更高级得去自动切换清晰度（这个应该比较难）。

引出NetworkInformation的概念，只是想起一个抛砖引玉的作用。这种细粒度的网络状况检测，可以结合具体需求去具体实现。

在这篇博文中，我们只处理断网和连网两种情况，下面来看断网事件"offline"和连网事件"online"。

断网事件"offline"和连网事件"online"

浏览器有两个事件："online" 和 "offline".

这两个事件会在浏览器在online mode和offline mode之间切换时，由页面的发射出去。

事件会按照以下顺序冒泡：document.body -> document -> window。

事件是不能去取消的（开发者在代码上不能手动变为online或者offline，开发时使用开发者工具可以）。

注册上下线事件的几种方式

最最建议window+addEventListener的组合。

  • 通过window或document或document.body和addEventListener(Chrome80仅window有效)
  • 为document或document.body的.ononline或.onoffline属性设置一个js函数。（注意，使用window.ononline和window.onoffline会有兼容性的问题）
  • 也可以通过标签注册事件

例子
 
    •   
     
 
 
 
      
  
  
  
  
    1. window.addEventListener('load', function() { 
      2. 
  
  
  
  
    2.   var status = document.getElementById("status"); 
      3. 
  
  
  
  
    3.   var log = document.getElementById("log"); 
      4. 
  
  
  
  
    4.   function updateOnlineStatus(event) { 
      5. 
  
  
  
  
    5.     var condition = navigator.onLine ? "online" : "offline"; 
      6. 
  
  
  
  
    6.     status.innerHTML = condition.toUpperCase(); 
      7. 
  
  
  
  
    7.     log.insertAdjacentHTML("beforeend", "Event: " + event.type + "; Status: " + condition); 
      8. 
  
  
  
  
    8.   } 
      9. 
  
  
  
  
    9.   window.addEventListener('online',  updateOnlineStatus); 
      10. 
  
  
  
  
    10.   window.addEventListener('offline', updateOnlineStatus); 
      11. 
  
  
  
  
    11. });
      12.

    其中insertAdjacentHTML是在标签节点的邻近位置插入，可以查阅：DOM进阶之insertAdjacentHTML

    断网处理项目实战

    基于vue以及iView的Spin，Notice组件封装出离线处理组件，在需要到的页面引入即可。

    思路和效果

    只要做到断网提醒+遮罩，上线提醒-遮罩即可。

    断网处理组件使用

     
 
 
 
      
  
  
  
  
    1. 
  
  
  
  
    2.     :offlineTitle = "断网处理标题" 
      3. 
  
  
  
  
    3.     :desc="断网处理描述" 
      4. 
  
  
  
  
    4.     :onlineTitle="连网提醒" 
      5. 
  
  
  
  
    5. > 
      6. 
  
  
  
  
    6.  
      7.

    断网处理组件详情

     
 
 
 
      
  
  
  
  
    1.  
      2. 
  
  
  
  
    2.  
      3. 
  
  
  
  
    3.  
      4. 
  
  
  
  
    4.  
      5. 
  
  
  
  
    5. .offline-mark { 
      6. 
  
  
  
  
    6.   position: fixed; 
      7. 
  
  
  
  
    7.   top: 0; 
      8. 
  
  
  
  
    8.   left: 0; 
      9. 
  
  
  
  
    9.   right: 0; 
      10. 
  
  
  
  
    10.   bottom: 0; 
      11. 
  
  
  
  
    11.   background-color: #ccc; 
      12. 
  
  
  
  
    12.   z-index: 9999; 
      13. 
  
  
  
  
    13.   transition: position 2s; 
      14. 
  
  
  
  
    14. } 
      15. 
  
  
  
  
    15. /deep/.ivu-spin-fix { 
      16. 
  
  
  
  
    16.   text-align: left; 
      17. 
  
  
  
  
    17.   font-size: 20px; 
      18. 
  
  
  
  
    18.   h2 { 
      19. 
  
  
  
  
    19.     color: rgba(0, 0, 0, 0.8); 
      20. 
  
  
  
  
    20.   } 
      21. 
  
  
  
  
    21.   p { 
      22. 
  
  
  
  
    22.     margin-top: 20px; 
      23. 
  
  
  
  
    23.     color: red; 
      24. 
  
  
  
  
    24.     font-weight: bold; 
      25. 
  
  
  
  
    25.   } 
      26. 
  
  
  
  
    26. } 
      27. 
  
  
  
  
    27.  
      28.

    发现

    手上的项目只运行在Chrome浏览器，只有为window设置offline和online才生效。

    运行环境："Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.149 Safari/537.36

    当前标题：如何处理浏览器的断网情况？
    转载源于：http://www.shufengxianlan.com/qtweb/news37/467187.html

    网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

    猜你还喜欢下面的内容

    品牌网站建设知识

    各行业网站

    力比特机械　　 　微信小程序开发　　 　成都展柜定制　　 　成都定制网站　　 　wap手机网站　　 　格蓝特设备　　 　自适应网站设计　　 　成都小谭网创广告　　 　成都联通服务器托管　　 　禾巨建站　　 　响应式网站建设公司　　 　成都移动机房　　 　创新互联重庆　　 　新网创想　　 　贵阳托管服务器　　 　网站制作　　 　高端网站设计　　 　达州网站建设　　 　钢筋机械设备　　 　广安园林景观设计