你不会还不知道如何监测用户的网络是否在线吧？

开启AdminJS成长之旅！这是我参与「AdminJS日新计划 · 12 月更文挑战」的第11天，点击查看活动详情

我最近遇到一个需求，要给网站添加一个用户网络离线提醒。要求我们要实时监测用户的网络状态，当用户断网了，我们要立马给用户弹出一个断网提醒。

那你可能会问，为什么要做这么一个需求呢？用户断网了，网页不就加载不出来了吗？用户不就知道了吗？

哈哈这确实也是一种情况，但是这只其中一种情况，在现实中更多的情况是，用户在访问我们的网站时发生断网，这时我们的网站数据已经被浏览器缓存，因此在网站上并看不出有什么不同。只有在加载新内容的情况下才会有所区别。那当然这样给用户的体验是十分不好的，所以我们要在用户网络断开的时候，给用户弹出一个弹框。来告诉用户网站新内容加载不出来的原因。来提高用户的体验感

如何检查是否有网络

我们可以利用navigator.onLineAPI 来检测网络状态。navigator.onLine会返回一个布尔值来显示用户是否在线。true表示在线，false表示离线，只要浏览器连接到网络的状态发生改变，属性值就会发生改变

我们可以监听网页加载事件，在网页加载时获取navigator.onLine的值

window.addEventListener('load', () => {
  const status = navigator.onLine;
});

上面的做法在网站最开始加载的时，是可以准确获取用户的网站状态的。但是有一个缺点，就是当获取完用户的网络状态后，网络又发生改变，状态值会无法及时更新！！！

怎么才能解决这个问题呢？

我们可以写一个监听断网和联网来解决这个问题

window.addEventListener('offline', (e) => {
  console.log('offline');
});

window.addEventListener('online', (e) => {
  console.log('online');
});

那我们来做一个完整的小案例来监测我们的用户是否断网

小案例

HTML

<div class="status">
  <div class="offline-msg">你的网络断开了