https://developer.pano.video/js/navigator.js

1/**
2 * 通过navigator.userAgent获取浏览器版本与系统版本
3 * @param {string} navigator.userAgent
4 * @return {object}
5 */
6class BrowserInfo {
7  constructor (userAgent) {
8    this.agent = userAgent
9    this.result = {}
10    this.init()
11    this.result.browserVersion = this.result.browserName === 'Safari' ? this.result.systemVersion : this.result.browserVersion
12    return this.result
13  }
14
15  init () {
16    try {
17      this.getSystemName()
18      this.getBrowserName()
19    } catch (error) {
20      console.warn(`[getBrowserInfo Error] ${error}`)
21      this.result = {
22        systemName: '',
23        systemVersion: '',
24        browserName: '',
25        browserVersion: '',
26        browserEnName: ''
27      }
28    }
29  }
30
31  // 获取系统版本号
32  getSystemName () {
33    this.agent.replace(/^[a-z]+\/\d+\.\d+\s?\(([a-z\d\s:;\.\/_-]+)\)/i, (match, $1) => {
34      let result = {}
35      try {
36        if (/^Windows\s(?!p)/i.test($1)) {
37          const [, _version] = $1.match(/NT\s(\d+\.\d+)/)
38          result.systemName = 'Windows'
39          switch (_version) {
40            case '6.3':
41              result.systemVersion = '8.1'
42              break
43            case '6.2':
44              result.systemVersion = '8'
45              break
46            case '6.1':
47              result.systemVersion = '7'
48              break
49            case '5.2':
50            case '5.1':
51              result.systemVersion = 'XP'
52              break
53            default:
54              result.systemVersion = _version
55          }
56        } else if (/^Macintosh/i.test($1)) {
57          const [, _version] = $1.match(/X\s((\d+(_|\.))+\d+)/)
58          result.systemName = 'Mac'
59          result.systemVersion = _version.replace(/_/g, '.')
60        } else if (/^iPhone/i.test($1)) {
61          const [, _version] = $1.match(/((\d+_)+\d+)/)
62          result.systemName = 'iPhone'
63          result.systemVersion = _version.replace(/_/g, '.')
64        } else if ($1.indexOf('Android') !== -1) {
65          const [, _version] = $1.match(/Android\s((\d+\.?)+\d?)/)
66          result.systemName = 'Android'
67          result.systemVersion = _version
68        } else if (/Linux\s[a-z\d_]+/.test($1)) {
69          result.systemName = 'Linux'
70          result.systemVersion = 'Unknown'
71        } else {
72          result.systemName = 'Unknown'
73          result.systemVersion = 'Unknown'
74        }
75      } catch (error) {
76        console.warn(`[getBrowserInfo Error] ${error}`)
77        result.systemName = 'Unknown'
78        result.systemVersion = 'Unknown'
79      }
80      this.result = {
81        ...this.result,
82        ...result
83      }
84    })
85  }
86
87  getBrowserName () {
88    // 需要匹配的浏览器名称
89    const browserNameList = ['MicroMessenger', 'QQBrowser', 'UCBrowser', 'Edge?', 'OPR', 'Vivaldi', 'Firefox', 'Chrome', 'Safari']
90
91    const regexp = browserNameList.map(name => new RegExp(`${name}\\/(\\d+\\.)+\\d+`))
92
93    // 过滤浏览器信息
94    let browser = this.agent.match(/[a-z]+\/(\d+\.)+\d+/ig).filter(_ => regexp.findIndex(v => v.test(_)) !== -1)
95
96    // 如果最后一项不是Safari并且结果长度大于1取最后一项为当前浏览器信息
97    browser = browser.length > 1 && !/^Safari/.test(browser[browser.length - 1]) ? browser.reverse() : browser
98
99    this.result = {
100      ...this.result,
101      ...this._formatBrowserVersion(browser[0])
102    }
103  }
104
105  _formatBrowserVersion (str) {
106    if (!str) return {
107      browserName: 'Unknown',
108      browserVersion: 'Unknown'
109    }
110    const BROWSER_NAMES = {
111      QQBrowser: 'QQ浏览器',
112      UCBrowser: 'UC浏览器',
113      MicroMessenger: '微信',
114      Edg: 'Edge',
115      Edge: 'Edge',
116      OPR: 'Opera',
117      Vivaldi: 'Vivaldi',
118      Firefox: 'Firefox',
119      Chrome: 'Chrome',
120      Safari: 'Safari'
121    }
122    try {
123      const [, name, version] = str.match(/([a-z]+)\/(\d+\.\d+)/i)
124      return {
125        browserName: BROWSER_NAMES[name],
126        browserVersion: version,
127        browserEnName: name
128      }
129    } catch (error) {
130      console.warn(`[getBrowserInfo Error] ${error}`)
131    }
132  }
133}