maduka的技術日記

由於行動裝置有可能會在網路無法接收到訊號的地方，或是裝置的網路連線根本無法使用

所以Cordova提供了一個plugin來進行目前行動裝置網路連線狀態的確認功能

這個名為"Network Information"的plugin在config.xml之中也可以找到，所以，首先要確認網路功能是否有開啟的話，必須先安裝這個plugin才行

接著，我們在檔案中加上確認網路功能狀態的程式碼

html

<input type="button" id="btnCheckNetwork" value="確認網路狀態" onclick="javascript: funCheckNetworkState();"/>

Javascript

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

function onOffline() {
    alert('裝置離線了');
}

function onOnline() {
    alert('裝置連線了');
}

function funCheckNetworkState()
{
    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]);
}

這樣最主要會呈現的功能，就是在網路狀態online或是offline的時候，除了會顯示alert之外，點選"確認網路狀態"的按鈕時，也會提示目前是使用哪一種網路作為資料傳輸用

有關Network Information的參數以及使用，可以參考https://github.com/apache/cordova-plugin-network-information

其實這個plugin還蠻簡單的，使用上不太容易撞到牆

接著，有了確認網路使用狀態的功能其實是不夠的，因為這個功能無法確認我們要連上的網站，或是api是否可以連得到，所以這部份我們就可以單純的使用xmlhttprequest，來達到我們想要的效果

下面的程式碼，會作到確認是否能夠連到指定網站的效果

html

<p>
    <input type="text" id="txtUrl" value="http://www.msn.com" />
    <input type="button" id="btnCheckWebSite" value="確認網站是否可連線" onclick="javascript: funCheckWebSiteAsync();" />
</p>
<p>Message:<span id="spanMessage"></span></p>

Javascript

function funCheckWebSiteAsync()
{
    var strUrl = document.getElementById("txtUrl").value;
    var xhttp = new XMLHttpRequest();

    xhttp.onreadystatechange = function () {
        if (xhttp.readyState == 4 && xhttp.status == 200)
        {
            document.getElementById("spanMessage").innerHTML = xhttp.responseText;
        }
        else
        {
            console.log("xhttp.status:" + xhttp.status);
            console.log("xhttp.readyState:" + xhttp.readyState);
        }
    }

    xhttp.open("GET", strUrl, true);
    xhttp.send();
}

這樣的程式碼基本上已經可以達到要確認網站是否可以連接到的功能了，利用這兩個plugin以及Javascript本身提供的功能

就可以很容易的在Cordova跨平台裝置上判斷網路的連接狀態，對於需要使用網路上傳或是下載的App來說，這是非常必須的功能

參考檔案下載：connect.zip