官方文檔

English Document

demo地址

[demo]http://mjs.sinaimg.cn/wap/online/cms/article/cm/network.html)
demo來(lái)源于地址http://www.w3cmark.com/2016/442.html

摘要

在設(shè)備的使用中，這個(gè)Network Information API用于 web 嘗試處理網(wǎng)絡(luò)連接信息。

用例與需求

本文檔嘗試處理來(lái)自于Review of Apps that Use Network Information的需求，如下：

• 提供獲取當(dāng)前網(wǎng)絡(luò)連接的類型在系統(tǒng)與網(wǎng)絡(luò)有交互的時(shí)候,這個(gè)信息需要在頁(yè)面加載完畢立刻被提供，或者在盡可能接近加載完畢狀態(tài)提供
• 提供一種腳本可以被通知到的方式如果這個(gè)連接類型有改變。這樣就可以允許開發(fā)者動(dòng)態(tài)的改變DOM且或者通知用戶他們的網(wǎng)絡(luò)類型有變化（這種變化會(huì)在某種程度上影響這他們）

使用用例（官方文檔）

EXAMPLE 1
//得到網(wǎng)絡(luò)鏈接類型
var type = navigator.connection.type;

// 在第一次網(wǎng)絡(luò)跳躍的時(shí)候得到下行最大比特率
var max = navigator.connection.downlinkMax;

function changeHandler(e) {
  // 網(wǎng)絡(luò)鏈接改變時(shí)處理函數(shù)
}

// 注冊(cè)網(wǎng)絡(luò)鏈接改變事件
navigator.connection.onchange = changeHandler;

// 另一種注冊(cè)方式
navigator.connection.addEventListener('change', changeHandler);

連接類型

• bluetooth
  藍(lán)牙連接
• cellular
  A cellular connection (e.g., EDGE, HSPA, LTE, etc.).
• ethernet
  以太網(wǎng)鏈接
  none
• No network connection.
  沒(méi)有網(wǎng)絡(luò)鏈接.等同于 navigator.onLine === false
• mixed
  用戶代理用的多個(gè)鏈接類型
• other
  鏈接類型未知
• unknown
  用戶代理建立了鏈接，但是不能夠或者不愿意確定潛在的網(wǎng)絡(luò)連接類型
• wifi
  wifi連接
• wimax
  wifimax連接
  以上的鏈接類型都可以通過(guò)ConnectionType枚舉

ConnectionType枚舉

enum ConnectionType {
    "bluetooth",
    "cellular",
    "ethernet",
    "mixed",
    "none",
    "other",
    "unknown",
    "wifi",
    "wimax"
};

以上為嘗試翻譯的官方文檔前幾行

個(gè)人測(cè)試說(shuō)明:

由于在業(yè)務(wù)中最為關(guān)心當(dāng)前網(wǎng)絡(luò)狀態(tài)是否為wifi，所以僅判斷了當(dāng)前APP是否支持navigator.connection.type判斷其是否可以正則匹配到wifi
測(cè)試結(jié)果整理表格如下：

當(dāng)前測(cè)試初步結(jié)論：

• navigator.connectionAPI不支持：
  iphone（微信、微博、UC、QQ瀏覽器、百度瀏覽器）安卓（QQ瀏覽器）
• 支持navigator.connection但不能獲取到具體網(wǎng)絡(luò)type：
  安卓（百度瀏覽器）
• 支持navigator.connection且可獲取到type(大多數(shù))：
  安卓(UC、微信、微博)

當(dāng)前測(cè)試特例

支持navigator.connection且可獲取到type(大多數(shù))中特例如下：

[type:unknown]屬于支持navigator.connection但不能獲取到具體網(wǎng)絡(luò)type
華為p9不返回wifi字樣 而是通過(guò)數(shù)字標(biāo)識(shí)

當(dāng)前測(cè)試結(jié)論：

由于測(cè)試手機(jī)有限，并未覆蓋到安卓各種版本與機(jī)型,若有錯(cuò)誤還請(qǐng)?zhí)岢?br> 暫認(rèn)為安卓UC、微博支持較好
微信在安卓和ios另有可以獲取的方式

微信/QQ獲取狀態(tài)說(shuō)明

微信和qq我們可以通過(guò)另一種方式在安卓、IOS拿到網(wǎng)絡(luò)狀態(tài)
微信UA如下：

/*
 * 微信ua  
 */
Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_2 like Mac OS X) AppleWebKit/603.2.4 (KHTML, like Gecko) Mobile/14F89 MicroMessenger/6.5.12 NetType/WIFI Language/zh_CN
/*
 * QQua
 */
Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_2 like Mac OS X) AppleWebKit/603.2.4 (KHTML, like Gecko) Mobile/14F89 QQ/7.1.5.428 V1_IPH_SQ_7.1.5_1_APP_A Pixel/750 Core/UIWebView NetType/WIFI QBWebViewType/1

Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_2 like Mac OS X) AppleWebKit/603.2.4 (KHTML, like Gecko) Mobile/14F89 QQ/7.1.5.428 V1_IPH_SQ_7.1.5_1_APP_A Pixel/750 Core/UIWebView NetType/2G QBWebViewType/1

從UA中看到我們可以通過(guò)如下方式進(jìn)行判斷:

if(/NetType/.test(ua)){
    var type = ua.match(/NetType\/(\S*)/);
    network_state = type[1];
}

其它補(bǔ)充

官方文檔中給了其它的方法，但是基本都不支持，所以也就沒(méi)有進(jìn)行方法的使用和測(cè)試，對(duì)應(yīng)的文檔也沒(méi)有翻譯但是其中的onchange事件是可以被支持的，通過(guò)監(jiān)控onchange事件監(jiān)控到網(wǎng)絡(luò)的改變。
通過(guò)枚舉navigator.connection屬性發(fā)現(xiàn)：UC瀏覽器只支持ontypechange，其它有的使用onchange，有的使用ontypechange，所以使用時(shí)需要做兼容處理。

【如有錯(cuò)誤還請(qǐng)指正】