Judge the browser running environment in detail (probably the most comprehensive judgment, it's worth seeing)

Pay attention to Uzero public number, more front-end small dry goods are waiting for you!

Preface

Seeing the title, you can remember that this requirement can be used in many projects. The front-end applications we deploy on the Web server can be accessed by either PC browser or mobile browser. With the promotion of smart devices, we can even access them on the vehicle system, wearable devices and TV platforms.

The diversity of devices makes users everywhere. Sometimes we need to make corresponding processing according to different browser running environment. Browser is the carrier of JavaScript. We can get relevant information from browser to further process our business logic.

However, there are many browser brands, and some browsers use different standards, which makes it difficult to make a unified judgment. I'll give you a general list of the commonly used browser brands and how to use the browser running environment. For browser related statistics, please refer to Here.

Top five 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 Explorer or Microsoft Edge: Windows

Domestic common browser brands: in descending order of domestic usage rate, they are generally developed based on the open source project Chromium.

  • Wechat browser
  • QQ browser
  • UC browser
  • 2345 browser
  • Sogou browser
  • Cheetah browser
  • Travel browser
  • Baidu browser: Baidu announced to stop service on April 30, 2019
  • Other browsers: many, many, countless, I won't list them

By the way, this shameless red core browser is obviously based on Chromium for the two time development, and sets up another layer of shell. It has to say that the browser developed by him is the fifth largest browser in the world. For details, please stamp. one,two,three. . . .

Usage scenarios

  • Determine whether the user browser is desktop or mobile, and display the corresponding theme style
  • Judge whether the user's browser is Android or iOS, and jump to the corresponding App download link.
  • Judge whether the user browser is wechat or H5, call wechat sharing or current browser sharing
  • Obtain the kernel and carrier of user browser, which is used to count the platform distribution interval of user equipment.
  • Obtain the carrier version of the user's browser to prompt for update information
  • In fact, there are many use scenarios, so we will not give examples one by one.

principle

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

Where is the user agent sacred? The Chinese translation is the user agent. The definition of Baidu is a special string header, which enables the server to identify the operating system and version used by customers, CPU type, browser carrier and version, browser rendering engine, browser language, browser plug-in, etc. And this information is enough for us to judge the browser running environment.

Get ready

At present, many online solutions only focus on whether the system is desktop or mobile, Android or iOS, the judgment and acquisition of some browser carriers, and so on. There is no 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 the relevant browser information (as follows), and then through the system, platform, kernel, carrier, shell of the unique fields to classify and unify, organize a complete browser running 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"

Browser information: weight in descending order

  • Browser system: the operating system running, including Windows, Mac OS, Linux, Android, iOS
  • Browser platform: the running device platform, including Desktop, 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: developed based on the core of five major browser brands, and then a layer of self-developed technology shell, such as many domestic browser brands

Get whether the UserAgent contains fields: judge whether it contains specific 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, ".");

programme

After the above preparations are completed, we will classify the running environment of the unified browser according to the specific fields of the system, platform, kernel, carrier and shell according to the weight (< font color = "ᦦ > system + system version > platform > kernel + carrier + kernel version + carrier version > shell + shell version < / font >).

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 = "2000";
    } else if (testUa(/windows nt 5.1|windows xp/ig)) {
        systemVs = "xp";
    } else if (testUa(/windows nt 5.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._]+/ig);
} else if (system === "android") {
    systemVs = testVs(/android [\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 end
} else if (system === "android" || system === "ios" || testUa(/mobile/ig)) {
    platform = "mobile"; // Mobile terminal
}

Core + 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"; // Travel browser
    shellVs = testVs(/maxthon\/[\d.]+/ig);
} else if (testUa(/bidubrowser/ig)) {
    shell = "baidu"; // Baidu browser
    shellVs = testVs(/bidubrowser [\d.]+/ig);
}

Ultimate fit

According to the above conditions, the variables obtained are as follows. We can combine them into an object output. In this way, you can output a clear browser running environment, and do what you want later, which is more convenient.

This paper focuses on the feasibility of the scheme, without too much consideration of code optimization, so conditional judgment is used a little more. If there is any way to optimize the code and reduce conditional 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() on the console, and all of them will come out, ha ha! Please stamp the source code details Here , like can point to like under the support, thanks.

epilogue

At the end of the article, I've summed up almost. If I think about what else is missing in the final solution of browser running environment, I will continue to complete this article. At the same time, I hope that you stubborn friends can supplement the main points in the article or put forward your own opinions. Welcome to comment or add below, like a point like or receive a hide, to ensure that you can use in development.

Keywords: Javascript Windows shell Android iOS

Added by ChrisF79 on Thu, 17 Oct 2019 07:15:18 +0300

Popular Keywords

©2024 Programming VIP