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

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

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

如何检查是否有网络

我们可以利用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">你的网络断开了  😢</div>
  <div class="online-msg"> 你已经连上网络 🔗</div>
</div>

CSS

html, body {
    padding: 0;
    margin: 0;
}
.status {
    background: #efefef;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}
.offline .online-msg {
    display: none;
}
.offline .offline-msg {
    display: block;
}
 div {
    padding: 1rem 2rem;
    font-size: 3rem;
    border-radius: 1rem;
    color: white;
    font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
}
 .online-msg {
    background: green;
    display: block;
}
.offline-msg {
    background: red;
    display: none;
}

JavaScript

const status1 = document.querySelector(".status");
//load 监听网页加载事件
window.addEventListener("load", () => {
  const handleNetworkChange = () => {
    if (navigator.onLine) {
      //给status下的offline-msg和online-msg添加类名样式
      status1.classList.remove("offline");
    } else {
      //给status下的offline-msg和online-msg添加类名样式
      status1.classList.add("offline");
    }
  };
// online该事件在浏览器开始在线工作时触发
  window.addEventListener("online", handleNetworkChange);
  // offline该事件在浏览器开始离线工作时触发。
  window.addEventListener("offline", handleNetworkChange);
});

或者你可以使用第三方库Offline.js

Offline.js

Offline.js 是一个 JavaScript 库，用于检测用户的在线和离线状态。它可以方便地监听网络连接状态的改变，并触发相应的事件。该库还提供了一些其他功能，如警报用户离线状态、离线页面缓存

监测网络连接状态：Offline.js 使用轮询的方式来监测网络连接状态。它通过定期发送网络请求（默认是 AJAX 请求）到预定义的服务器端点来检测用户的在线状态。如果请求成功返回，则用户在线；如果请求失败或超时，则用户离线。
事件和回调：当用户的在线或离线状态发生变化时，Offline.js 会触发相应的事件。这些事件包括 up（从离线切换到在线状态）和 down（从在线切换到离线状态）。开发者可以通过 Offline.on(event, handler) 方法来监听这些事件，并在事件发生时执行自定义的回调函数。
离线页面缓存：Offline.js 提供了离线页面缓存的功能，可以将指定的页面内容缓存到本地。当用户离线时，可以使用缓存的离线页面内容来显示，提供更好的离线体验。开发者可以通过配置选项指定要缓存的离线页面 URL。
配置选项：Offline.js 提供了一系列配置选项，可以根据应用的需求进行自定义配置。这些选项包括轮询间隔、请求超时时间、请求的 URL、离线页面 URL 等。通过配置选项，开发者可以调整 Offline.js 的行为和功能。
兼容性：Offline.js 支持大多数现代浏览器，并提供了对不同浏览器和设备的适配和优化。它使用一些常见的网络技术和API来实现网络连接状态的检测，例如 AJAX 请求、Navigator.onLine 属性等。

写在最后

伙伴们，如果你觉得我写的文章对你有帮助就给zayyo点一个赞👍或者关注➕都是对我最大的支持。当然你也可以关注我的微信公众号：Gavin的技术分享，我邀你进我的前端学习交流群，一起学习前端，成为更优秀的工程师～

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