如何處理瀏覽器的斷網狀況？

本文由團隊成員一護撰寫，已受權塗鴉大前端獨家使用，包括但不限於編輯、標註原創等權益。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的避免屏閃

參考資料：