一个好用的获取浏览器和系统信息的工具

464 阅读1分钟

在前端开发的工作中,我们总是有些数据需要统计,比如统计当前客户的浏览器分布,操作系统分布或者在前端音视频的兼容性处理中,总是有些特殊的浏览器需要一些特别的处理。所以难免需要区分浏览器类型和版本之类的工作,索性就自己开发一个浏览器工具类方便使用,可以直接通过npm引用

    npm i web-browser-utils

或者直接上源码: github

浏览器信息

支持获取浏览器类型

  BrowserUtil.browserName

目前支持的浏览器类型包括

  enum BrowserName {
    IE = "IE",
    Chrome = 'Chrome',
    Safari = 'Safari',
    Firefox = 'Firefox',
    Opera = 'Opera',
    Edge = "Edge",
    MicroMessenger = 'MicroMessenger',
    Quark = "Quark",
    QQ = 'QQ',
    QQBrowser = 'QQBrowser',
    DingTalk  = 'DingTalk',
    Electron = 'Electron',
    Sogou = "Sogou",
    Vivo = "VivoBrowser",
    Oppo = "OppoBrowser",
    UC = "UCBrowser",
    MI = "MiBrowser",
    Huawei = 'Huawei',
    Finger = 'Finger',
    Lenovo = "SLBrowser",   // 联想浏览器
    Maxthon = "Maxthon",  // 遨游浏览器
    Liebao = "Liebao",    // 猎豹浏览器
    Meizu = "MZBrowser",
    Unknown = 'unknown',
}

其中包括浏览器和一些常见的webview的情况也作了区分,比如QQ、微信、钉钉等。Unknown是部分无法识别的浏览器,大概率是默写修改了userAgent的场景。后面发现了也会不定期的更新这个列表。

支持获取浏览器版本

  BrowserUtil.browserVersion

操作系统

支持获取操作系统类型

  SystemUtil.systemName

目前支持的浏览器类型包括

  
/**
 * 系统平台
 */
export enum SystemName {
  Unknown = "Unknown",
  MacOS = "Mac",
  Windows = "Windows",
  Windows10 =  "Windows 10",
  Windows7 = "Windows 7",
  WindowsVista = "Windows vista",
  WindowsXP = "Windows xp",
  Android = "Android",
  iPhone = "iPhone",
  iPad = "iPad",
  iOS = "iOS",
  Linux = "Linux",
  ChromeOS = "ChromeOS",
}

其中包括浏览器和一些常见的pc和移动端的操作系统。Unknown是部分无法识别的浏览器,这个后面也会不定期的更新修复Unknown的情况

支持获取浏览器版本

  SystemUtil.systemVersion