ua-parser-js: 解析浏览器 User Agent 的强大工具

ua-parser-js: 解析浏览器 User Agent 的强大工具

在今天的网页开发中，我们需要处理各种不同的浏览器和设备。为了确保我们的应用程序能够正常运行并提供一致的用户体验，我们需要了解用户正在使用的浏览器类型、操作系统、设备等信息。这就是 ua-parser-js 的作用。

什么是 ua-parser-js？

ua-parser-js 是一个 JavaScript 库，它可以解析来自不同来源的 User Agent 字符串，并提取有关浏览器、操作系统和设备的信息。这个库可以在 Node.js 环境中运行，也可以在浏览器中直接使用。

能用来做什么？

有了 ua-parser-js，你可以轻松地获取到用户的浏览器类型、版本号、操作系统的名称和版本，以及设备类型（如移动设备或桌面电脑）。这样你就可以根据这些信息为用户提供更好的体验，比如针对某些特定浏览器进行优化，或者在移动设备上提供更好的响应式设计。

以下是一个简单的示例：

const UAParser = require("ua-parser-js");

const parser = new UAParser();
const result = parser.setUA(navigator.userAgent).getResult();

console.log(result);
// {
//   browser: { name: 'Chrome', version: '91.0.4472.164' },
//   engine: { name: 'WebKit', version: '537.36' },
//   device: { model: undefined, type: 'desktop', vendor: undefined },
//   os: { name: 'Windows', version: '10.0', arch: undefined, versionAlias: undefined }
// }
1
2
3
4
5
6
7
8
9
10
11
12

在这个例子中，我们首先导入了 ua-parser-js 库，并创建了一个新的解析器实例。然后我们使用 setUA 方法将当前浏览器的 User Agent 字符串设置为解析器的目标。最后我们调用 getResult 方法获取解析结果，并将其打印到控制台。

特点

• 支持多种平台和浏览器，包括但不限于 Chrome、Firefox、Safari、Edge、IE、Opera、Android、iOS、Windows Phone。
• 提供详细的解析结果，包括浏览器名称、版本、引擎名称、版本、设备类型、型号和供应商、操作系统名称、版本、架构和别名。
• 可以在 Node.js 和浏览器环境中使用，兼容 CommonJS 和 ESM 模块规范。
• 高度可定制化，可以通过自定义规则扩展支持更多的浏览器和设备。

使用方法

安装

在你的项目目录中运行以下命令安装 ua-parser-js：

npm install ua-parser-js
1

Node.js 示例

在 Node.js 中，你可以通过 require 导入 ua-parser-js 库，并创建一个新的解析器实例：

const UAParser = require("ua-parser-js");

const parser = new UAParser();
const result = parser.setUA(navigator.userAgent).getResult();

console.log(result);
1
2
3
4
5
6

浏览器示例

在浏览器中，你可以直接通过 <script> 标签引入 ua-parser-js 库，并创建一个新的解析器实例：

<script src="https://cdn.jsdelivr.net/npm/ua-parser-js@latest/dist/ua-parser.min.js"></script>

<script>
  const parser = new UAParser();
  const result = parser.setUA(navigator.userAgent).getResult();

  console.log(result);
</script>
1
2
3
4
5
6
7
8

自定义规则

如果你想扩展 ua-parser-js 的支持范围，可以使用自定义规则。规则是一个包含正则表达式的对象，每个键表示一个匹配项，值是对应的解析结果。

下面是一个添加对 Firefox for Android 支持的例子：

const parser = new UAParser();
parser.setParserCustomRules([
  {
    test: /Fennec\/([\d\.]+)/i,
    browser: { name: "Firefox", version: "$1" }
  }
]);

const result = parser.setUA("Mozilla/5.0 (Android; Mobile; rv:38.0) Gecko/38.0 Firefox/38.0 Fennec/38.0").getResult();

console.log(result);
// { browser: { name: 'Firefox', version: '38.0' }, ... }
1
2
3
4
5
6
7
8
9
10
11
12

结语

ua-parser-js 是一个强大的工具，可以帮助你更好地理解你的用户正在使用的浏览器和设备，从而为你提供更好的用户体验。无论你是前端开发者还是后端开发者，都可以轻松地将其集成到你的项目中。快来尝试一下吧！