通過JS判斷聯(lián)網(wǎng)類型和連接狀態(tài)的實現(xiàn)代碼
中國的移動網(wǎng)絡(luò)環(huán)境復雜,為了給用戶帶去更好訪問體驗,開發(fā)者希望能了解用戶當前的聯(lián)網(wǎng)方式,然后給用戶一個符合當前網(wǎng)絡(luò)環(huán)境的請求結(jié)果。
W3C的規(guī)范中給出了一個方法來獲得現(xiàn)在的網(wǎng)絡(luò)狀態(tài)navigator.connection;根據(jù)Working Draft 29 November 2012協(xié)議規(guī)范我們可以從接口中獲得bandwidth(帶寬,M/s)和metered兩個參數(shù)的值;還提供了一個監(jiān)聽方法,來時刻監(jiān)聽接入環(huán)境的變化情況?,F(xiàn)實中我們發(fā)現(xiàn)很多瀏覽器并沒有返回bandwidth值,而且遵守了Working Draft 07 June 2011的協(xié)議返回給我們type(類型,wifi/2g/3g/4g)。
我們接下來就看看各家的支持情況
Android 2.3+ Browser | UC | Dolphin | QQ瀏覽器 | Baidu | Firefox | Chrome | Opera Mini | Maxthon |
Yes | No* | Yes | Yes* | Yes | Yes(New) | No | No | Yes |
說明下在iPhone中任何瀏覽器都無法得到相關(guān)信息。
通過上面的說明,我們發(fā)現(xiàn)還是可以通過這個參數(shù)了解很大一部分用戶的聯(lián)網(wǎng)情況的,并且為他們提供更加優(yōu)質(zhì)的體驗。
接下來我們重點說說各瀏覽器的返回情況。
大部分瀏覽器會返回一個int型的類型,其中的特例是QQ瀏覽器,返回的就是類型名稱,對應關(guān)系如下
返回值 | QQ返回值 | 類型 |
0 | unknown | UNKNOWN |
1 | ethernet | ETHERNET |
2 | wifi | WIFI |
3 | 2g | CELL_2G |
4 | 3g | CELL_3G |
5 | 4g | CELL_4G(中國現(xiàn)在也會出現(xiàn)這個值,是hspa+) |
? | none | NONE |
接下去是一個更大的特例,這就是firefox,他使用了新版規(guī)范,所以返回的是bandwidth;不過很奇怪的是只要是wifi或3G他就返回20,如果是2G返回的就是0.1953125;每次都一樣不管現(xiàn)在網(wǎng)絡(luò)狀態(tài)到底是多少。這個問題還會繼續(xù)跟進。
給大家提供一個demo地址:http://demo.jb51.net/js/2015/net.html
Demo中對不支持connection的瀏覽器直接返回了{type:0},這樣就很便利解決了某些瀏覽器不支持的問題;對于不支持又能上網(wǎng)的瀏覽器處理為“unknown”當然也是合乎情理的。
很多工程師覺得這個功能支持還不好,還是先不使用的好;但是我覺得只要錯誤能被處理,風險能被把控,為什么不給那些先天優(yōu)秀的客戶提供更友好的體驗呢。
今天同學說到讓后端判斷速度,這個可能有點難;不過確實可以通過每次的異步請求去得到用戶大概的速度(加載的時間和文件大小其實前端都能得到),然后在選擇性的提供某些服務(wù),之后也準備向這個方向上多思考下。
- 五種js判斷是否為整數(shù)類型方式
- js判斷undefined類型,undefined,null, 的區(qū)別詳細解析
- 客戶端js判斷文件類型和文件大小即限制上傳大小
- js判斷數(shù)據(jù)類型如判斷是否為數(shù)組是否為字符串等等
- JS通過分析userAgent屬性來判斷瀏覽器的類型及版本
- JavaScript判斷輸入是否為數(shù)字類型的方法總結(jié)
- js 判斷各種數(shù)據(jù)類型的簡單方法(推薦)
- 利用js判斷瀏覽器類型(是否為IE,Firefox,Opera瀏覽器)
- JS如何判斷瀏覽器類型和詳細區(qū)分IE各版本瀏覽器
- javascript中如何判斷類型匯總
相關(guān)文章
JS實現(xiàn)div內(nèi)部的文字或圖片自動循環(huán)滾動代碼
在某些情況下需要這樣的功能:使用JS實現(xiàn)div內(nèi)部的文字或圖片自動循環(huán)滾動,接下來為大家詳細介紹下實現(xiàn)方法,感興趣的朋友可以參考下哈2013-04-04