Navigator onLine 属性（快速上手）

什么是 Navigator onLine 属性

在现代网页开发中，判断用户是否在线是一个非常常见的需求。无论是加载离线缓存内容，还是提示用户网络异常，都需要一个可靠的方式来检测网络状态。这时，Navigator onLine 属性 就派上了用场。

Navigator onLine 属性 是浏览器原生提供的一个只读属性，属于 window.navigator 对象的一部分。它返回一个布尔值：true 表示用户当前有网络连接，false 则表示没有网络连接。这个属性虽然简单，却非常实用，尤其适合在前端应用中做基础的网络状态监控。

想象一下，你正在用手机刷网页，突然信号断了，页面却没有任何提示。这时候，如果能通过 Navigator onLine 属性 检测到网络断开，并及时提醒用户，体验会好很多。这个属性，就是实现这类功能的基础。

需要注意的是，Navigator onLine 属性 的判断逻辑是基于浏览器对网络连接的“感知”，而不是精确的网络探测。它依赖于浏览器内部的网络状态判断机制，因此在某些特殊场景下可能不够精准，但对大多数日常应用来说已经足够。

语法与基本用法

Navigator onLine 属性 的使用非常简单，语法如下：

const isOnline = navigator.onLine;

这行代码会返回一个布尔值，表示当前网络状态。我们可以通过一个简单的示例来演示：

// 检查用户当前是否在线
if (navigator.onLine) {
  console.log('当前网络正常，可以访问互联网');
} else {
  console.log('当前网络断开，请检查您的网络连接');
}

注释：这里 navigator.onLine 是一个只读属性，不会随网络变化自动更新。它在页面加载时获取一次值，后续需要手动重新读取才能获取最新状态。

这个属性的返回值是 true 或 false，非常直观。但要注意，它只反映“浏览器是否感知到网络连接”，并不表示你一定能成功访问某个具体网站。比如，你可能连接了 Wi-Fi，但路由器防火墙阻止了访问，navigator.onLine 仍然会返回 true。

实际应用场景：实时网络状态监控

在实际开发中，Navigator onLine 属性 最常见的用途之一是实现“网络状态实时监控”。我们可以监听 online 和 offline 事件，结合 Navigator onLine 属性 做出响应。

// 监听网络状态变化事件
window.addEventListener('online', function () {
  console.log('网络已恢复，正在重新连接服务...');
  // 可在此处重试 API 请求、刷新数据等
});

window.addEventListener('offline', function () {
  console.log('检测到网络断开，进入离线模式');
  // 可在此处保存本地数据、提示用户等
});

// 初始状态检查
if (navigator.onLine) {
  console.log('页面加载时网络正常');
} else {
  console.log('页面加载时网络异常，请稍后重试');
}

注释：online 事件在浏览器检测到网络恢复时触发，offline 事件在检测到网络断开时触发。这两个事件是动态的，能实时反映网络状态变化。

这种机制非常适合用于构建渐进式 Web 应用（PWA）或需要离线支持的系统。例如，一个笔记应用可以在网络断开时自动将新笔记保存到本地存储，等网络恢复后再同步到服务器。

与网络请求的结合：优雅处理失败

在实际项目中，Navigator onLine 属性 通常不会单独使用，而是与网络请求逻辑结合，提升用户体验。

比如，当你发起一个 API 请求时，可以先检查网络状态：

function fetchUserData() {
  // 第一步：检查是否在线
  if (!navigator.onLine) {
    alert('当前网络不可用，请检查您的网络连接');
    return; // 直接返回，避免发起无效请求
  }

  // 第二步：发起请求
  fetch('/api/user')
    .then(response => response.json())
    .then(data => {
      console.log('用户数据加载成功:', data);
      // 处理返回数据
    })
    .catch(error => {
      console.error('请求失败:', error);
      // 可以在此处尝试重试，或提示用户
    });
}

// 调用函数
fetchUserData();

注释：这个函数在发起请求前先判断 navigator.onLine，避免在无网络时浪费资源。如果网络不可用，直接弹出提示并终止流程，提升程序健壮性。

更进一步，你还可以在 offline 事件中记录待处理的任务，等网络恢复后再执行：

// 存储待处理的请求
const pendingRequests = [];

function queueRequest(url, options) {
  if (navigator.onLine) {
    // 网络正常，立即执行
    fetch(url, options).catch(handleError);
  } else {
    // 网络断开，加入队列
    pendingRequests.push({ url, options });
    console.log('请求已排队，等待网络恢复');
  }
}

function handleError(error) {
  console.error('请求出错:', error);
}

// 网络恢复后，重新执行队列中的请求
window.addEventListener('online', function () {
  console.log('网络恢复，正在处理待办请求...');
  pendingRequests.forEach(request => {
    fetch(request.url, request.options).catch(handleError);
  });
  pendingRequests.length = 0; // 清空队列
});

注释：这种方式能有效避免因网络波动导致的请求丢失，特别适合需要可靠通信的场景。

局限性与替代方案对比

虽然 Navigator onLine 属性 简单易用，但它也有一些局限性，开发者需要了解：

这些限制意味着，Navigator onLine 属性 更适合做“基础判断”或“用户体验提示”，而不应作为核心业务逻辑的唯一依据。

对于更复杂的网络检测需求，可以考虑以下替代方案：

• 使用 fetch() + 超时机制，主动探测某个健康检查接口（如 /health）
• 引入第三方库如 ping 或 netinfo（适用于 React Native、Electron 等环境）
• 结合 navigator.connection API 获取更详细的网络信息（如连接类型、速度等）

但这些方案通常更复杂，而 Navigator onLine 属性 作为入门首选，依然具有不可替代的价值。

总结与最佳实践建议

Navigator onLine 属性 是一个轻量、高效、原生支持的网络状态检测工具。它不需要引入额外依赖，兼容性好，适合大多数前端项目快速集成。

在使用时，建议遵循以下最佳实践：

1. 不要仅依赖 Navigator onLine 属性 做核心判断：它只是一个“感知”，不能保证服务可用。
2. 结合事件监听：使用 online 和 offline 事件实现动态响应。
3. 在请求前做前置检查：避免在无网络时发起无效请求，节省资源。
4. 提供用户反馈：当网络异常时，及时提示用户，提升体验。
5. 考虑离线缓存策略：结合 localStorage 或 IndexedDB，实现数据暂存与同步。

最终，Navigator onLine 属性 不是万能的，但它是一个值得掌握的“基础工具”。当你在项目中需要判断网络状态时，不妨先从它开始，再逐步升级到更复杂的方案。

在现代 Web 应用中，网络状态的感知能力，是构建稳定、可靠用户体验的第一步。而 Navigator onLine 属性，正是这一步的起点。