跳到主要内容

userAgent

2024年02月04日
柏拉文
越努力，越幸运

一、认识​

navigator.userAgent 首部包含了一个特征字符串，用来让网络协议的对端来识别发起请求的用户代理软件的应用类型、操作系统、软件开发商以及版本号。

二、语法​

User-Agent: <product> / <product-version> <comment>

浏览器通常使用的格式为:

User-Agent: Mozilla/<version> (<system-information>) <platform> (<platform-details>) <extensions>

  • product: 产品识别码

  • version: 产品版本号

  • comment: 零个或多个关于组成产品信息的注

2.1 IE UA​

Mozilla/5.0 (compatible; MSIE 9.0; Windows Phone OS 7.5; Trident/5.0; IEMobile/9.0)

2.2 Opera UA​

现在，Opera 也是一款基于 blink 引擎的浏览器，这也是为什么它的 UA 看起来（和 Chrome 的）几乎一样的原因，不过，它添加了一个 OPR/<version>。

Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.106 Safari/537.36 OPR/38.0.2220.41

2.3 Chrome UA​

Chrome（或 Chromium/blink-based engines）用户代理字符串与 Firefox 的格式类似。为了兼容性，它添加了诸如 KHTML, like Gecko 和 Safari 这样的字符串。

示例

Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36

2.4 Safari UA​

Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_1 like Mac OS X) AppleWebKit/603.1.30 (KHTML, like Gecko) Version/10.0 Mobile/14E304 Safari/602.1

2.5 Firefox UA​

Firefox 的用户代理字符串自身可以分为四部分:

Mozilla/5.0 (platform; rv:geckoversion) Gecko/geckotrail Firefox/firefoxversion

  • Mozilla/5.0: 是一个通用标记符号，用来表示与 Mozilla 兼容，这几乎是现代浏览器的标配

  • platform: 用来说明浏览器所运行的原生系统平台（例如 Windows、Mac、Linux 或 Android），以及是否运行在手机上。搭载 Firefox OS 的手机仅简单地使用了 Mobile 这个字符串；因为 web 本身就是平台。注意 platform 可能会包含多个使用 ; 隔开的标记符号。

  • rv:geckoversion: 表示 Gecko 的发布版本号

  • Gecko/geckotrail: 表示该浏览器基于 Gecko 渲染引擎

  • Firefox/firefoxversion: 表示该浏览器是 Firefox，并且提供了版本号信息

示例

Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:47.0) Gecko/20100101 Firefox/47.0
Mozilla/5.0 (Macintosh; Intel Mac OS X x.y; rv:42.0) Gecko/20100101 Firefox/42.0

三、场景​

3.1 检测浏览器名称​

function getBrowserName() {
    const ua = navigator.userAgent.toLowerCase();

    if (ua.indexOf('opera') > -1 || ua.indexOf('opr') > -1) {
        return 'Opera';
    } else if (ua.indexOf('compatible') > -1 && ua.indexOf('msie') > -1) {
        return 'IE';
    } else if (ua.indexOf('edge') > -1 || ua.indexOf('edg') > -1) {
        return 'Edge';
    } else if (ua.indexOf('firefox') > -1) {
        return 'Firefox';
    } else if (ua.indexOf('safari') > -1 && ua.indexOf('chrome') == -1) {
        return 'Safari';
    } else if (ua.indexOf('chrome') > -1 && ua.indexOf('safari') > -1) {
        return 'Chrome';
    } else if (ua.indexOf('qqbrowser') > -1) {
        return 'QQBrowser';
    } else if (ua.indexOf('metasr') > -1) {
        return 'SogouBrowser';
    } else if (ua.indexOf('samsungbrowser') > -1) {
        return 'SamsungBrowser';
    } else if (ua.indexOf('miuibrowser') > -1) {
        return 'MiuiBrowser';
    } else {
        return '';
    }
}

3.2 检测浏览器版本​

function normalizeVersion(version: number | string) {
    if (typeof version === 'number') {
        return `${version}.0.0`;
    }
    return version;
}

function getBrowserVersion(browser: string) {
    let match = null;
    const defaultVersion = '0.0.0';
    const ua = navigator.userAgent.toLowerCase();
    console.log('ua', ua);

    switch (browser) {
        case 'safari':
            match = ua.match(/version\/([\d\.]+).*safari/);
            console.log('match', match);
            return match ? match?.[1] : defaultVersion;
        case 'chrome':
            match = ua.match(/chrom(e|ium)\/(\d+)\./);
            const version = match ? parseInt(match?.[2], 10) : defaultVersion;
            return this.normalizeVersion(version);
        case 'firefox':
            match = ua.match(/firefox\/([\d\.]+)/);
            return match ? match?.[1] : defaultVersion;
        case 'edge':
            match = ua.match(/edge?\/([\d\.]+)/);
            return match ? match?.[1] : defaultVersion;
        case 'ie':
            if (ua.indexOf('trident') > -1 && ua.indexOf('rv:11.0') > -1) {
                return '11.0.0';
            } else if (ua.indexOf('msie')) {
                return '10.0.0';
            }
            return defaultVersion;
        case 'opera':
            match = ua.match(/(?:opera|opr).([\d\.]+)/);
            return match ? match?.[1] : defaultVersion;
        default:
            return defaultVersion;
    }
}