HTML5 提供了强大的网络状态检测功能，主要通过 navigator.onLine 属性和 online、offline 事件来实现，结合 navigator.connection API（部分浏览器支持）可以更精确地监控网络环境的变化，这些功能为开发者构建离线优先应用、优化用户体验提供了重要支持。
基础网络状态检测：navigator.onLine 属性
navigator.onLine 是一个布尔值属性，直接返回当前设备的网络连接状态：true 表示设备已连接到网络，false 表示设备处于离线状态，该属性的值会受到浏览器网络状态变化的影响，但需注意其局限性——它仅能判断设备是否连接到网络，无法区分网络类型（如 Wi-Fi、4G）或网络质量（如带宽、延迟）。
使用示例：
console.log(navigator.onLine); // 初始状态，可能不准确
网络状态变化监听：online 与 offline 事件
为了实时捕获网络状态的变化,HTML5 提供了 online 和 offline 事件，当网络连接从离线变为在线时，会触发 online 事件；反之，从在线变为离线时触发 offline 事件，通过监听这两个事件，开发者可以动态调整应用行为，例如在离线时缓存数据，在线时同步数据。
事件监听示例：
window.addEventListener('online', () => {
console.log('网络已连接');
// 执行在线逻辑，如同步数据
});
window.addEventListener('offline', () => {
console.log('网络已断开');
// 执行离线逻辑，如启用缓存模式
});
注意事项：
- 事件触发依赖于浏览器对网络状态的准确判断,某些情况下可能存在延迟（如代理服务器或 VPN 导致的状态误判）。
- 在页面首次加载时,
navigator.onLine的值可能不准确，建议结合事件监听使用。
高级网络状态检测：NetworkInformation API
navigator.connection（或 navigator.mozConnection、navigator.webkitConnection）是 NetworkInformation 接口的实例，提供了更详细的网络连接信息，包括网络类型、有效带宽、往返时间（RTT）等，该 API 在移动端浏览器中支持较好，桌面端支持有限。
主要属性与方法：
| 属性/方法 | 类型 | 说明 |
|---|---|---|
effectiveType |
string | 网络连接类型，如 "4g"、"3g"、"2g"、"slow-2g"、"wifi" |
downlink |
number | 下行速度（Mbps），估算值 |
rtt |
number | 往返时间（ms），估算值 |
saveData |
boolean | 是否开启省流模式 |
onchange |
Event | 网络状态变化时触发的事件 |
使用示例：
if ('connection' in navigator) {
const connection = navigator.connection;
console.log('网络类型:', connection.effectiveType);
console.log('下行速度:', connection.downlink + ' Mbps');
console.log('省流模式:', connection.saveData ? '开启' : '关闭');
connection.addEventListener('change', () => {
console.log('网络状态变化，当前类型:', connection.effectiveType);
});
} else {
console.log('当前浏览器不支持 NetworkInformation API');
}
实际应用场景
- 离线优先应用：通过检测网络状态，优先使用 Service Worker 缓存的数据，并在网络恢复后同步更新。
- 用户体验优化：在弱网环境下降低图片分辨率、减少非关键资源加载，或提示用户切换至 Wi-Fi。
- 数据同步策略：离线时暂存用户操作数据，在线后批量同步至服务器。
兼容性与注意事项
navigator.onLine与事件：所有现代浏览器均支持，但早期 IE 浏览器可能需要window.ononline和window.onoffline兼容。NetworkInformationAPI：支持情况因浏览器而异，需在使用前进行特性检测（如if ('connection' in navigator)）。- 网络状态准确性：浏览器对网络状态的判断可能受系统网络配置影响（如虚拟机、网络代理），建议结合多个指标综合判断。
相关问答FAQs
问题1：navigator.onLine 返回 true 是否一定表示应用可以正常访问网络？
解答：不一定。navigator.onLine 仅表示设备已连接到网络，但可能存在网络不稳定、代理服务器故障或防火墙限制等情况，设备连接到 Wi-Fi 但路由器未联网时，navigator.onLine 仍为 true，但实际无法访问外部资源，关键操作建议通过发送请求（如 fetch 或 XMLHttpRequest）测试网络连通性。
问题2：如何检测网络从 Wi-Fi 切换到移动数据？
解答：可通过 NetworkInformation API 的 effectiveType 属性监听网络类型变化，示例代码如下：
if ('connection' in navigator) {
const connection = navigator.connection;
const handleNetworkChange = () => {
console.log('当前网络类型:', connection.effectiveType);
if (connection.effectiveType === '4g') {
console.log('网络已切换至移动数据');
} else if (connection.effectiveType === 'wifi') {
console.log('网络已切换至 Wi-Fi');
}
};
connection.addEventListener('change', handleNetworkChange);
// 初始调用一次
handleNetworkChange();
}
需注意,该 API 在桌面端浏览器支持有限，且不同浏览器对网络类型的分类可能存在差异（如部分浏览器不区分 3G/4G）。
