使用 navigator.connection 来监控网络状态

const connection = navigator.connection;
console.log(connection.downlink); // 下行速度（单位：Mbps）
console.log(connection.effectiveType); // 网络类型（推测的，不准确）
console.log(connection.rtt); // 延迟
console.log(connection.saveData); // 是否节省数据

使用 navigator.onLine 来监控网络状态

console.log(navigator.onLine); // 是否在线

事件

window.addEventListener("online", () => {
  console.log("网络从离线状态变为在线状态");
});

window.addEventListener("offline", () => {
  console.log("网络从在线状态变为离线状态");
});

navigator.connection.addEventListener("change", () => {
  console.log("网络状态发生变化");
});