html 网络状态API监听

2026-04-22 23:00:08 1523阅读 0评论

用 HTML 监听网络状态：在页面与心跳间保持稳态

现代网页像人一样，也需要感知“心跳”是否稳定。网络波动时，页面加载、请求与体验都会受影响。用 HTML 监听网络状态，能让我们在浏览器端做粗粒度的断网/离线检测，并结合具体场景触发重试、降级或提示，让页面更稳健地应对突发状况。

一、基础原理与浏览器原生支持

浏览器提供了原生的网络状态接口，核心在 navigator.onLine 和 window.addEventListener('online', ...)、window.addEventListener('offline', ...)。这些事件源来自浏览器自身的网络状态变化，区别于用户端网络（如切换4G/5G）导致的请求失败。

navigator.onLine：返回布尔值，表示浏览器是否处于在线状态。
online/offline 事件：页面或应用状态从离线切换到在线，或从在线切换到离线时触发。

二、使用场景与触发条件

这类监听更适合在以下场景落地：

页面首次加载或关键资源加载完成后，快速判断是否联网，决定是否发起请求。
长轮询或定时心跳的客户端，用在线状态决定是否发送心跳。
在线状态下多次请求失败后，触发离线降级或重试策略。
需要提示用户网络不稳或暂时无法访问时的交互。

三、核心实现思路

1) 在关键操作前先做可达性判断

<script>
  function canFetch() {
    return navigator.onLine;
  }

  // 例如在发起请求前做一次可达性检查
  if (canFetch()) {
    fetchData();
  } else {
    alert('暂时没有网络，请稍后重试');
  }
</script>

2) 监听 online/offline 并配合重试/降级

<script>
  window.addEventListener('online', () => {
    console.log('恢复联网，尝试重试关键请求');
    retryPendingRequests();
  });

  window.addEventListener('offline', () => {
    console.log('进入离线，准备降级处理');
    applyOfflineFallback();
  });

  function retryPendingRequests() {
    // 遍历待重试的请求队列，满足条件的重新发起
  }

  function applyOfflineFallback() {
    // 替换为缓存内容或本地数据，或关闭非必要请求
  }
</script>

3) 前端轮询的心跳开关

<script>
  const heartbeatInterval = 60000; // 60秒

  function startHeartbeat() {
    if (navigator.onLine) {
      setInterval(() => {
        sendHeartbeat();
      }, heartbeatInterval);
    }
  }

  function stopHeartbeat() {
    clearInterval(window.heartbeatInterval);
  }
</script>

四、注意事项与边界

与navigator.userAgentOnline不同：navigator.onLine 检测的是浏览器到网络的可达性，不等同于 HTTP 请求是否成功。
平台差异：部分旧浏览器或部分浏览器模式可能不支持或延迟触发 online/offline 事件。
事件时机：页面从离线到在线时，事件顺序可能影响请求重试策略的设计。
稳定性权衡：频繁监听与重试会增加客户端负担，需根据业务重要性与频率做取舍。