🚀 使用 JavaScript 检测用户是否在线/离线

作为开发人员，我们有时会习惯办公室里的宽带，而 localhost 是有史以来最快的网站，没有网络问题。

事实上，很多人忘记了，超过一半的互联网流量是通过手机传输的，除非你身处一个繁荣的城市，否则稳定的互联网连接并不常见。

这是系列文章的第一集，我将分享一些技巧和窍门，帮助那些网络连接较差的用户轻松获得更佳的体验。如果您开发的是面向消费者的应用程序，网络连接较差的用户可能占到您用户的很大一部分。

在这篇文章中，我们将介绍一种超级简单的方法来检查用户是否连接到互联网，并检测他们是否丢失连接或重新连接，以便您可以根据互联网状态适当地更新您的 UI。

您可以在这里观看我的视频讲解（其中我会更详细地介绍）或继续阅读。💜

在这篇文章的结尾，您将获得根据用户是否有互联网而变化的卡片。

首先是一些样板

索引.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Network Checker</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="app">
      <h1 class="status">Hello</h1>
    </div>
    <script src="app.js"></script>
  </body>
</html>

样式.css

body {
  background-color: #555;
}

.app {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

.status {
  padding: 40px;
  min-width: 120px;
  border-radius: 20px;
  background-color: #eee;
  text-align: center;
  font-size: 80px;
}

.status.online {
  border: 8px solid #41a700;
  color: #41a700;
}

.status.offline {
  border: 8px solid #f15c4f;
  color: #f15c4f;
}

添加一个空app.js文件，我们将在那里完成所有工作。

所以你的文件夹应该是这样的：

├── app
│   ├── index.html
│   └── style.css
│   └── app.js

首先，我们创建一个函数，根据用户是否连接来操作 DOM。我们将向其传递一个boolean值。


function hasNetwork(online) {
  const element = document.querySelector(".status");
  // Update the DOM to reflect the current status
  if (online) {
    element.classList.remove("offline");
    element.classList.add("online");
    element.innerText = "Online";
  } else {
    element.classList.remove("online");
    element.classList.add("offline");
    element.innerText = "Offline";
  }
}

接下来是有趣的部分。

我们首先会用它navigator.online来检查页面初始加载时用户是否连接到互联网。该函数navigator.online自 IE9 开始就一直支持，并返回一个boolean值。

重要的是要记住，浏览器以不同的方式实现此功能，有关更多详细信息，请查看此处的MDN 文档。

在 Chrome 和 Safari 中，如果浏览器无法连接到局域网 (LAN) 或路由器，则表示浏览器处于离线状态；其他所有情况均返回 true。因此，虽然您可以假设浏览器返回 false 时处于离线状态，但您不能假设返回 true 时就一定表示浏览器可以访问互联网。

// Listen for the page to be finished loading
window.addEventListener("load", () => {
  hasNetwork(navigator.onLine);
});

注意📝

乍一看，这似乎毫无意义，但鉴于目前的 Web 开发工具和最佳实践，您会发现用户通常会缓存网页，并且仍然可以离线访问您的网站。因此，如果他们启动了您的应用并意识到其内容可能已过期，那么这项初步检查将非常有用。

接下来我们要做的是添加在线和离线事件的事件监听器，以便我们可以检查用户的网络状态何时发生变化。

我们关心两个事件，即online和offline。我相信你能猜到，当用户在离线和在线之间切换时，会触发这些事件。

window.addEventListener("load", () => {
  hasNetwork(navigator.onLine);

  window.addEventListener("online", () => {
    // Set hasNetwork to online when they change to online.
    hasNetwork(true);
  });

  window.addEventListener("offline", () => {
    // Set hasNetwork to offline when they change to offline.
    hasNetwork(false);
  });
});

现在，当我们进入我们的应用程序时，当用户改变他们的网络状态时，我们将得到实时反馈。

那么什么时候使用它呢？

也许你需要告诉用户他们无法上传文件，因为他们处于离线状态；他们看到的实时数据可能不再是最新的，因为他们处于离线状态，或者其他原因。有很多原因可能需要你检测网络状态，作为 Web 开发者，让我们努力为每个人提供更友好的 Web 体验。

希望这个技巧对您有所帮助，祝您编程愉快！💜

在 Twitter 上关注我

在Codú 社区订阅

文章来源：https://dev.to/nialljoemaher/detecting-if-a-user-is-online-offline-with-javascript-3bcc