Shulou(Shulou.com)06/02 Report--

This article mainly explains "what the browser running environment is like". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought. Let's study and learn what the browser running environment is like.

Top five international browser brands: ranked in descending order of global usage

Google Chrome:Windows 、 MacOS 、 Linux 、 Android 、 iOS

Apple Safari:MacOS 、 iOS

Mozilla Firefox:Windows 、 MacOS 、 Linux 、 Android 、 iOS

ASA Opera:Windows 、 MacOS 、 Linux 、 Android 、 iOS

Microsoft Internet Explorer or Microsoft Edge:Windows

Domestic commonly used browser brands: arranged in descending order of domestic usage, generally based on open source project Chromium for development

Wechat browser

QQ Browser

UC browser

2345 browser

Sogou browser

Cheetah browser

Browse the browser

Baidu browser: Baidu announced the suspension of service on April 30, 2019.

Other browsers: many, many, too many to count, I won't list them.

By the way, I would like to complain about this shameless red core browser. Obviously, it is based on Chromium for secondary development and an extra layer of shell, but it has to be said that the browser I developed is the fifth largest browser in the world. For more information, please stamp one, two, three.

Working with scen

Determine whether the user's browser is desktop or mobile, and display the corresponding theme style

Determine whether the user's browser is Android or iOS, and jump to the corresponding App download link

Determine whether the user's browser is Wechat or H5, and call Wechat to share or the current browser to share

Obtain the kernel and carrier of the user browser, which is used to calculate the distribution interval of the user equipment platform.

Gets the carrier version of the user's browser, which is used to prompt for updates

In fact, there are still many use scenarios, so there are no examples of them.

Principle

For dealing with such a usage scenario, there is actually a more professional name, called browser fingerprint. The requirements we talked about above are only a small part of the browser fingerprint scheme, and the browser fingerprint we need to use is UserAgent.

Who is this UserAgent? it translates into Chinese as a user agent. The definition of Baidu is a special string header that enables the server to identify the operating system and version used by the customer, CPU type, browser carrier and version, browser rendering engine, browser language, browser plug-in and so on. And this information is enough for us to judge the operating environment of the browser.

Prepare for

At present, many online solutions are only aimed at whether the system is desktop or mobile, Android or iOS, part of the browser carrier judgment and access, and so on, there is not a more perfect or ultimate solution.

So I used a lot of test platforms to sort out a more comprehensive solution. This scheme includes browser system and version, browser platform, browser kernel and version, browser carrier and version, browser shell and version.

This scheme is also based on navigator.userAgent to obtain relevant browser information (as follows), and then classify and unify through the unique fields of system, platform, kernel, carrier and shell to sort out a complete browser running environment.

Const ua = navigator.userAgent.toLowerCase (); / / output "Mozilla/5.0 (iPhone; CPU iPhone OS 110.0like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1"

Browser information: weights are sorted in descending order

Browser system: the operating system running, including Windows, MacOS, Linux, Android, iOS

Browser platform: the running device platform, including Desktop desktop and Mobile mobile

Browser kernel: browser rendering engine, including Webkit, Gecko, Presto, Trident

Browser carrier: five browser brands, including Chrome, Safari, Firefox, Opera, Iexplore/Edge

Browser shell: based on the kernel of five major browser brands, and then a layer of self-developed technology shell, such as many domestic browser brands

Get whether UserAgent contains fields: determine whether it contains unique fields of system, platform, kernel, carrier, and shell.

Const testUa = regexp = > regexp.test (ua)

Get the version of the corresponding field of UserAgent

Const testVs = regexp = > (ua.match (regexp) + "). Replace (/ [^ 0-9 | _.] / ig,") .replace (/ _ / ig, ".")

Scheme

After the above preparatory work is completed, we classify the unified browser running environment according to the weight (system + system version > platform > kernel + carrier version + carrier version > shell + shell version) according to the unique fields of system, platform, kernel, carrier and shell.

System + system version

/ / system let system = "unknown"; if (testUa (/ windows | win32 | win64 | wow32 | wow64/ig)) {system = "windows"; / / window system} else if (testUa (/ macintosh | macintel/ig)) {system = "macos"; / / macos system} else if (testUa (/ x11/ig)) {system = "linux"; / / linux system} else if (testUa (/ android | adr/ig)) {system = "android" / / android system} else if (testUa (/ ios | iphone | ipad | ipod | iwatch/ig)) {system = "ios"; / / ios system} / / system version let systemVs = "unknown"; if (system = = "windows") {if (testUa (/ windows nt 5. 0 | windows 2000/ig)) {systemVs = "5";} else if (testUa (/ windows nt 5. 1 | windows xp/ig)) {systemVs = "xp" } else if (testUa (/ windows nt 6. 2 | windows 2003/ig)) {systemVs = "2003";} else if (testUa (/ windows nt 6. 0 | windows vista/ig)) {systemVs = "vista";} else if (testUa (/ windows nt 6. 1 | windows 7/ig)) {systemVs = "7";} else if (testUa (/ windows nt 6. 2 | windows 8/ig)) {systemVs = "8" } else if (testUa (/ windows nt 6.3 | windows 8.1/ig)) {systemVs = "8.1";} else if (testUa (/ windows nt 10.0 | windows 10/ig)) {systemVs =" 10 ";}} else if (system = =" macos ") {systemVs = testVs (/ os x [\ d.d _] + / ig) } else if (system = = "android") {systemVs = testVs (/ android [\ d.d _] + / ig);} else if (system = "ios") {systemVs = testVs (/ os [\ d._] + / ig);}

Platform

Let platform = "unknow"; if (system = "windows" | | system = = "macos" | | system = "linux") {platform = "desktop"; / / Desktop} else if (system = "android" | | system = = "ios" | | testUa (/ mobile/ig)) {platform = "mobile"; / / Mobile}

Kernel + carrier

Let engine = "unknow"; let supporter = "unknow"; if (testUa (/ applewebkit/ig) & & testUa (/ safari/ig)) {engine = "webkit"; / / webkit kernel if (testUa (/ edge/ig)) {supporter = "edge"; / / edge browser} else if (testUa (/ opr/ig)) {supporter = "opera" / / opera browser} else if (testUa (/ chrome/ig)) {supporter = "chrome"; / / chrome browser} else {supporter = "safari"; / / safari browser}} else if (testUa (/ gecko/ig) & & testUa (/ firefox/ig)) {engine = "gecko"; / / gecko kernel supporter = "firefox" / / firefox browser} else if (testUa (/ presto/ig)) {engine = "presto"; / / presto kernel supporter = "opera"; / / opera browser} else if (testUa (/ trident | compatible | msie/ig)) {engine = "trident"; / / trident kernel supporter = "iexplore"; / / iexplore browser}

Kernel version + carrier version

/ / kernel version let engineVs = "unknow"; if (engine = "webkit") {engineVs = testVs (/ applewebkit\ / [\ d.] + / ig);} else if (engine = "gecko") {engineVs = testVs (/ gecko\ / [\ d.] + / ig);} else if (engine = = "presto") {engineVs = testVs (/ presto\ / [\ d.] + / ig) } else if (engine = = "trident") {engineVs = testVs (/ trident\ / [\ d.] + / ig);} / / Carrier version let supporterVs = "unknow"; if (supporter = "chrome") {supporterVs = testVs (/ chrome\ / [\ d.] + / ig);} else if (supporter = = "safari") {supporterVs = testVs (/ version\ / [\ d.] + / ig) } else if (supporter = = "firefox") {supporterVs = testVs (/ firefox\ / [\ d.] + / ig);} else if (supporter = "opera") {supporterVs = testVs (/ opr\ / [\ d.] + / ig);} else if (supporter = = "iexplore") {supporterVs = testVs (/ (msie [\ d.] +) | (rv: [\ d.] +) / ig)) } else if (supporter = = "edge") {supporterVs = testVs (/ edge\ / [\ d.] + / ig);}

Shell + shell version

Let shell = "none"; let shellVs = "unknow"; if (testUa (/ micromessenger/ig)) {shell = "wechat"; / / Wechat browser shellVs = testVs (/ micromessenger\ / [\ d.] + / ig);} else if (testUa (/ qqbrowser/ig)) {shell = "qq"; / / QQ Browser shellVs = testVs (/ qqbrowser\ / [\ d.] + / ig) } else if (testUa (/ ubrowser/ig)) {shell = "uc"; / / UC browser shellVs = testVs (/ ubrowser\ / [\ d.] + / ig);} else if (testUa (/ 2345explorer/ig)) {shell = "2345"; / / 2345 browser shellVs = testVs (/ 2345explorer\ / [\ d.] + / ig);} else if (testUa (/ metasr/ig)) {shell = "sougou" / / Sogou browser} else if (testUa (/ lbbrowser/ig)) {shell = "liebao"; / / Cheetah browser} else if (testUa (/ maxthon/ig)) {shell = "maxthon"; / / browser shellVs = testVs (/ maxthon\ / [\ d.] + / ig);} else if (testUa (/ bidubrowser/ig)) {shell = "baidu" / / Baidu browser shellVs = testVs (/ bidubrowser [\ d.] + / ig);}

Ultimate combination

The variables obtained according to the above conditions are as follows, and we can merge them into one object output. In this way, you can output a clear browser operating environment, and then you can do whatever you want. It's so convenient.

This paper focuses on the feasibility of the scheme and does not take too much into account the optimization of the code, so the condition judgment is used a lot. If there is any way to optimize the code and reduce the condition judgment, you can make a suggestion in the comments below.

System: system

SystemVs: system version

Platform: platform

Engine: kernel

EngineVs: kernel version

Supporter: carrier

SupporterVs: carrier version

Shell: shell

ShellVs: shell version

Function BrowserType () {const ua = navigator.userAgent.toLowerCase (); const testUa = regexp = > regexp.test (ua); const testVs = regexp = > (ua.match (regexp) + "). Replace (/ [^ 0-9 | _.] / ig,"). Replace (/ _ / ig, "."); / / connect the above if...else condition judgment / /. / / get system, systemVs, platform, engine, engineVs, supporter, supporterVs, shell, shellVs return Object.assign ({engine, / / webkit gecko presto trident engineVs, platform, / / desktop mobile supporter, / / chrome safari firefox opera iexplore edge supporterVs, system, / / windows macos linux android ios systemVs}, shell = = "none"? {}: {shell / / wechat qq uc 2345 sougou liebao maxthon baidu shellVs}) }

Execute BrowserType () in the console, and everything you should have comes out, !

Thank you for your reading. the above is the content of "what the browser running environment is like". After the study of this article, I believe you have a deeper understanding of how the browser running environment is. The specific use of the situation also needs to be verified by practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.