Cordova-獲取移動端網絡狀態

原創

2020-02-21 10:41

1,安裝插件：

cordova plugin add cordova-plugin-network-information

2,Connection的狀態：

Connection.UNKNOWN
Connection.ETHERNET
Connection.WIFI
Connection.CELL_2G
Connection.CELL_3G
Connection.CELL_4G
Connection.CELL
Connection.NONE

3,用法：實際項目中判斷是否有無網絡代碼：

const appBizName = 'com.zpmc.xiongan.chuxing';
const isApp = navigator.userAgent.indexOf(appBizName) >= 0;
/**
 * 發送消息(cordova)
 * @private
 */
function ready(callback) {
    return new Promise((resolve, reject) => {
        if (!isApp || ready.deviceReadied === true) {
            callback(resolve, reject);
            return;
        }
        document.addEventListener('deviceready', () => {
            ready.deviceReadied = true;
            callback(resolve, reject);
        }, false);
    });
}

	/**
     * 是否網絡在線
     */
    isOffLine() {
        return ready(resolve => {
            console.log('aiApp', isApp, 'online', navigator.onLine);
            if (isApp) {
                const networkState = navigator.connection.type;
                // Toast(`networkState:${networkState},navigator.connection:${navigator.connection}`);
                if (networkState == window.Connection.NONE) {
                    resolve(true);
                } else {
                    resolve(false);
                }
            } else if (navigator.onLine) {
                resolve(false);
            } else {
                resolve(true);
            }
            console.log('aiApp', isApp, 'online', navigator.onLine);
        });
    }

思路：1，根據navigator.connection.type的類型比對Connection常量的到網絡的狀態

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

checkConnection();

2，直接監聽無網絡狀態或者有網狀態（監聽這些事件必須都是在deviceready之後）：

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

function onOffline() {
    // Handle the offline event
}

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

function onOnline() {
    // Handle the online event
}

參考：
cordova中文文檔之網絡狀態