Cordova - 網路資訊

此外掛提供有關裝置網路的資訊。

步驟 1 - 安裝網路資訊外掛

要安裝此外掛，我們將開啟命令提示符並執行以下程式碼：

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

步驟 2 - 新增按鈕

讓我們在index.html中建立一個按鈕，該按鈕將用於獲取有關網路的資訊。

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

步驟 3 - 新增事件監聽器

我們將在index.js中的onDeviceReady函式內新增三個事件監聽器。一個將偵聽我們之前建立的按鈕的點選事件，另外兩個將偵聽連線狀態的變化。

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

步驟 4 - 建立函式

networkInfo函式將在點選按鈕後返回有關當前網路連線的資訊。我們正在呼叫type方法。其他函式是onOffline和onOnline。這些函式正在偵聽連線變化，任何變化都會觸發相應的警報訊息。

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!');
}

當我們連線到網路啟動應用程式時，onOnline函式將觸發警報。

如果我們按下INFO按鈕，警報將顯示我們的網路狀態。

如果我們斷開網路連線，則將呼叫onOffline函式。