如何监测网络，守卫用户体验？亲，你不孤单

2023-12-03 04:34:46

前端网络状态监听：实时追踪网络变化

在现代 Web 应用中，随时掌握网络状态至关重要。无论是通知用户互联网连接不佳，还是根据网络状况调整应用程序行为，实时监测网络状态变化都能带来更好的用户体验和程序稳定性。本文将深入探讨如何在前端使用 JavaScript 实现网络状态监听。

检测网络状态：navigator.onLine

navigator.onLine 属性是一个布尔值，指示浏览器当前是否处于联机状态。该属性会在浏览器联机或离线时自动更新。

// 检测网络状态变化
if (navigator.onLine) {
  console.log('浏览器联机');
} else {
  console.log('浏览器离线');
}

监听网络状态变化：window.addEventListener

window.addEventListener() 方法允许您监听任何事件，包括网络状态变化。

// 监听网络状态变化
window.addEventListener('online', () => {
  console.log('浏览器联机');
});

window.addEventListener('offline', () => {
  console.log('浏览器离线');
});

network-change 事件

network-change 事件在网络状态发生变化时触发。您可以通过 window.addEventListener 方法监听此事件。

// 监听网络状态变化
window.addEventListener('network-change', () => {
  console.log('网络状态发生变化');
});

网络状态变化示例

想象一下一个需要在线才能正常运行的 Web 应用。您可以使用网络状态监听来显示一个横幅，通知用户他们处于离线状态，并禁用某些需要互联网连接的功能。

// 监听网络状态变化
window.addEventListener('network-change', () => {
  if (navigator.onLine) {
    // 显示应用已联机
    document.querySelector('#banner').style.display = 'none';
    document.querySelectorAll('.requires-internet').forEach(element => {
      element.disabled = false;
    });
  } else {
    // 显示应用已离线
    document.querySelector('#banner').style.display = 'block';
    document.querySelectorAll('.requires-internet').forEach(element => {
      element.disabled = true;
    });
  }
});