Подробная оценка операционной среды браузера

JavaScript браузер
Подробная оценка операционной среды браузера

автор:JowayYoung
склад:Github,CodePen
Блог:Официальный сайт,Наггетс,думаю нет,Знай почти
публика:Интерфейс IQ
Специальное заявление: Нелегко быть оригинальным, и перепечатка или плагиат не допускаются без разрешения.Если вам нужно перепечатать, вы можете связаться с автором для получения разрешения.

предисловие

Когда вы видите заголовок, вы можете вспомнить, что это требование можно использовать во многих проектах. Доступ к клиентским приложениям, которые мы развертываем на веб-сервере, можно получить через браузеры ПК или мобильных телефонов, а в сочетании с текущим продвижением интеллектуальных устройств мы можем получить к ним доступ даже на автомобильных системах, носимых устройствах и телевизионных платформах.

Разнообразие устройств делает пользователей повсюду, и иногда нам необходимо выполнять соответствующую обработку в соответствии с различными операционными средами браузера. Браузер является носителем JavaScript, и мы можем получить от браузера соответствующую информацию для дальнейшей обработки нашей бизнес-логики.

Однако существует много брендов браузеров, и некоторые браузеры используют разные стандарты, что затрудняет вынесение единого суждения. Ниже я кратко перечислю наиболее часто используемые бренды браузеров и при каких обстоятельствах можно судить об использовании операционной среды браузера. Статистика, связанная с браузером, может относиться кздесь.

Топ 5 международных брендов браузеров: Сортировать по глобальному использованию в порядке убывания.

  • 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илиMicrosoft Edge:Windows

Отечественные распространенные бренды браузеров: В порядке убывания внутреннего использования, как правило, на основе проектов с открытым исходным кодом.Chromiumразвивать

  • Браузер WeChat
  • QQ-браузер
  • UC Браузер
  • 360 браузер
  • 2345 браузер
  • Согу браузер
  • Гепард Браузер
  • перемещаемый браузер
  • другие браузеры: Их много, много, слишком много, чтобы сосчитать, поэтому я не буду их перечислять.

Кстати, разглагольствовать об этом бессовестномкрасный основной браузер, очевидно, исходя изChromiumПосле вторичной разработки и дополнительного слоя оболочки я должен сказать, что браузер, который я разработал, является пятым по величине браузером в мире, его до сих пор находят зоркие пользователи сети. Нажмите, чтобы узнать подробностиone,two. . .

сцены, которые будут использоваться

  • Определите, является ли браузер пользователя настольным или мобильным, и отобразите соответствующий стиль темы.
  • Определите, является ли браузер пользователя Android или iOS, и перейдите к соответствующей ссылке для загрузки приложения.
  • Определите, является ли браузер пользователя WeChat или H5, и вызовите общий доступ WeChat или общий доступ к текущему браузеру.
  • Получить ядро ​​и носитель браузера пользователя, который используется для подсчета интервала раздачи платформы пользовательского оборудования
  • Получите операторскую версию браузера пользователя для запроса информации об обновлении.
  • На самом деле сценариев использования много, поэтому я не буду перечислять их по одному.

принцип

Для работы с таким сценарием использования на самом деле есть более профессиональное имя, называемоеотпечаток пальца браузера. Требования, о которых мы говорили выше, являются лишь небольшой частью схемы отпечатка браузера, и нам нужно использовать отпечаток браузера.UserAgent.

этоUserAgentГде это святое? Китайский переводпользовательский агент. Цитирование определения Baidu — это специальный строковый заголовок, который позволяет серверу идентифицировать операционную систему и ее версию, тип ЦП, носитель и версию браузера, механизм рендеринга браузера, язык браузера, подключаемые модули браузера и т. д., используемые клиентом. И этой информации нам достаточно, чтобы судить об операционной среде браузера.

Подготовить

В настоящее время многие решения в Интернете предназначены только для того, является ли система настольной или мобильной, Android или iOS, оценкой и приобретением некоторых носителей браузера и т. Д. Не существует идеального или окончательного решения.

Поэтому я использовал множество тестовых платформ, чтобы найти более комплексное решение. Это решение включает систему и версию браузера, платформу браузера, ядро ​​и версию браузера, носитель и версию браузера, оболочку и версию браузера.

Эта схема также основана наnavigator.userAgentПолучите соответствующую информацию о браузере (ниже), а затем классифицируйте и унифицируйте по уникальным полям системы, платформы, ядра, носителя и оболочки, чтобы разобраться в полной операционной среде браузера.

const ua = navigator.userAgent.toLowerCase();

// 输出
"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"

информация о браузере: веса сортируются в порядке убывания

  • Браузерная система: работающая операционная система, включаяWindows,MacOS,Linux,Android,iOS
  • Платформа браузера: Платформа устройства, на которой он работает, в том числеDesktopрабочий стол,Mobileмобильный
  • Ядро браузера: механизм рендеринга браузера, включаяWebkit,Gecko,Presto,Trident
  • Поставщики браузеров: пять основных брендов браузеров, в том числеChrome,Safari,Firefox,Opera,IExplore/Edge
  • Оболочка браузера: разработана на основе ядер пяти основных брендов браузеров, а затем оболочка с собственной технологией, такой как многие отечественные бренды браузеров.

Получить, содержит ли UserAgent поля: Определите, следует ли включать уникальные поля системы, платформы, ядра, носителя и оболочки.

const testUa = regexp => regexp.test(ua);

Получить версию соответствующего поля UserAgent

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

план

После того, как вышеуказанные приготовления будут завершены, мы будем следить за весом (Система + Версия системы > Платформа > Ядро + Несущая + Версия ядра + Версия несущей > Оболочка + Версия оболочки) для классификации единой операционной среды браузера в соответствии с уникальными полями системы, платформы, ядра, носителя и оболочки.

система + версия системы

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

// 系统版本
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 = "7";
    } 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(/windows nt 10.0|windows 10/g)) {
        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);
}

Платформа

let platform = "unknow";
if (system === "windows" || system === "macos" || system === "linux") {
    platform = "desktop"; // 桌面端
} else if (system === "android" || system === "ios" || testUa(/mobile/g)) {
    platform = "mobile"; // 移动端
}

ядро + носитель

let engine = "unknow";
let supporter = "unknow";
if (testUa(/applewebkit/g)) {
    engine = "webkit"; // webkit内核
    if (testUa(/edge/g)) {
        supporter = "edge"; // edge浏览器
    } else if (testUa(/opr/g)) {
        supporter = "opera"; // opera浏览器
    } else if (testUa(/chrome/g)) {
        supporter = "chrome"; // chrome浏览器
    } else if (testUa(/safari/g)) {
        supporter = "safari"; // safari浏览器
    }
} else if (testUa(/gecko/g) && testUa(/firefox/g)) {
    engine = "gecko"; // gecko内核
    supporter = "firefox"; // firefox浏览器
} else if (testUa(/presto/g)) {
    engine = "presto"; // presto内核
    supporter = "opera"; // opera浏览器
} else if (testUa(/trident|compatible|msie/g)) {
    engine = "trident"; // trident内核
    supporter = "iexplore"; // iexplore浏览器
}

Версия ядра + версия оператора

// 内核版本
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);
}

// 载体版本
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);
}

Оболочка + версия оболочки

let shell = "none";
let shellVs = "unknow";
if (testUa(/micromessenger/g)) {
    shell = "wechat"; // 微信浏览器
    shellVs = testVs(/micromessenger\/[\d._]+/g);
} else if (testUa(/qqbrowser/g)) {
    shell = "qq"; // QQ浏览器
    shellVs = testVs(/qqbrowser\/[\d._]+/g);
} else if (testUa(/ucbrowser/g)) {
    shell = "uc"; // UC浏览器
    shellVs = testVs(/ucbrowser\/[\d._]+/g);
} else if (testUa(/qihu 360se/g)) {
    shell = "360"; // 360浏览器(无版本)
} else if (testUa(/2345explorer/g)) {
    shell = "2345"; // 2345浏览器
    shellVs = testVs(/2345explorer\/[\d._]+/g);
} else if (testUa(/metasr/g)) {
    shell = "sougou"; // 搜狗浏览器(无版本)
} else if (testUa(/lbbrowser/g)) {
    shell = "liebao"; // 猎豹浏览器(无版本)
} else if (testUa(/maxthon/g)) {
    shell = "maxthon"; // 遨游浏览器
    shellVs = testVs(/maxthon\/[\d._]+/g);
}

идеальная подгонка

Согласно приведенным выше условиям, полученные переменные выглядят следующим образом, и мы можем объединить их в один выход объекта. Таким образом, можно вывести четкую среду работы браузера, а потом можно делать все, что угодно, что очень удобно.

В этой статье основное внимание уделяется изучению осуществимости решения и не принимает во внимание оптимизацию кода, поэтому часто используется условное суждение.Если есть какой-либо способ оптимизировать код и уменьшить условное суждение, вы можете сделать предложение в комментариях ниже.

  • system:система
  • systemVs: системная версия
  • platform:Платформа
  • engine: ядро
  • engineVs: версия ядра
  • supporter: перевозчик
  • supporterVs: версия оператора
  • shell:оболочка
  • shellVs: версия оболочки
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条件判断
    // ......
    // 获取到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
    });
}

Выполнить на консолиBrowserType(), все должно выйти, ха-ха! Пожалуйста, нажмите для получения подробной информации об источникездесь, если вам это нравится, вы можете поставить палец вверх и поддержать, спасибо.

浏览器类型

Эпилог

❤️Подписаться + Нравится + Избранное + Комментарий + Переслать ❤️, оригинальность это не просто, поощряйте автора к созданию более качественных статей

Обратите внимание на публичный аккаунтIQ前端, внешний общедоступный аккаунт, ориентированный на навыки разработки CSS / JS, вас ждут другие галантереи переднего плана

  • Ответить после подписки资料Получите бесплатные учебные материалы
  • Ответить после подписки进群Втяните вас в группу технического обмена
  • Добро пожаловать, чтобы следоватьIQ前端,БолееНавыки разработки на CSS/JSНажимайте только на публичный аккаунт

Категории