如何让Cordova仅触发WiFi网络的离线事件？

我之前也碰到过一模一样的问题——默认的offline事件确实是看整体网络连通性，不管你用的是WiFi还是4G，只要还有一种网络能连，它就不会触发。要实现只盯着WiFi断开的需求，咱们可以这么搞：

1. 自定义WiFi状态监听逻辑（最快捷的跨平台方案） #

核心思路是：记录当前WiFi的连接状态，每次网络变化时对比前后状态，只有当WiFi从「连接」变「断开」时，才执行你的离线逻辑。

代码示例 #

// 保存当前WiFi连接状态
let isWifiConnected = false;

// 检查当前是否是WiFi连接
function updateWifiStatus() {
    const networkType = navigator.connection.type;
    // 注意不同平台的WiFi类型值可能不同，比如iOS是"wifia"，Android是"wifi"
    isWifiConnected = ['wifi', 'wifia'].includes(networkType);
}

document.addEventListener('deviceready', function() {
    // 初始化时先检查一次WiFi状态
    updateWifiStatus();

    // 监听系统的网络变化事件
    document.addEventListener('online', handleNetworkChange);
    document.addEventListener('offline', handleNetworkChange);

    // 可选：定时轮询补漏，防止某些场景下系统事件没触发
    setInterval(updateWifiStatus, 3000);
});

function handleNetworkChange() {
    const previousWifiStatus = isWifiConnected;
    // 更新当前WiFi状态
    updateWifiStatus();

    // 只有当之前连WiFi、现在断开时，才触发自定义的WiFi离线逻辑
    if (previousWifiStatus && !isWifiConnected) {
        console.log('WiFi已断开！');
        // 这里执行你的业务逻辑，比如弹窗提示、同步数据等
        // 也可以触发自定义事件，让其他组件监听
        document.dispatchEvent(new CustomEvent('wifioffline'));
    }
}

关键点说明 #

• 要兼容不同平台的网络类型值：比如iOS的WiFi类型是wifia，Android是wifi，可以根据插件文档补充更多可能的取值。
• 定时轮询是兜底方案：有些极端场景下（比如网络切换极快），系统的online/offline事件可能没触发，轮询能保证状态不遗漏。

2. 扩展原生插件（最精准的实时监听） #

如果上面的方案满足不了实时性要求，你可以写一个自定义的Cordova插件，直接监听原生系统的WiFi状态变化：

• Android：监听WifiManager.NETWORK_STATE_CHANGED_ACTION广播，获取WiFi的连接状态
• iOS：使用CNCurrentNetworkInfo监听WiFi网络的变化

这个方案需要一定的原生开发能力，但能做到完全实时的WiFi状态监听，不受整体网络连通性的影响。

3. 注意事项 #

• 测试时要覆盖多种场景：比如先连WiFi+4G，断开WiFi；先连4G再连WiFi然后断开WiFi；初始状态只有WiFi等。
• 权限问题：有些平台需要申请网络状态权限，比如Android的ACCESS_NETWORK_STATE，iOS的相关网络权限配置。

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