怎么处理浏览器的断网情况

本篇内容主要讲解“怎么处理浏览器的断网情况”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么处理浏览器的断网情况”吧!

让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：域名与空间、网站空间、营销软件、网站建设、马山网站维护、网站推广。

概览

为了构建一个 “断网（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);

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

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

var connection = navigator.connection；  var type = connection.effectiveType;  function updateConnectionStatus() {    console.log("网络状况从 " + type + " 切换至" + connection.effectiveType);    type = connection.effectiveType;  }  connection.addEventListener('change', updateConnectionStatus);

监听变更之后，我们可以弹一个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会有兼容性的问题）

• 也可以通过标签注册事件

例子