Android设备（非安卓浏览器/Chrome）navigator.onLine及离线事件异常

问题现象 #

在Android Galaxy设备上启用飞行模式（或处于无网络环境）时，使用window.online/offline事件监听网络状态会出现异常：先触发offline事件提示无网络，但随即触发online事件提示网络恢复；同时navigator.onLine属性始终返回true。此前该功能正常，经多台设备验证，暂未发现系统或应用更新导致此问题。

涉及代码示例 #

window.addEventListener('offline', function (e) {
    alert('offline');
});
window.addEventListener('online', function (e) {
    alert('online');
});

以及navigator.onLine始终返回true的异常表现。

问题原因推测 #

大概率是Galaxy设备的系统或内置WebView存在网络状态检测逻辑bug：

• 飞行模式切换时，系统可能误将本地虚拟网络（如蓝牙共享、设备内部通信链路）判定为有效网络，导致WebView接收到错误的网络状态信号；
• WebView对系统网络状态的监听机制出现偏差，没有正确区分“本地链路连通”和“公网可访问”两种状态，误报在线状态。

临时解决方案 #

1. 主动检测公网连通性 #

放弃依赖WebView原生的navigator.onLine和在线/离线事件，改为定时请求一个极小的公网资源（如空白base64图片），根据请求结果判断真实网络状态：

// 检测真实网络连通性
async function isNetworkAvailable() {
    try {
        // 请求一个无跨域问题的空白资源
        const res = await fetch('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=', { mode: 'no-cors' });
        return true;
    } catch (err) {
        return false;
    }
}

// 定时检测并更新状态，可根据需求调整间隔
setInterval(async () => {
    const status = await isNetworkAvailable();
    // 这里替换为你的业务逻辑，比如更新UI或触发自定义事件
    console.log(status ? '网络正常' : '无网络连接');
}, 3000);

2. 混合开发场景下借助原生能力 #

如果是Hybrid应用，可通过Android原生代码获取系统真实网络状态（判断是否有可用的移动数据或WiFi连接），再通过JS桥将状态传递给前端，避免WebView的错误判断。

3. 设备特殊兼容 #

通过UA检测识别Galaxy设备，对这类设备单独使用主动检测逻辑，其他设备保留原有事件监听，减少对正常设备的影响：

const isGalaxyDevice = /Galaxy/i.test(navigator.userAgent);
if (isGalaxyDevice) {
    // 启用主动检测逻辑
    setInterval(async () => {
        const status = await isNetworkAvailable();
        // 处理状态
    }, 3000);
} else {
    // 保留原有事件监听
    window.addEventListener('offline', () => alert('offline'));
    window.addEventListener('online', () => alert('online'));
}

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