Cordova 網(wǎng)絡(luò)信息

此插件提供有關(guān)設(shè)備網(wǎng)絡(luò)的信息。

步驟1 - 安裝網(wǎng)絡(luò)信息插件

要安裝此插件，我們將打開命令提示符并運(yùn)行以下代碼 -

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-network-information

步驟2 - 添加按鈕

讓我們?cè)?strong> index.html 中創(chuàng)建一個(gè)按鈕，用于獲取有關(guān)網(wǎng)絡(luò)的信息。

<button id = "networkInfo">INFO</button>

步驟3 - 添加事件監(jiān)聽器

我們將在 index.js 中的 onDeviceReady 函數(shù)中添加三個(gè)事件偵聽器。一個(gè)將監(jiān)聽我們之前創(chuàng)建的按鈕的點(diǎn)擊，另外兩個(gè)將監(jiān)聽連接狀態(tài)的更改。

document.getElementById("networkInfo").addEventListener("click", networkInfo);
document.addEventListener("offline", onOffline, false);
document.addEventListener("online", onOnline, false);

步驟4 - 創(chuàng)建函數(shù)

networkInfo 函數(shù)將返回有關(guān)當(dāng)前網(wǎng)絡(luò)連接的信息，一旦點(diǎn)擊按鈕。 我們正在呼叫 type 方法。其他功能是 onOffline 和 onOnline 。這些功能正在偵聽連接更改，任何更改都將觸發(fā)相應(yīng)的警報(bào)消息。

function networkInfo() {
   var networkState = navigator.connection.type;
   var states = {};
	
   states[Connection.UNKNOWN]  = 'Unknown connection';
   states[Connection.ETHERNET] = 'Ethernet connection';
   states[Connection.WIFI]     = 'WiFi connection';
   states[Connection.CELL_2G]  = 'Cell 2G connection';
   states[Connection.CELL_3G]  = 'Cell 3G connection';
   states[Connection.CELL_4G]  = 'Cell 4G connection';
   states[Connection.CELL]     = 'Cell generic connection';
   states[Connection.NONE]     = 'No network connection';

   alert('Connection type: ' + states[networkState]);
}

function onOffline() {
   alert('You are now offline!');
}

function onOnline() {
   alert('You are now online!');
}

當(dāng)我們啟動(dòng)連接到網(wǎng)絡(luò)的應(yīng)用程序時(shí)，在線功能將觸發(fā)警報(bào)。

如果我們按 INFO 按鈕，警報(bào)將顯示我們的網(wǎng)絡(luò)狀態(tài)。

如果我們從網(wǎng)絡(luò)斷開連接，將調(diào)用 onOffline 函數(shù)。