监听设备网络状态

概述

在前端应用中监听网络状态是一个常见的需求,可以用于优化离线体验、提示用户网络变化等。

场景

  • 移动端项目,有大量的图片需要访问,在4g或者wifi的网络状态下做不同的优化
  • 在后台系统访问,有时候会遇到断网或者网络不好得时候,所以这里需求是在请求发送之前判断网络环境,如果断网给出提示,弱网超过一定时间提示请求超时

统一封装网络状态监控函数

属性概念

当前网络连接的估计下行速度(单位为 Mbps)

effectiveType

当前网络连接的估计速度类型(如 slow-2g、2g、3g、4g 等)

rtt

当前网络连接的估计往返时间(单位为毫秒),表示设备当前的往返延迟时间(Round-Trip Time),以毫秒为单位。它是从设备发送数据到服务器并返回的时间。

saveData

是否处于数据节省模式,表示用户设备当前是否处于节省数据模式。可能的取值为 true(用户启用了节省数据模式)或 false(用户未启用节省数据模式)

实现

js 复制代码
function getNetWorkInfo() {
    let info;
    if (navigator.onLine) {
        info = {
            status: "online",
            type: navigator.connection.effectiveType,
            rtt: navigator.connection.rtt,
            downlink: navigator.connection.downlink,
        };
    } else {
        info = {
            status: "offline",
        };
    }
    return info;
}

window.addEventListener("online", () => {
    getNetWorkInfo();
});
window.addEventListener("offline", () => {
    getNetWorkInfo();
});
navigator.connection.addEventListener("change", () => {
    getNetWorkInfo();
});
相关推荐
qczg_wxg15 小时前
React Native的动画系统
javascript·react native·react.js
漂流瓶jz16 小时前
解锁Babel核心功能:从转义语法到插件开发
前端·javascript·typescript
周小码17 小时前
shadcn-table:构建高性能服务端表格的终极解决方案 | 2025最新实践
前端·react.js
大怪v17 小时前
老乡,别走!Javascript隐藏功能你知道吗?
前端·javascript·代码规范
ERP老兵-冷溪虎山17 小时前
Python/JS/Go/Java同步学习(第三篇)四语言“切片“对照表: 财务“小南“纸切片术切凭证到崩溃(附源码/截图/参数表/避坑指南/老板沉默术)
java·javascript·python·golang·中医编程·四语言同步学习·职场生存指南
webYin18 小时前
vue2 打包生成的js文件过大优化
前端·vue.js·webpack
gnip18 小时前
结合Worker通知应用更新
前端·javascript
叶玳言18 小时前
【LVGL】从HTML到LVGL:嵌入式UI的设计迁移与落地实践
前端·ui·html·移植
高级测试工程师欧阳18 小时前
HTML 基本结构
前端
Gazer_S18 小时前
【Element Plus 表单组件样式统一 & CSS 文字特效实现指南】
前端·css·vue.js