js 怎样检测网络状态

navigator.onLine

online

offline

navigator.onLine

online

offline

navigator.onLine

true

false

navigator.onLine

true

online

offline

window

// 初始化时检查一次
console.log('当前网络状态:', navigator.onLine ? '在线' : '离线');

// 监听网络上线事件
window.addEventListener('online', () => {
  console.log('网络已连接！');
  // 可以在这里执行一些网络恢复后的操作，比如重新同步数据、刷新UI
  alert('网络已恢复，您的操作可以继续了。');
});

// 监听网络离线事件
window.addEventListener('offline', () => {
  console.log('网络已断开！');
  // 在这里可以提示用户网络异常，或者启用离线模式
  alert('网络已断开，请检查您的网络连接。');
});

// 一个简单的函数封装，方便在应用中调用
function checkNetworkStatus() {
  return navigator.onLine;
}

// 示例：每隔一段时间检查
// setInterval(() => {
//   console.log('定时检查:', checkNetworkStatus() ? '在线' : '离线');
// }, 5000);

navigator.onLine

navigator.onLine

fetch

no_content

async function isActuallyOnline() {
  if (!navigator.onLine) {
    // 如果navigator.onLine已经是false，那肯定离线了
    return false;
  }

  try {
    // 尝试请求一个不会被缓存的小文件或一个无内容的端点
    // 注意：这里的URL需要是你确定能访问的、稳定的公共资源
    const response = await fetch('https://www.google.com/favicon.ico?_t=' + Date.now(), {
      method: 'HEAD', // 只请求头部，更快
      cache: 'no-store', // 确保不走缓存
      mode: 'no-cors' // 避免CORS问题，但这样就无法读取响应状态码
                       // 如果需要状态码，则必须确保CORS策略允许
    });
    // 如果使用no-cors模式，response.ok总是true，response.status总是0
    // 这种情况下，只要请求没有抛出错误，就认为网络是通的
    return true;
  } catch (error) {
    console.warn('网络连通性检查失败:', error);
    return false;
  }
}

// 结合事件监听使用
window.addEventListener('online', async () => {
  console.log('网络似乎已连接，正在进行实际检查...');
  if (await isActuallyOnline()) {
    console.log('确认：已连接到互联网！');
    // 执行互联网恢复后的操作
  } else {
    console.warn('警告：设备已连接网络，但无法访问互联网。');
    // 提示用户网络受限
  }
});

window.addEventListener('offline', () => {
  console.log('网络已断开，无需进行实际检查。');
});

// 首次加载时也检查一次
(async () => {
  console.log('初始化检查：', await isActuallyOnline() ? '已连接互联网' : '未连接互联网');
})();

alert

// contexts/NetworkStatusContext.js
import React, { createContext, useState, useEffect, useContext } from 'react';

const NetworkStatusContext = createContext();

export const NetworkStatusProvider = ({ children }) => {
  const [isOnline, setIsOnline] = useState(navigator.onLine);
  const [isActuallyOnline, setIsActuallyOnline] = useState(navigator.onLine); // 更准确的互联网连接状态

  // 模拟一个实际的网络检查函数
  const checkActualConnection = async () => {
    if (!navigator.onLine) {
      setIsActuallyOnline(false);
      return;
    }
    try {
      // 这里的URL替换为你的实际检查点
      await fetch('https://www.google.com/favicon.ico?_t=' + Date.now(), { method: 'HEAD', cache: 'no-store', mode: 'no-cors' });
      setIsActuallyOnline(true);
    } catch (error) {
      setIsActuallyOnline(false);
    }
  };

  useEffect(() => {
    const handleOnline = () => {
      setIsOnline(true);
      // 延迟检查，避免网络刚恢复但DNS还没解析好等情况
      setTimeout(checkActualConnection, 1000);
    };
    const handleOffline = () => {
      setIsOnline(false);
      setIsActuallyOnline(false);
    };

    window.addEventListener('online', handleOnline);
    window.addEventListener('offline', handleOffline);

    // 首次加载时也进行实际检查
    checkActualConnection();
    const intervalId = setInterval(checkActualConnection, 30 * 1000); // 每30秒检查一次实际网络

    return () => {
      window.removeEventListener('online', handleOnline);
      window.removeEventListener('offline', handleOffline);
      clearInterval(intervalId);
    };
  }, []);

  return (
    <NetworkStatusContext.Provider value={{ isOnline, isActuallyOnline }}>
      {children}
    </NetworkStatusContext.Provider>
  );
};

export const useNetworkStatus = () => useContext(NetworkStatusContext);

// 在组件中使用：
// import { useNetworkStatus } from '../contexts/NetworkStatusContext';
// function MyComponent() {
//   const { isOnline, isActuallyOnline } = useNetworkStatus();
//   return (
//     <div>
//       <p>设备网络状态: {isOnline ? '在线' : '离线'}</p>
//       <p>互联网连接状态: {isActuallyOnline ? '已连接' : '未连接'}</p>
//       {!isActuallyOnline && <div style={{ color: 'red' }}>网络连接不稳定或已断开，部分功能可能受限。</div>}
//     </div>
//   );
// }