前端能监听网络切换吗（不是断开又连接）

Question

比如连着WiFi，把手机热点打开，然后点开电脑-WiFi，在不先断开当前WiFi连接的情况下直接连接热点，这种网络切换前端能监听吗？

Answer 1

在前端开发中，监听网络状态的变化是一个常见的需求，尤其是在需要根据网络状态调整用户体验的场景中。虽然浏览器提供了一些API来帮助我们检测网络状态，但它们并不完美，并且存在一些限制。

首先，我们可以使用 navigator.onLine 属性来检测当前的网络状态。这个属性返回一个布尔值，true 表示设备已连接到网络，false 表示设备处于离线状态。然而，这个属性并不能及时反映网络状态的变化，例如，即使用户已经断开Wi-Fi，navigator.onLine 可能仍然返回 true，直到浏览器尝试加载一个网络资源并失败为止。

为了更实时地监听网络状态的变化，我们可以监听 window 对象的 online 和 offline 事件。当网络连接状态发生变化时，浏览器会触发这些事件。通过添加事件监听器，我们可以在网络状态变化时执行相应的逻辑：

window.addEventListener('online', function(e) {
    console.log('Network connection has been established.');
    // 执行网络连接上的操作，例如重新同步数据或更新UI
});

window.addEventListener('offline', function(e) {
    console.log('Network connection has been lost.');
    // 执行网络断开的操作，例如提醒用户或暂停数据同步
});

此外，navigator.connection API 提供了更详细的网络连接信息，包括 downlink（网络下行速度估计）、effectiveType（基于网络条件估计的网络类型）、rtt（往返时间估计）等。这个API还允许我们监听 change 事件，以便在网络连接信息发生变化时做出响应：

if ('connection' in navigator) {
    navigator.connection.addEventListener('change', function() {
        console.log('Network connection has changed.');
        // 根据新的网络状态调整应用行为
    });
}

需要注意的是，navigator.connection API 的兼容性不如 navigator.onLine，可能在某些浏览器或环境中不可用。

在实际应用中，我们可以根据网络状态的变化来优化用户体验，例如在网络较差时降低图片质量，或在网络恢复时重新加载数据。这些技术可以帮助我们构建更加健壮和用户友好的Web应用。