快捷導(dǎo)航

通過(guò)JS判斷聯(lián)網(wǎng)類(lèi)型和連接狀態(tài)的實(shí)現(xiàn)代碼

更新時(shí)間：2015年04月01日 23:13:14 作者：洪磊

這篇文章主要介紹了通過(guò)JS判斷聯(lián)網(wǎng)類(lèi)型和連接狀態(tài)的實(shí)現(xiàn)代碼,需要的朋友可以參考下

中國(guó)的移動(dòng)網(wǎng)絡(luò)環(huán)境復(fù)雜，為了給用戶(hù)帶去更好訪(fǎng)問(wèn)體驗(yàn)，開(kāi)發(fā)者希望能了解用戶(hù)當(dāng)前的聯(lián)網(wǎng)方式，然后給用戶(hù)一個(gè)符合當(dāng)前網(wǎng)絡(luò)環(huán)境的請(qǐng)求結(jié)果。

W3C的規(guī)范中給出了一個(gè)方法來(lái)獲得現(xiàn)在的網(wǎng)絡(luò)狀態(tài)navigator.connection；根據(jù)Working Draft 29 November 2012協(xié)議規(guī)范我們可以從接口中獲得bandwidth（帶寬，M/s）和metered兩個(gè)參數(shù)的值；還提供了一個(gè)監(jiān)聽(tīng)方法，來(lái)時(shí)刻監(jiān)聽(tīng)接入環(huán)境的變化情況?，F(xiàn)實(shí)中我們發(fā)現(xiàn)很多瀏覽器并沒(méi)有返回bandwidth值，而且遵守了Working Draft 07 June 2011的協(xié)議返回給我們type（類(lèi)型，wifi/2g/3g/4g）。

我們接下來(lái)就看看各家的支持情況

Android 2.3+ Browser	UC	Dolphin	QQ瀏覽器	Baidu	Firefox	Chrome	Opera Mini	Maxthon
Yes	No*	Yes	Yes*	Yes	Yes(New)	No	No	Yes

說(shuō)明下在iPhone中任何瀏覽器都無(wú)法得到相關(guān)信息。

通過(guò)上面的說(shuō)明，我們發(fā)現(xiàn)還是可以通過(guò)這個(gè)參數(shù)了解很大一部分用戶(hù)的聯(lián)網(wǎng)情況的，并且為他們提供更加優(yōu)質(zhì)的體驗(yàn)。
接下來(lái)我們重點(diǎn)說(shuō)說(shuō)各瀏覽器的返回情況。

大部分瀏覽器會(huì)返回一個(gè)int型的類(lèi)型，其中的特例是QQ瀏覽器，返回的就是類(lèi)型名稱(chēng)，對(duì)應(yīng)關(guān)系如下

返回值	QQ返回值	類(lèi)型
0	unknown	UNKNOWN
1	ethernet	ETHERNET
2	wifi	WIFI
3	2g	CELL_2G
4	3g	CELL_3G
5	4g	CELL_4G（中國(guó)現(xiàn)在也會(huì)出現(xiàn)這個(gè)值，是hspa+）
?	none	NONE

接下去是一個(gè)更大的特例，這就是firefox，他使用了新版規(guī)范，所以返回的是bandwidth；不過(guò)很奇怪的是只要是wifi或3G他就返回20，如果是2G返回的就是0.1953125；每次都一樣不管現(xiàn)在網(wǎng)絡(luò)狀態(tài)到底是多少。這個(gè)問(wèn)題還會(huì)繼續(xù)跟進(jìn)。

給大家提供一個(gè)demo地址：http://demo.jb51.net/js/2015/net.html
Demo中對(duì)不支持connection的瀏覽器直接返回了{(lán)type:0}，這樣就很便利解決了某些瀏覽器不支持的問(wèn)題；對(duì)于不支持又能上網(wǎng)的瀏覽器處理為“unknown”當(dāng)然也是合乎情理的。

很多工程師覺(jué)得這個(gè)功能支持還不好，還是先不使用的好；但是我覺(jué)得只要錯(cuò)誤能被處理，風(fēng)險(xiǎn)能被把控，為什么不給那些先天優(yōu)秀的客戶(hù)提供更友好的體驗(yàn)?zāi)亍?/p>

今天同學(xué)說(shuō)到讓后端判斷速度，這個(gè)可能有點(diǎn)難；不過(guò)確實(shí)可以通過(guò)每次的異步請(qǐng)求去得到用戶(hù)大概的速度（加載的時(shí)間和文件大小其實(shí)前端都能得到），然后在選擇性的提供某些服務(wù)，之后也準(zhǔn)備向這個(gè)方向上多思考下。

您可能感興趣的文章: