Cordova - 网络信息

网络信息插件（cordova-plugin-network-information）提供有关设备蜂窝网络（cellular）和 Wi-Fi 连接的信息。它允许您确定设备是否连接到网络、连接类型（例如 Wi-Fi、2G、3G、4G），并监听网络状态的变化（在线/离线）。

步骤 1 - 安装网络信息插件

要将此插件添加到您的项目，请打开您的终端或命令提示符，导航到您的 Cordova 项目的根目录，然后执行：

your-cordova-project/ cordova plugin add cordova-plugin-network-information

步骤 2 - 添加 UI 元素（可选）

为了演示，我们在 index.html 中添加一个按钮来检查当前网络状态，并添加一个 div 来显示信息：

<body>
    <button id="checkNetworkBtn">Check Network Connection</button>
    <div id="networkStatus">Network status will appear here.</div>
</body>

步骤 3 - 添加事件监听器

在您的 www/js/index.js 文件中，onDeviceReady 函数内，您应该监听 online 和 offline 事件。此外，还要为按钮添加一个监听器。

// 在 www/js/index.js 中的 onDeviceReady 函数内
document.addEventListener('online', onOnline, false);
document.addEventListener('offline', onOffline, false);
document.getElementById('checkNetworkBtn').addEventListener('click', checkNetworkConnection);

步骤 4 - 实现网络功能

定义处理网络状态变化的以及检查连接类型的回调函数。

const networkStatusDisplay = document.getElementById('networkStatus');

function checkNetworkConnection() {
    // navigator.connection.type 需要该插件
    if (typeof navigator.connection === 'undefined' || typeof Connection === 'undefined') {
        networkStatusDisplay.textContent = 'Network Information plugin not available.';
        return;
    }

    const networkState = navigator.connection.type;
    const 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';

    const currentStatus = states[networkState] || 'Connection type not recognized';
    networkStatusDisplay.textContent = 'Connection Type: ' + currentStatus;
    console.log('Connection type: ' + currentStatus);
}

function onOnline() {
    networkStatusDisplay.textContent = 'Device is Online. Checking connection type...';
    // 在 online 事件触发后检查连接类型
    checkNetworkConnection();
    alert('您现在已在线！'); // 用于演示的简单通知
}

function onOffline() {
    networkStatusDisplay.textContent = 'Device is Offline.';
    alert('您现在已离线！'); // 用于演示的简单通知
}

// 在设备就绪时检查初始状态是一个好的做法
// app.js (onDeviceReady 或类似函数中):
// checkNetworkConnection(); // 调用此函数来显示初始状态

工作原理

应用启动时，如果设备已连接到网络，onOnline 函数可能会被触发（不同平台的初始化时间行为可能略有差异）。networkStatus div 会显示“Device is Online…”（设备在线…），然后在 checkNetworkConnection 运行后显示特定的连接类型，如“WiFi connection”（Wi-Fi 连接）。

如果您点击“Check Network Connection”（检查网络连接）按钮，checkNetworkConnection 函数将执行并使用当前的连接类型更新 networkStatus div。例如，如果通过 Wi-Fi 连接，它可能会显示：“Connection Type: WiFi connection”（连接类型：Wi-Fi 连接）。

如果设备断开所有网络连接（例如，打开飞行模式或禁用 Wi-Fi/蜂窝数据），onOffline 事件将触发，onOffline 函数将执行，networkStatus div 将显示“Device is Offline.”（设备离线。）。同时会弹出一个提示框，显示“You are now offline!”（您现在已离线！）。

重新连接到网络会触发 onOnline 事件及其对应的函数。

实际应用

在离线时阻止网络请求，以避免错误并提供更好的用户体验（UX）。
在用户离线或重新在线时通知他们。
仅在 Wi-Fi 连接下允许数据同步，以节省蜂窝数据流量。
根据网络速度调整应用功能（例如，在 2G 等较慢连接下加载低质量图片）。

请始终确保您的应用能优雅地处理离线场景，以提供良好的用户体验。