监听设备网络状态

概述

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

场景

  • 移动端项目,有大量的图片需要访问,在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();
});
相关推荐
IT_陈寒17 小时前
3年Java老手:我用这5个Spring Boot优化技巧将系统吞吐量提升了200%!🚀
前端·人工智能·后端
正义的大古17 小时前
OpenLayers地图交互 -- 章节十一:拖拽文件交互详解
javascript·vue.js·microsoft·openlayers
清木Moyu18 小时前
layui tree组件回显bug问题,父级元素选中导致子集全部选中
前端·bug·layui
奶糖 肥晨18 小时前
前端Bug实录:为什么表格筛选条件在刷新时神秘消失?
前端·bug
樱花落海洋11118 小时前
layui 表格行级 upload 上传操作
前端·javascript·layui
艾小码18 小时前
告别复制粘贴!掌握这7个原则,让你的Vue组件复用性翻倍
前端·javascript·vue.js
我是ed21 小时前
# vite + vue3 实现打包后 dist 文件夹可以直接打开 html 文件预览
前端
小白64021 天前
前端梳理体系从常问问题去完善-工程篇(webpack,vite)
前端·webpack·node.js
不老刘1 天前
从构建工具到状态管理:React项目全栈技术选型指南
前端·react.js·前端框架
mCell1 天前
ECharts 万字入门指南
前端·echarts·数据可视化