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

好的斷網處理會讓人很舒適：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事件去做一些響應。

例如可以獲得網路狀況的變更？

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以及iView的Spin，Notice元件封裝出離線處理元件，在需要到的頁面引入即可。

思路和效果

只要做到斷網提醒+遮罩，上線提醒-遮罩即可。

監聽offline，斷網給出提醒和遮罩：網路已斷開，請檢查網路連線。
監聽online，連網給出提醒和遮罩：網路已連線。

斷網處理元件使用

<OfflineHandle
    :offlineTitle = "斷網處理標題"
    :desc="斷網處理描述"
    :onlineTitle="連網提醒"
>
</OfflineHandle>

斷網處理元件詳情

<!--OfflineHandle.vue-->
<template>
  <div v-if="spin" class="offline-mark">
    <Spin size="large" fix>
      <h2>{{offlineTitle}}</h2>

      <p>{{desc}}</p>
    </Spin>
  </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 {
      spin: false,
    };
  },
  mounted() {
    window.addEventListener('offline', this.eventHandle);
    window.addEventListener('online', this.eventHandle);
  },
  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.spin = event.type === 'offline';
      }, 1500);
    },
  },
};
</script>

<style lang="scss" scoped>
.offline-mark {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  z-index: 9999;
  transition: position 2s;
}
/deep/.ivu-spin-fix {
  text-align: left;
  font-size: 20px;
  h2 {
    color: rgba(0, 0, 0, 0.8);
  }
  p {
    margin-top: 20px;
    color: red;
    font-weight: bold;
  }
}
</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的避免屏閃

參考資料：

期待和大家交流，共同進步，歡迎大家加入我建立的與前端開發密切相關的技術討論小組：

SegmentFault技術圈:ES新規範語法糖

SegmentFault專欄：趁你還年輕，做個優秀的前端工程師

知乎專欄：趁你還年輕，做個優秀的前端工程師

Github部落格: 趁你還年輕233的個人部落格

前端開發QQ群：660634678

微信公眾號：生活在瀏覽器裡的我們 / excellent_developers

努力成為優秀前端工程師！