了解ua-parser-js

发表于 更新于 本文字数： 1.9k 阅读时长 ≈ 3 分钟

实际开发中经常解析UA头部来判断用户设备信息，比如判断是Win还是Mac，或者判断是不是移动设备等等。我们直接用userAgent的话就自己手动解析该字符串，并不是很方便。比较简单的办法是引入ua-parser-js，这是一个成熟的类库，有了它就可以方便的获取ua中携带的信息了。

用法

先说下用法。

1
2
3
4
5
6
7
8
9
10
11
12
13
const parser = new UAParser();

console.log(parser.getBrowser());
// {"name":"Chrome","version":"130.0.0.0","major":"130"}

console.log(parser.getOS());
// {name: 'Mac OS', version: '10.15.7'}

console.log(parser.getDevice());
// {vendor: 'Apple', model: 'Macintosh', type: undefined}

// 推荐使用v2版时，开启客户端提示
UAParser().withClientHints();

通过UAParser解析后的结果是一个对象，包含浏览器、设备、系统、引擎、CPU等信息。

注意

  1. ua-parser-js v2版还是beta，但推荐使用v2，v2下使用js的一些新特性，从而确保了准确性。
  2. nodejs/浏览器环境均可使用。

TS类型安全

v1版中，ua-parser-js默认并不携带ts类型定义，需要手动引入，否则会报错。v2版中已经自带ts类型定义，不需要手动引入。

1
npm install --save @types/ua-parser-js

体积

无论v1还是v2，体积均为20kb左右。

查看源码ua-parser-js没有配置sideEffects，因此即使是v2的ES模块引入也无法做到tree shaking。

源码

ua-parser-js的源码本质是对navigator.userAgent及navigator.userAgentData的解析，所以解析的逻辑很简单，就是正则匹配，然后根据匹配结果组装成对象。

局限性

目前源码中使用到的API主要是

  1. navigator.userAgent

  2. navigator.userAgentData

因此也就决定了一些缺陷，比如：

  1. M系列Mac下navigator.userAgent返回的还是intel，原因是Mac下发起请求携带的ua不对，属于OS层面问题，这点只能等Apple修复。但v2下使用了userAgentData从而确保了准确性。

  2. navigator.userAgentData存在明显兼容性问题，因此即使使用v2也不能保证所有浏览器均OK。

    https://static.1991421.cn/2024/2024-10-18-174433.jpeg

  3. ua没有提供的信息也就无法获取，比如设备内存，GPU情况等。

v2版的准确性-User-Agent Client Hints

v2版本下使用到了navigator.userAgentData.getHighEntropyValues方法，该方法可以获取CPU架构，CPU处理器位数信息。

举例如下。

1
2
3
4
5
6
7
8
9
10
11
12
13
navigator.userAgentData
  .getHighEntropyValues([
    "architecture",
    "bitness",
    "formFactor",
    "fullVersionList",
    "model",
    "platformVersion",
    "wow64",
  ])
  .then((ua) => {
    console.log(ua);
  });

https://static.1991421.cn/2024/2024-10-18-180504.jpeg

在线验证

  1. 官方有提供站点，可以直接输入UA或选择示例UA，解析获得设备信息。

    https://uaparser.dev/

  2. 因为个人使用习惯，这里我基于官方站点做了些交互改动，提供另一个选择。但功能及使用的ua js版本一致。

    https://uaparser.1991421.cn/

写在最后

关于ua-parser-js的介绍，也就这些了，希望能够帮到大家。同时如果希望设备信息足够准确和丰富，也建议使用v2版。