Dear, are you disconnected from the Internet?! How does the front end monitor network status changes?

1. Overview of demand scenarios

Sometimes it is necessary to monitor the network status change, so as to notify the user to pay attention, or do some logic processing inside the program according to the network status. Many national-level software are also often seen. When the network is disconnected or the network status is poor, the user will be prompted to repair the network disconnection or exit the high-definition video to switch the definition of the scene. Then such a demand can be realized through the navigator on the front end of the web. .onLine and navigator.connection are combined to monitor online and offline events.

2. Implementation thinking analysis

1. Go online (networked) to monitor. addEventListener monitors the online event, which is triggered when the network is connected. At this time, you can view the online status of the network through navigator.onLine, and obtain network status information such as network speed through navigator.connection.

2. Offline (disconnection) monitoring. addEventListener listens for offline events, which will be triggered when the network connection is disconnected. At this time, you can view the online status of the network through navigator.onLine, and obtain network status information such as network speed through navigator.connection.

3. When the network status change is detected, the user can be prompted or some special processing can be done as needed.

3. Introduction of related technical points

1. Basic use of online

online = window.navigator.onLine;

online is a boolean true or false.

To listen to changes in network status, use addEventListener to listen to events window.online and window.offline

As shown in the following example:

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

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

2. The basic use of connection

connectionInfo = navigator.connection

Returns the network connection status NetworkInformation object, including .downlink (downlink speed of the network)

effectiveType (network type) onchange (value represents network status change) rtt (estimated round-trip time)

saveData (open/request data save mode)

3. Precautions:

The browser compatibility of navigator.online and navigator.connection is as follows. It can be seen that the compatibility of connection is low, and it should be used with caution in actual development.

4. Complete Demo

1. Demo renderings

2. Complete demo code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>js实现查看网络状态</title>
</head>
<body>
<div>
  <h3>改变网络状态测试效果</h3>
  <h1 id="p1">获取网络在线状态：</h1>
  <h1 id="p2">获取网络具体状态：</h1>
  <h1 id="p3">获取网络速度：</h1>
</div>
<script>

  window.onload = function() {
    getNetworkConnectionChange();
    getNetworkOnLineChange();
  };

  // connection 的兼容性较低，谨慎使用
  // 通过navigator.connection获取当前网络状态，可对connection进行监听，从而及时获取网络状态的变更
  function getNetworkConnectionChange() {
    // connection 的兼容性较低
    const connection = navigator.connection || navigator.webkitConnection || navigator.mozConnection;
    updateText("p2", "网络状态：" + connection.effectiveType);
    updateText("p3", "网络下行速度：" + connection.downlink + "MB/S");

    // 对connection变更监听
    connection.addEventListener("change", () => {
      // connection.effectiveType返回的是具体的网络状态：4g/3g/2g
      updateText("p2", "网络状态：" + connection.effectiveType);
      updateText("p3", "网络下行速度：" + connection.downlink + "MB/S");
    });
  }

  // 通过navigator.online判断当前网络是否在线，对navigator进行监听，从而及时获取网络状态的变更
  function getNetworkOnLineChange() {
    updateText("p1", "您的网络是否在线：" + window.navigator.onLine);

    // 对online网络在线变更监听
    window.addEventListener("online", function() {
      updateText("p1", "您的网络是否在线：" + window.navigator.onLine);
    });

    // 对offline断网变更监听
    window.addEventListener("offline", function() {
      updateText("p1", "您的网络是否在线：" + window.navigator.onLine);
    });
  }

  function updateText(id, msg) {
    document.getElementById(id).textContent = msg;
    console.log(msg);
  }

</script>
</body>
</html>