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

本文由团队成员一护撰写，已受权涂鸦大前端独家使用，包括但不限于编辑、标注原创等权益。javascript

好的断网处理会让人很温馨：lol的断线重连，王者荣耀的断线重连能够确保游戏的继续进行css

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

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

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

那么你们有没有想过断网状况下该怎么作呢？好比说网络正常->断网->网络正常。java

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

所以我将在这里记录一下本身对系统断网状况下的处理，一方面避免bug产生，一方面保证用户及时在应用内知道网络已经断开链接web

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

概览

为了构建一个 “断网（offline）可用”的web应用，你须要知道应用在何时是断网（offline）的。不只仅要知道何时断网，更要知道何时网络恢复正常（online）。能够分解陈本下面两种常见状况：promise

你须要知道用户什么时候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事件去作一些响应。

例如能够得到网络情况的变动？

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之间切换时，由页面的<body>发射出去。

事件会按照如下顺序冒泡：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会有兼容性的问题）
也能够经过标签注册事件<body ononline="onlineCb" onoffline="offlineCb"></body>

例子

<div id="status"></div>
<div id="log"></div>
复制代码

window.addEventListener('load', function() {
  var status = document.getElementById("status");
  var log = document.getElementById("log");

  function updateOnlineStatus(event) {
    var condition = navigator.onLine ? "online" : "offline";
    status.innerHTML = condition.toUpperCase();

    log.insertAdjacentHTML("beforeend", "Event: " + event.type + "; Status: " + condition);
  }

  window.addEventListener('online',  updateOnlineStatus);
  window.addEventListener('offline', updateOnlineStatus);
});
复制代码

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

断网处理项目实战

能够基于vue，react封装出离线处理组件，在须要到的页面引入便可。

思路和效果

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

监听offline，断网给出提醒和遮罩：网络已断开，请检查网络链接。
监听online，连网给出提醒和遮罩：网络已链接。

断网处理组件使用

<OfflineHandle
    offlineTitle = "断网处理标题"
    desc="断网处理描述"
    onlineTitle="连网提醒"
/>
复制代码

Vue组件

在线演示demo：codesandbox.io/s/offline-h…

<!--OfflineHandle.vue-->
<template>
  <div v-if="mask" class="offline-mask">
    <h2 class="offline-mask-title">{{ offlineTitle }}</h2>

    <p class="offline-mask-desc">{{ desc }}</p >
  </div>
</template>

<script> export default { name: "offline-handle", props: { offlineTitle: { type: String, default: "网络已断开，请检查网络链接。", }, onlineTitle: { type: String, default: "网络已链接", }, desc: { type: String, default: "", }, duration: { type: Number, default: 4.5, }, }, data() { return { mask: false, }; }, mounted() { window.addEventListener("offline", this.eventHandle); window.addEventListener("online", this.eventHandle); console.log(this.desc); }, beforeDestroy() { window.removeEventListener("offline", this.eventHandle); window.removeEventListener("online", this.eventHandle); }, methods: { eventHandle(event) { const type = event.type === "offline" ? "error" : "success"; this.$Notice[type]({ title: type === "error" ? this.offlineTitle : this.onlineTitle, desc: type === "error" ? this.desc : "", duration: this.duration, }); setTimeout(() => { this.mask = event.type === "offline"; }, 1500); }, }, }; </script>

<style lang="css" scoped> .offline-mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; z-index: 9999; transition: position 2s; display: flex; align-items: center; justify-content: center; flex-direction: column; } .offline-mask-title { color: rgba(0, 0, 0, 0.8); } .offline-mask-desc { margin-top: 20px; color: red; font-weight: bold; } </style>
复制代码

React组件

在线demo：codesandbox.io/s/offline-h…

// offlineHandle.js
import React, { useState, useEffect } from "react";
import { notification } from "antd";
import "antd/dist/antd.css";
import "./index.css";

const OfflineHandle = (props) => {
  const {
    offlineTitle = "网络已断开，请检查网络链接。",
    onlineTitle = "网络已链接",
    desc,
    duration = 4.5
  } = props;
  const [mask, setMask] = useState(false);

  const eventHandler = (event) => {
    const type = event.type === "offline" ? "error" : "success";
    console.log(desc, "desc");
    openNotification({
      type,
      title: type === "error" ? offlineTitle : onlineTitle,
      desc: type === "error" ? desc : "",
      duration
    });
    setTimeout(() => {
      setMask(event.type === "offline");
    }, 1500);
  };

  const openNotification = ({ type, title, desc, duration }) => {
    notification[type]({
      message: title,
      description: desc,
      duration
    });
  };

  useEffect(() => {
    window.addEventListener("offline", eventHandler);
    window.addEventListener("online", eventHandler);
    return () => {
      window.removeEventListener("offline", eventHandler);
      window.removeEventListener("online", eventHandler);
    };
  }, []);

  const renderOfflineMask = () => {
    if (!mask) return null;
    return (
      <div className="offline-mask"> <h2 className="offline-mask-title">{offlineTitle}</h2> <p className="offline-mask-desc">{desc}</p > </div> ); }; return <>{renderOfflineMask()}</>;
};

export default OfflineHandle;
复制代码

index.css文件与vue的style标签中的内容一致。

发现

offline和online事件：window有效，document和document.body设置无效

手上的项目只运行在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

为position增长2s的transition的避免屏闪

参考资料：