記錄 User Agent 信息可以幫助我們了解用戶使用的設(shè)備和瀏覽器，從而優(yōu)化頁面兼容性和用戶體驗(yàn)。同時，它對用戶行為分析和統(tǒng)計(jì)也很重要，能指導(dǎo)產(chǎn)品決策。最后，在某些場景下，它還能用于安全審計(jì)或識別異常請求。

?? 一、什么是 User Agent（用戶代理）？

User Agent（簡稱 UA）是客戶端發(fā)送給服務(wù)器的一段字符串，用于標(biāo)識自己是什么瀏覽器、操作系統(tǒng)、設(shè)備等信息。

每次瀏覽器（或其他 HTTP 客戶端）發(fā)起請求時，都會在 HTTP 請求頭中包含一個 User-Agent 字段。

如下所示：

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36

這個字符串并沒有統(tǒng)一標(biāo)準(zhǔn)，但一般包括如下幾部分：

• 瀏覽器廠商（如 Mozilla）

• 操作系統(tǒng)信息（如 Windows NT 10.0）

• CPU 架構(gòu)（如 x64）

• 渲染引擎（如 AppleWebKit）

• 瀏覽器名和版本（如 Chrome/123）

• 兼容性信息（如 Safari/537）

記錄 User Agent 信息可以用于前端適配頁面展示、后端統(tǒng)計(jì)用戶設(shè)備分布、安全防護(hù)識別異常請求，以及幫助開發(fā)者調(diào)試分析用戶環(huán)境。

?? 二、什么是 ua-parser-js？

ua-parser-js 是一個 JavaScript 庫，用來解析 User Agent 字符串，提取其中的有用信息。它是輕量級的、無依賴的，可運(yùn)行在瀏覽器和 Node.js 中。

你可以通過它快速獲取瀏覽器名稱和版本、操作系統(tǒng)信息、設(shè)備類型（如手機(jī)、平板、桌面）以及渲染引擎（如 WebKit 或 Blink）等關(guān)鍵數(shù)據(jù)。

?? 三、安裝與引入

在前端或 Node.js 項(xiàng)目中，先安裝：

npm install ua-parser-js

然后根據(jù)你的項(xiàng)目類型選擇引入方式：

ES 模塊：

import UAParser from "ua-parser-js";

CommonJS：

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

如果只是簡單在網(wǎng)頁中使用，可以直接通過 CDN 引入：

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

搞定！隨時可以開始解析 UA 啦～

首先，你需要拿到用戶的 User Agent 字符串：

const uaString = navigator.userAgent; // 前端瀏覽器環(huán)境

然后用 UAParser 來解析它：

const parser = new UAParser(uaString); // 把 UA 字符串傳進(jìn)去
const result = parser.getResult();
console.log(result);

輸出結(jié)果如下所示（示例，僅供參考）：

{
  "ua": "Mozilla/5.0 (Windows NT 10.0; Win64; x64)...",
  "browser": {
    "name": "Chrome",
    "version": "123.0.0.0"
  },
  "engine": {
    "name": "Blink",
    "version": "123.0.0.0"
  },
  "os": {
    "name": "Windows",
    "version": "10"
  },
  "device": {
    "model": undefined,
    "type": undefined,
    "vendor": undefined
  },
  "cpu": {
    "architecture": "amd64"
  }
}

那我們?nèi)绾翁崛∧阆胍男畔?/span>

const browser = parser.getBrowser();
console.log(browser.name); // Chrome
console.log(browser.version); // 123.0.0.0

const os = parser.getOS();
console.log(os.name); // Windows
console.log(os.version); // 10

就這么簡單！只需要幾行代碼，你就能輕松讀取瀏覽器、系統(tǒng)、設(shè)備等信息，適用于各種分析、適配或調(diào)試場景。需要我再加點(diǎn)服務(wù)端的使用示例嗎？

總結(jié)

最后我們展示一個 demo，我們先在瀏覽器上面獲取到 ua：

之后我們再通過 npx 來執(zhí)行：

npx ua-parser-js 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36'

最終輸出結(jié)果如下圖所示；

User Agent 是客戶端在請求網(wǎng)頁時發(fā)送的一段標(biāo)識信息，用于描述它所使用的瀏覽器、操作系統(tǒng)、設(shè)備類型等。 雖然格式?jīng)]有嚴(yán)格標(biāo)準(zhǔn)，但大多數(shù) UA 都遵循一定結(jié)構(gòu)，包含瀏覽器內(nèi)核、系統(tǒng)平臺和版本號等關(guān)鍵數(shù)據(jù)。通過解析 UA，可以幫助我們實(shí)現(xiàn)頁面適配、用戶分析、安全防護(hù)和調(diào)試支持。不過需要注意，UA 是可以偽造的，因此不能完全依賴它進(jìn)行身份驗(yàn)證。

閱讀原文：原文鏈接