浏览器的userAgent

发表于 更新于 本文字数： 1.1k 阅读时长 ≈ 2 分钟
本文介绍关于浏览器的userAgent，包括使用场景、实现细节等，以提高关于浏览器的userAgent的效率。

userAgent再熟悉不过了，但具体怎么用，能做到和做不到哪些呢，这里Mark下。

访问方式

  • 前端网页的话，可以使用alert(window.navigator.userAgent);

  • 服务端的话，可以使用req.heades[user-agent]

推荐工具包

userAgent是个字符串，从中解析出浏览器版本，操作系统等信息的话，需要使用正则。这里推荐个常用包

ua-parser-js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
let parser = new UAParser("your user-agent here"); // you need to pass the user-agent for nodejs
console.log(parser); // {}
let parserResults = parser.getResult();
console.log(parserResults);
/* 
  {
    ua      : "",
    browser : {},
    engine  : {},
    os      : {},
    device  : {},
    cpu     : {}
  } 
*/

如上即可获得结构化的信息，注意nodejs下的话需要显式传入ua，而浏览器端使用的话则不需要传入参数。

userAgent中不包含的信息

虽然利用UAParser可以方便的使用结构化处理后的ua信息，但受限于ua信息本身情况，因此我们也只能获取部分有价值的信息。

  1. userAgent中可以获得浏览器名称，浏览器版本，设备类型，CPU，OS版本等信息。但不包括设备硬件细节，比如内存大小

  2. userAgent中携带的OS版本并不一定正确，比如我现在在一台MacOS Sonoma 14.0下测试，发现UA中携带的OS版本是10.15.7

userAgent中有多个浏览器信息？

以如下的2个例子来说明

开头Mozilla可以理解为固定前缀，不用管，AppleWebKit为当前浏览器中使用的渲染引擎，接下来的是真正的浏览器及版本，第一个chrome之后有Safari说明Chrome兼容了如下的Safari。

1
2
3
4
5
6
7
8

# Chrome
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/117.0.0.0 Safari/537.36


# Safari
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Safari/605.1.15