js获取浏览器名称版本号,操作系统os,cpu,设备型号,userAgent解析UAParser,最佳实践

Web开发，经常需要判断浏览器的兼容性，浏览器程序名称和版本、iOS操作系统版本号，那么快速判断浏览器的运行环境

经常遇到的问题：

• 获取系统类型，是不是安卓、是不是iOS、是否Mac、是否Windows
• 检测chrome浏览器版本、内核是什么
• 获取系统名称，iOS版本是否大于v12.0
• 探测微信浏览器、版本号
• 是不是UC、QQ浏览器、2345浏览器、华为浏览器
• 解析userAgent 判断兼容性、检查浏览器内核/渲染引擎
• 在线检测浏览器信息: 版本号/操作系统/内核/CPU架构/设备型号等信息(本网页右下角有小齿轮，点击可以查看详细信息)

WebRTC开发的时候，还遇到过问题：chrome 无法解码H264视频，H264编码的画面变成了黑屏画面。这时候的兼容性判断就需要做的更复杂。（后来是切换到华为浏览器v14才解决画面黑屏）

下面介绍获取浏览器appName、OS版本号的最佳实践

不再使用原始的 navigator.userAgent 解析了，直接用开源库 ua-parser-js ，开源js库用户量大，测试用例覆盖更全，更推荐使用开源库

ua-parser-js 快速获取浏览器名称版本号,操作系统os,cpu,设备型号,userAgent解析UAParser

ua-parser-js 用户量更大 开发者更多，建议用这个

https://github.com/faisalman/ua-parser-js

文档doc https://github.com/faisalman/ua-parser-js/tree/1.0.35#documentation

快速获取浏览器、系统信息，集成 ua-parser-js

<script src="https://registry.npmmirror.com/ua-parser-js/1.0.35/files/dist/ua-parser.min.js"></script>

<script>

  console.log(UAParser());

</script>

当前浏览器 UAParser()结果

ua-parser-js UAParser() 结果示例

Windows chrome UA 字符串

  {
    "ua": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36",
    "browser": {
      "name": "Chrome",
      "version": "122.0.0.0",
      "major": "122"
    },
    "engine": {
      "name": "Blink",
      "version": "122.0.0.0"
    },
    "os": {
      "name": "Windows",
      "version": "10"
    },
    "device": {},
    "cpu": {
      "architecture": "amd64"
    }
  }

Android Chrome UA 字符串

  {
    "ua": "Mozilla/5.0 (Linux; Android 8.0.0; SM-G955U Build/R16NW) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Mobile Safari/537.36",
    "browser": {
      "name": "Chrome",
      "version": "116.0.0.0",
      "major": "116"
    },
    "engine": {
      "name": "Blink",
      "version": "116.0.0.0"
    },
    "os": {
      "name": "Android",
      "version": "8.0.0"
    },
    "device": {
      "vendor": "Samsung",
      "model": "SM-G955U",
      "type": "mobile"
    },
    "cpu": {}
  }

iPhone/iOS Safari UA 字符串

  {
    "ua": "Mozilla/5.0 (iPhone; CPU iPhone OS 16_6 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.6 Mobile/15E148 Safari/604.1",
    "browser": {
      "name": "Mobile Safari",
      "version": "16.6",
      "major": "16"
    },
    "engine": {
      "name": "WebKit",
      "version": "605.1.15"
    },
    "os": {
      "name": "iOS",
      "version": "16.6"
    },
    "device": {
      "vendor": "Apple",
      "model": "iPhone",
      "type": "mobile"
    },
    "cpu": {}
  }

除了ua-parser-js，还有bowser.js 也能快速获取浏览器、系统名称+版本号

bowser.js Demo示例

https://github.com/bowser-js/bowser

获取浏览器UA信息 bowser.js demo示例