利用JavaScript实现检测用户是否在线功能

有时你可能希望增强你的应用程序以通知用户他们可能已经失去了互联网连接。

用户可能正在访问你的网站并收到缓存版本，因此通常看起来他们的互联网仍在工作。

然而，他们失去了引擎盖下的连接，并且不会加载任何新内容。

在这里向他们显示一些消息以让他们知道他们应该检查他们的连接可能是有益的。

检测连接状态

我们可以利用navigator.onLineAPI 来检测连接状态。

这将返回一个布尔值来指示用户是否在线。

注意：请注意浏览器的实现方式不同，因此结果可能会有所不同。

这在初始加载时效果很好，所以我们可以做这样的事情。

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

但是我们不知道加载后网络状态是否发生变化，这是不理想的。

我们可以订阅离线和在线事件来监听这些特定的变化。

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

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

演示

让我们设置一个快速演示来演示这一点。

我们将在屏幕中央使用一个基本的文本元素，但你当然可以按照你喜欢的任何方式设置样式和实现它。

注意：我正在使用 SCSS 来设置样式

<div class="status">
  <div class="offline-msg">You're offline