怎么處理瀏覽器的斷網(wǎng)情況

本篇內(nèi)容主要講解“怎么處理瀏覽器的斷網(wǎng)情況”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“怎么處理瀏覽器的斷網(wǎng)情況”吧!

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名與空間、網(wǎng)站空間、營銷軟件、網(wǎng)站建設(shè)、馬山網(wǎng)站維護(hù)、網(wǎng)站推廣。

概覽

為了構(gòu)建一個(gè) “斷網(wǎng)（offline）可用”的web應(yīng)用，你需要知道應(yīng)用在什么時(shí)候是斷網(wǎng)（offline）的。

不僅僅要知道什么時(shí)候斷網(wǎng)，更要知道什么時(shí)候網(wǎng)絡(luò)恢復(fù)正常（online）。

可以分解陳本下面兩種常見情況：

你需要知道用戶何時(shí)online，這樣你可以與服務(wù)器之間re-sync（重新同步）。
你需要知道用戶何時(shí)offline，這樣你可以將你未發(fā)出的請求過一段時(shí)間再向服務(wù)器發(fā)出。

通?？梢酝ㄟ^online/offline事件去做這個(gè)事情。

用于檢測瀏覽器是否連網(wǎng)的navigator.onLine

navigator.onLine

true online
false offline

可以通過network的online選項(xiàng)切換為offline，打印navigator.onLine驗(yàn)證。

當(dāng)瀏覽器不能連接到網(wǎng)絡(luò)時(shí)，這個(gè)屬性會(huì)更新。規(guī)范中是這樣定義的：

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)...

用于檢測網(wǎng)絡(luò)狀況的navigator.connection

在youtube觀看視頻時(shí)，自動(dòng)檢測網(wǎng)絡(luò)狀況切換清晰度是如何做到的呢？

國內(nèi)的視頻網(wǎng)站也會(huì)給出一個(gè)切換網(wǎng)絡(luò)的提醒，該如何去檢測呢？

也就是說，有沒有辦法檢測網(wǎng)絡(luò)狀況？判斷當(dāng)前網(wǎng)絡(luò)是流暢，擁堵，繁忙呢？

可以通過navigator.connection，屬性包括effectiveType，rtt，downlink和變更網(wǎng)絡(luò)事件change。繼承自NetworkInformation API。

navigator.connection

online狀態(tài)下運(yùn)行console.log(navigator.connection);

{      onchange: null,      effectiveType: "4g",      rtt: 50,      downlink: 2,      saveData: false  }

通過navigator.connection可以判斷出online，fast 3g，slow 3g，和offline，這四種狀態(tài)下的effectiveType分別為4g，3g，2g，4g（rtt，downlink均為0）。

rtt和downlink是什么？NetworkInformation是什么？

這是兩個(gè)反映網(wǎng)絡(luò)狀況的參數(shù)，比type更加具象且更能反映當(dāng)前網(wǎng)絡(luò)的真實(shí)情況。

常見網(wǎng)絡(luò)情況rtt和downlink表

網(wǎng)絡(luò)狀況	rtt(ms)	downlink(Mbit/s)
online	100	2.2
fast 3g	600	1.55
slow 3g	2150	0.4
offline	0	0

注意：rtt和downlink不是定值，而是實(shí)時(shí)變化的。online時(shí)，可能它現(xiàn)在是rtt 100ms，2.2Mb/s，下一秒就變成125ms，2.1Mb/s了。

rtt

連接預(yù)估往返時(shí)間
單位為ms
值為四舍五入到25毫秒的最接近倍數(shù)（就是說這個(gè)值x%25===0，可以觀察常見網(wǎng)絡(luò)情況rtt和downlink表）
值越小網(wǎng)速越快。類似ping的time吧
在Web Worker中可用

downlink

帶寬預(yù)估值
單位為Mbit/s（注意是Mbit，不是MByte。）
值也是四舍五入到最接近的25比特/秒的倍數(shù)（就是說這個(gè)值x%25===0，可以觀察常見網(wǎng)絡(luò)情況rtt和downlink表）
一般越寬速度越快，也就是，信道上可以傳輸更多數(shù)。（吐槽一句，學(xué)過的通信原理還蠻有用。）
值越大網(wǎng)速越快。類似高速一般比國道寬。
在Web Worker中可用

草案（Draft）階段NetworkInformation API

無論是rtt，還是downlink，都是這個(gè)草案中的內(nèi)容。

除此之外還有downlinkMax，saveData，type等屬性。

更多資料可以查詢：NetworkInformation

如何檢測網(wǎng)絡(luò)變化去做出響應(yīng)呢？

NetworkInformation繼承自EventTarget，可以通過監(jiān)聽change事件去做一些響應(yīng)。

例如可以獲得網(wǎng)絡(luò)狀況的變更？

var connection = navigator.connection；  var type = connection.effectiveType;  function updateConnectionStatus() {    console.log("網(wǎng)絡(luò)狀況從 " + type + " 切換至" + connection.effectiveType);    type = connection.effectiveType;  }  connection.addEventListener('change', updateConnectionStatus);

監(jiān)聽變更之后，我們可以彈一個(gè)Modal提醒用戶，也可以出一個(gè)Notice通知用戶網(wǎng)絡(luò)有變化，或者可以更高級(jí)得去自動(dòng)切換清晰度（這個(gè)應(yīng)該比較難）。

引出NetworkInformation的概念，只是想起一個(gè)拋磚引玉的作用。這種細(xì)粒度的網(wǎng)絡(luò)狀況檢測，可以結(jié)合具體需求去具體實(shí)現(xiàn)。

在這篇博文中，我們只處理斷網(wǎng)和連網(wǎng)兩種情況，下面來看斷網(wǎng)事件"offline"和連網(wǎng)事件"online"。

斷網(wǎng)事件"offline"和連網(wǎng)事件"online"

瀏覽器有兩個(gè)事件："online" 和 "offline".

這兩個(gè)事件會(huì)在瀏覽器在online mode和offline mode之間切換時(shí)，由頁面的<body>發(fā)射出去。

事件會(huì)按照以下順序冒泡：document.body -> document -> window。

事件是不能去取消的（開發(fā)者在代碼上不能手動(dòng)變?yōu)閛nline或者offline，開發(fā)時(shí)使用開發(fā)者工具可以）。

注冊上下線事件的幾種方式

最最建議window+addEventListener的組合。

通過window或document或document.body和addEventListener(Chrome80僅window有效)
為document或document.body的.ononline或.onoffline屬性設(shè)置一個(gè)js函數(shù)。（注意，使用window.ononline和window.onoffline會(huì)有兼容性的問題）
也可以通過標(biāo)簽注冊事件<body ononline="onlineCb" onoffline="offlineCb"></body>

例子

怎么處理瀏覽器的斷網(wǎng)情況

<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是在標(biāo)簽節(jié)點(diǎn)的鄰近位置插入，可以查閱：DOM進(jìn)階之insertAdjacentHTML

斷網(wǎng)處理項(xiàng)目實(shí)戰(zhàn)

基于vue以及iView的Spin，Notice組件封裝出離線處理組件，在需要到的頁面引入即可。

思路和效果

只要做到斷網(wǎng)提醒+遮罩，上線提醒-遮罩即可。

監(jiān)聽offline，斷網(wǎng)給出提醒和遮罩：網(wǎng)絡(luò)已斷開，請檢查網(wǎng)絡(luò)連接。
監(jiān)聽online，連網(wǎng)給出提醒和遮罩：網(wǎng)絡(luò)已連接。

怎么處理瀏覽器的斷網(wǎng)情況

斷網(wǎng)處理組件使用

<OfflineHandle      :offlineTitle = "斷網(wǎng)處理標(biāo)題"      :desc="斷網(wǎng)處理描述"      :onlineTitle="連網(wǎng)提醒"  >  </OfflineHandle>

斷網(wǎng)處理組件詳情

<!--OfflineHandle.vue-->  <template>    <div v-if="spin" class="offline-mark">      <Spin size="large" fix>        <h3>{{offlineTitle}}</h3>        <p>{{desc}}</p>      </Spin>    </div>  </template>  <script>  export default {    name: 'offline-handle',    props: {      offlineTitle: {        type: String,        default: '網(wǎng)絡(luò)已斷開，請檢查網(wǎng)絡(luò)連接。',      },      onlineTitle: {        type: String,        default: '網(wǎng)絡(luò)已連接',      },      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;    h3 {      color: rgba(0, 0, 0, 0.8);    }    p {      margin-top: 20px;      color: red;      font-weight: bold;    }  }  </style>

發(fā)現(xiàn)

offline和online事件：window有效，document和document.body設(shè)置無效

手上的項(xiàng)目只運(yùn)行在Chrome瀏覽器，只有為window設(shè)置offline和online才生效。

運(yùn)行環(huán)境："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的避免屏閃

到此，相信大家對“怎么處理瀏覽器的斷網(wǎng)情況”有了更深的了解，不妨來實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

文章名稱：怎么處理瀏覽器的斷網(wǎng)情況
文章鏈接：http://aaarwkj.com/article6/gpiiig.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、虛擬主機(jī)、網(wǎng)站設(shè)計(jì)、企業(yè)建站、品牌網(wǎng)站制作、用戶體驗(yàn)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

怎么處理瀏覽器的斷網(wǎng)情況