Determine the browser operating environment in detail

Special statement: The original is not easy, shall not be reproduced without authorization or plagiarism, if you need to reprint can contact the author authorization

preface

Looking at the title, you’ll recall that this requirement can be used for many projects. Our front-end applications, which are deployed on Web servers, can be accessed from PC browsers and mobile browsers, and now with the spread of smart devices, we can even be accessed from in-car systems, wearables and TV platforms.

The diversity of devices means that users are everywhere, and sometimes we need to respond to different browser environments. The browser is the carrier of JavaScript, and we can get relevant information from the browser to further process our business logic.

However, there are so many brands of browsers, and some of them use different standards, that it is difficult to make a uniform judgment. Below I outline the most common browser brands and the circumstances under which to use the browser runtime judgment. Browser statistics can be found here.

Top 5 international browser brands: 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 ExplorerorMicrosoft Edge:Windows

Domestic commonly used browser brands: according to the descending order of domestic usage, the development is generally based on the open source Chromium project

Wechat browser
QQ browser
UC browser
360 the browser
2345 the browser
Sogou Browser
Cheetah Browser
Roving browser
Other browsers: so many, so many, I won’t list them

By the way, make fun of this shameless red core browser, clearly is based on Chromium secondary development and then set of a layer of shell, but also have to say that their development of the browser is the world’s fifth largest browser, steal eat not wipe the mouth, or by sharp-sighted users found. Please stamp one, two…

Usage scenarios

Determine whether the user’s browser is desktop or mobile and display the corresponding theme style
Determine whether the user’s browser is on Android or iOS, and jump to the corresponding App download link
Determine whether the user’s browser is wechat side or H5 side, and call wechat share or current browser share
Obtain the kernel and carrier of the user’s browser for collecting the distribution interval of the user’s device platform
Gets the carrier version of the user’s browser to prompt for updates
There are many other use cases, so I won’t give you any examples

The principle of

There’s actually a technical name for dealing with one of these usage scenarios, it’s called browser fingerprints. The requirements we discussed above are only a small part of the browser fingerprint solution, and the browser fingerprint we need to use is the UserAgent.

What is the name of this UserAgent? Quoting baidu’s definition, is a special string header, so that the server can identify the customer’s operating system and version, CPU type, browser carrier and version, browser rendering engine, browser language, browser plug-in, etc. This information is enough to determine the browser environment.

To prepare

At present, many online solutions are only aimed at whether the system is desktop terminal or mobile terminal, Android terminal or iOS terminal, the judgment and acquisition of some browser carriers, and so on. There is no more than a perfect or ultimate solution.

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

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

const ua = navigator.userAgent.toLowerCase();

/ / output
"Mozilla / 5.0 (iphone; CPU iPhone OS 11_0 like MAC OS X) AppleWebKit /604.1.38 (KHTML, like Gecko) Version /11.0 Mobile /15a372 Safari /604.1"
Copy the code

Browser information: Weights are listed in descending order

Browser system: The operating system on which you are running, includingWindows,MacOS,Linux,Android,iOS
Browser Platform: The device platform on which you are running, includingDesktopThe desktop,MobileThe mobile terminal
Browser kernel: Browser rendering engine, includingWebkit,Gecko,Presto,Trident
Browser carrier: Five browser brands, includingChrome,Safari,Firefox,Opera,IExplore/Edge
Browser shell: Developed based on the kernel of five major browser brands, and then set a layer of self-developed technology shell, such as many domestic browser brands

Obtain whether UserAgent contains fields: Determine whether it contains specific fields of the system, platform, kernel, carrier, and shell

const testUa = regexp= > regexp.test(ua);
Copy the code

Obtain the version of the field corresponding to the UserAgent

const testVs = regexp= > ua.match(regexp).toString().replace(/[^0-9|_.]/g."").replace(/_/g.".");
Copy the code

plan

After the above preparations are completed, we will classify the unified browser operating environment according to the weight (system + system version > platform > kernel + carrier + carrier version > shell + shell version) according to the unique fields of system, platform, kernel, carrier and shell.

System + System version

/ / system
let system = "unknow";
if (testUa(/windows|win32|win64|wow32|wow64/g)) {
    system = "windows"; / / Windows
} else if (testUa(/macintosh|macintel/g)) {
    system = "macos"; / / macos systems
} else if (testUa(/x11/g)) {
    system = "linux"; / / Linux system
} else if (testUa(/android|adr/g)) {
    system = "android"; / / the android system
} else if (testUa(/ios|iphone|ipad|ipod|iwatch/g)) {
    system = "ios"; / / ios system
}

// System version
let systemVs = "unknow";
if (system === "windows") {
    if (testUa(/ Windows nt 5.0 | Windows 2000 / g)) {
        systemVs = "2000";
    } else if (testUa(/ Windows nt 5.1 | Windows xp/g)) {
        systemVs = "xp";
    } else if (testUa(/ Windows nt 5.2 | Windows 2003 / g)) {
        systemVs = "2003";
    } else if (testUa(/ Windows nt 6.0 | Windows vista/g)) {
        systemVs = "vista";
    } else if (testUa(/ Windows nt 6.1 | Windows 7 / g)) {
        systemVs = "Seven";
    } else if (testUa(/ Windows nt 6.2 | Windows 8 / g)) {
        systemVs = "8";
    } else if (testUa(/ Windows nt 6.3 | Windows 8.1 / g)) {
        systemVs = "8.1";
    } else if (testUa(10 / g/Windows nt 10.0 | Windows)) {
        systemVs = "10"; }}else if (system === "macos") {
    systemVs = testVs(/os x [\d._]+/g);
} else if (system === "android") {
    systemVs = testVs(/android [\d._]+/g);
} else if (system === "ios") {
    systemVs = testVs(/os [\d._]+/g);
}
Copy the code

platform

let platform = "unknow";
if (system === "windows" || system === "macos" || system === "linux") {
    platform = "desktop"; / / desktop client
} else if (system === "android" || system === "ios" || testUa(/mobile/g)) {
    platform = "mobile"; / / move
}
Copy the code

Core + carrier

let engine = "unknow";
let supporter = "unknow";
if (testUa(/applewebkit/g)) {
    engine = "webkit"; / / its kernel
    if (testUa(/edge/g)) {
        supporter = "edge"; // The edge browser
    } else if (testUa(/opr/g)) {
        supporter = "opera"; // The opera browser
    } else if (testUa(/chrome/g)) {
        supporter = "chrome"; // Chrome
    } else if (testUa(/safari/g)) {
        supporter = "safari"; // The safari browser}}else if (testUa(/gecko/g) && testUa(/firefox/g)) {
    engine = "gecko"; / / gecko kernel
    supporter = "firefox"; // The Firefox browser
} else if (testUa(/presto/g)) {
    engine = "presto"; / / presto kernel
    supporter = "opera"; // The opera browser
} else if (testUa(/trident|compatible|msie/g)) {
    engine = "trident"; / / trident kernel
    supporter = "iexplore"; // iExplore browser
}
Copy the code

Kernel version + carrier version

// Kernel version
let engineVs = "unknow";
if (engine === "webkit") {
    engineVs = testVs(/applewebkit\/[\d._]+/g);
} else if (engine === "gecko") {
    engineVs = testVs(/gecko\/[\d._]+/g);
} else if (engine === "presto") {
    engineVs = testVs(/presto\/[\d._]+/g);
} else if (engine === "trident") {
    engineVs = testVs(/trident\/[\d._]+/g);
}

// The carrier version
let supporterVs = "unknow";
if (supporter === "chrome") {
    supporterVs = testVs(/chrome\/[\d._]+/g);
} else if (supporter === "safari") {
    supporterVs = testVs(/version\/[\d._]+/g);
} else if (supporter === "firefox") {
    supporterVs = testVs(/firefox\/[\d._]+/g);
} else if (supporter === "opera") {
    supporterVs = testVs(/opr\/[\d._]+/g);
} else if (supporter === "iexplore") {
    supporterVs = testVs(/(msie [\d._]+)|(rv:[\d._]+)/g);
} else if (supporter === "edge") {
    supporterVs = testVs(/edge\/[\d._]+/g);
}
Copy the code

Shell + shell version

let shell = "none";
let shellVs = "unknow";
if (testUa(/micromessenger/g)) {
    shell = "wechat"; // Wechat browser
    shellVs = testVs(/micromessenger\/[\d._]+/g);
} else if (testUa(/qqbrowser/g)) {
    shell = "qq"; // QQ browser
    shellVs = testVs(/qqbrowser\/[\d._]+/g);
} else if (testUa(/ucbrowser/g)) {
    shell = "uc"; // UC browser
    shellVs = testVs(/ucbrowser\/[\d._]+/g);
} else if (testUa(/qihu 360se/g)) {
    shell = "360"; // 360 browser (no version)
} else if (testUa(/2345explorer/g)) {
    shell = "2345"; // 2345 browser
    shellVs = testVs(/2345explorer\/[\d._]+/g);
} else if (testUa(/metasr/g)) {
    shell = "sougou"; // Sogou browser (no version)
} else if (testUa(/lbbrowser/g)) {
    shell = "liebao"; // Cheetah Browser (no version)
} else if (testUa(/maxthon/g)) {
    shell = "maxthon"; // Browse the browser
    shellVs = testVs(/maxthon\/[\d._]+/g);
}
Copy the code

The ultimate fit

The following variables are obtained based on the above criteria, which we can combine into one object output. This can output a clear browser running environment, after what you want to do, more convenient.

This article focuses on exploring the feasibility of the scheme, without much consideration of the optimization of the code, so the condition judgment is used a little more, if there is any way to optimize the code, reduce the condition judgment, you can make a suggestion in the comments below yo.

The system:
SystemVs: Indicates the system version
Platform: platform
Engine: the kernel
EngineVs: Kernel version
Carrier supporter:
SupporterVs: indicates the carrier version
Shell: the shell
ShellVs: Shell version

function BrowserType() {
    const ua = navigator.userAgent.toLowerCase();
    const testUa = regexp= > regexp.test(ua);
    const testVs = regexp= > ua.match(regexp).toString().replace(/[^0-9|_.]/g."").replace(/_/g.".");
    // If... Else condition judgment
    / /...
    // Obtain 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 360 2345 sougou liebao maxthon
        shellVs
    });
}
Copy the code

Run BrowserType() on the console, and there you go. Source code details please poke here, like can point to support, thank you.

conclusion

❤️ follow + like + collect + comment + forward ❤️, original is not easy, encourage the author to create more high-quality articles

Follow the public accountIQ front-end, a focus on CSS/JS development skills of the front-end public number, more front-end small dry goods waiting for you oh

Follow and replydataFree access to study materials
Follow and replyInto the group ofPull you into the tech group
Welcome to attentionIQ front-endAnd moreCSS/JS development skillsOnly in the public account push

Determine the browser operating environment in detail

preface

The principle of

To prepare

plan

conclusion

Related Posts

Vue3.0 uses Proxy, why not learn a wave?

How are arrays responsive in VUE?

Functional programming