如何處理瀏覽器的斷網情況？
好的斷網處理會讓人很舒適：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的避免屏閃
