Cordova Network Information Plugin异常及无网检测问题求助

为什么navigator.connection.type显示undefined？ #

最常见的原因有两个：

• 未在deviceready事件后调用API：Cordova的所有插件API都必须等待设备初始化完成（即deviceready事件触发）才能访问。如果你在页面加载后直接调用navigator.connection.type，此时插件还未完成注入，自然会得到undefined。
• 插件初始化异常：可能是插件安装不完整，或者平台（Android/iOS）的WebView原生支持了部分标准Navigator.connection API，导致插件的自定义属性未正确覆盖或注入。

为什么effectiveType在无网络时仍显示3G/4G？ #

effectiveType是标准Web API的属性，它的作用是根据最近的网络性能预估连接速度等级，而不是实时检测网络是否连通。即使设备断开网络，它会保留最后一次检测到的网络类型值，所以完全不能用来判断无网状态。

正确检测网络状态的方法 #

1. 务必在deviceready事件后执行网络检测

这是Cordova开发的核心规则之一，示例代码如下：

// 等待设备就绪
document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {
    // 此时插件已完全初始化，可以安全访问API
    const networkType = navigator.connection.type;
    console.log("当前网络类型:", networkType);
}

2. 使用插件提供的API检测无网状态

cordova-plugin-network-information插件专门提供了Connection.NONE常量来标识无网状态，同时支持online/offline事件监听连接变化：

document.addEventListener("deviceready", () => {
    // 初始检测网络状态
    checkNetworkStatus();

    // 监听网络连接恢复
    document.addEventListener("online", () => {
        alert("网络已恢复");
        checkNetworkStatus();
    }, false);

    // 监听网络断开
    document.addEventListener("offline", () => {
        alert("网络已断开，请检查连接");
    }, false);
});

function checkNetworkStatus() {
    const networkState = navigator.connection.type;
    // 映射网络类型到可读文本
    const stateMap = {
        [Connection.NONE]: "无网络连接",
        [Connection.WIFI]: "WiFi网络",
        [Connection.CELL_2G]: "2G蜂窝网络",
        [Connection.CELL_3G]: "3G蜂窝网络",
        [Connection.CELL_4G]: "4G蜂窝网络",
        [Connection.CELL]: "未知蜂窝网络"
    };
    console.log("当前网络状态:", stateMap[networkState] || "未知网络");
}

3. 排查插件安装问题

如果上述方法仍无效，可以尝试重新安装插件：

# 卸载插件
cordova plugin remove cordova-plugin-network-information
# 重新安装
cordova plugin add cordova-plugin-network-information

安装完成后，运行cordova plugin list确认插件已成功添加。

内容的提问来源于stack exchange，提问作者Tasfia Sharmin