jQuery-based Browser Detection and Class Addition

jQuery-Browser-Detection.js

function applyUserAgentClasses() { // jQuery.browser emulated for jQ 1.9+ support
  jQuery.browser = {};
  jQuery.browser.mozilla = false;
  jQuery.browser.webkit = false;
  jQuery.browser.opera = false;
  jQuery.browser.msie = false;

  var nAgt = navigator.userAgent;
  jQuery.browser.name  = navigator.appName;
  jQuery.browser.fullVersion  = ''+parseFloat(navigator.appVersion);
  jQuery.browser.majorVersion = parseInt(navigator.appVersion,10);
  var nameOffset,verOffset,ix;

  // As usual, MSIE has to be a unique and special snowflake (IE11 has new UA strings)
  if (
    nAgt.indexOf("Mozilla")!=-1 &&
    nAgt.indexOf("Trident")!=-1 &&
    nAgt.indexOf("rv:11")!=-1 &&
    nAgt.indexOf("like Gecko")!=-1 &&
    nAgt.indexOf("Windows")!=-1
  ) { // This is almost certainly IE11, although it's harder to be certain anymore:
    verOffset = nAgt.indexOf("rv:") + 3;
    jQuery.browser.msie = true;
    jQuery.browser.name = "Microsoft Internet Explorer";
    jQuery.browser.fullVersion = nAgt.substring(verOffset);
    jQuery.browser.fullVersion = jQuery.browser.fullVersion.substring(0, jQuery.browser.fullVersion.indexOf(")"));
    $('body').addClass('windows').addClass('ie').addClass('v-11');
    if (jQuery.browser.fullVersion >= 11) maxConcurrentRequests = 13;
    else if (jQuery.browser.fullVersion >= 10) maxConcurrentRequests = 8;
  }
  // In Opera, the true version is after "Opera" or after "Version"
  else if ((verOffset=nAgt.indexOf("Opera"))!=-1) {
    jQuery.browser.opera = true;
    jQuery.browser.name = "Opera";
    jQuery.browser.fullVersion = nAgt.substring(verOffset+6);
    if ((verOffset=nAgt.indexOf("Version"))!=-1)
      jQuery.browser.fullVersion = nAgt.substring(verOffset+8);
    if (jQuery.browser.fullVersion >= 10) maxConcurrentRequests = 8;
    else maxConcurrentRequests = 4;
  }
  // In MSIE, the true version is after "MSIE" in userAgent
  else if ((verOffset=nAgt.indexOf("MSIE"))!=-1) {
    jQuery.browser.msie = true;
    jQuery.browser.name = "Microsoft Internet Explorer";
    jQuery.browser.fullVersion = nAgt.substring(verOffset+5);
    if (jQuery.browser.fullVersion >= 11) maxConcurrentRequests = 13;
    else if (jQuery.browser.fullVersion >= 10) maxConcurrentRequests = 8;
    else if (jQuery.browser.fullVersion < 8) maxConcurrentRequests = 2;
    else maxConcurrentRequests = 6;
  }
  // In Chrome, the true version is after "Chrome"
  else if ((verOffset=nAgt.indexOf("Chrome"))!=-1) {
    jQuery.browser.webkit = true;
    jQuery.browser.chrome = true;
    jQuery.browser.name = "Chrome";
    jQuery.browser.fullVersion = nAgt.substring(verOffset+7);
  }
  // In Safari, the true version is after "Safari" or after "Version"
  else if ((verOffset=nAgt.indexOf("Safari"))!=-1) {
    jQuery.browser.webkit = true;
    jQuery.browser.name = "Safari";
    jQuery.browser.fullVersion = nAgt.substring(verOffset+7);
    if ((verOffset=nAgt.indexOf("Version"))!=-1)
      jQuery.browser.fullVersion = nAgt.substring(verOffset+8);
  }
  // In Firefox, the true version is after "Firefox"
  else if ((verOffset=nAgt.indexOf("Firefox"))!=-1) {
    jQuery.browser.mozilla = true;
    jQuery.browser.name = "Firefox";
    jQuery.browser.fullVersion = nAgt.substring(verOffset+8);
  }
  // In most other browsers, "name/version" is at the end of userAgent
  else if ( (nameOffset=nAgt.lastIndexOf(' ')+1) <
      (verOffset=nAgt.lastIndexOf('/')) )
  {
    jQuery.browser.name = nAgt.substring(nameOffset,verOffset);
    jQuery.browser.fullVersion = nAgt.substring(verOffset+1);
    if (jQuery.browser.name.toLowerCase()==jQuery.browser.name.toUpperCase()) {
      jQuery.browser.name = navigator.appName;
    }
  }
  // trim the fullVersion string at semicolon/space if present
  if ((ix=jQuery.browser.fullVersion.indexOf(";"))!=-1)
    jQuery.browser.fullVersion=jQuery.browser.fullVersion.substring(0,ix);
  if ((ix=jQuery.browser.fullVersion.indexOf(" "))!=-1)
    jQuery.browser.fullVersion=jQuery.browser.fullVersion.substring(0,ix);

  jQuery.browser.majorVersion = parseInt(''+jQuery.browser.fullVersion,10);
  if (isNaN(jQuery.browser.majorVersion)) {
    jQuery.browser.fullVersion  = ''+parseFloat(navigator.appVersion);
    jQuery.browser.majorVersion = parseInt(navigator.appVersion,10);
  }
  jQuery.browser.version = jQuery.browser.majorVersion;

  jQuery.each(jQuery.browser, function(i) {
    if ($.browser.webkit) $('body').addClass('webkit');
    if ($.browser.msie) $('body').addClass('ie');
    if ($.browser.mozilla) $('body').addClass('mozilla');
    if ($.browser.opera) $('body').addClass('opera');
    if ($.browser.chrome) $('body').addClass('chrome');
    else if ($.browser.webkit) { // Safari requires special attention:
      $('body').addClass('safari');
      jQuery.browser.safari = true;
      jQuery.browser.name = "Safari";
      jQuery.browser.fullVersion = nAgt.substring(verOffset+7);
      if ((verOffset=nAgt.indexOf("Version"))!=-1) jQuery.browser.fullVersion = nAgt.substring(verOffset+8);
    }
  });

  $('body').addClass('v-'+jQuery.browser.majorVersion);
  if (navigator.userAgent.match(/iPad/i) != null) $('body').addClass('ipad').addClass('ios');
  if (navigator.userAgent.match(/iPhone/i) != null) $('body').addClass('iphone').addClass('ios');
  if (navigator.userAgent.match(/iPod/i) != null) $('body').addClass('ipod').addClass('ios');
  if (navigator.userAgent.match(/webOS/i) != null) $('body').addClass('web-os');
  if (navigator.userAgent.match(/Android/i) != null) $('body').addClass('android');
  if (navigator.userAgent.match(/Blackberry/i) != null) $('body').addClass('blackberry');
  if (navigator.userAgent.match(/mobile/i) != null) $('body').addClass('mobile');
  if (navigator.userAgent.match(/IEMobile/i) != null) $('body').addClass('ie-mobile');
  if (navigator.userAgent.match(/Jasmine/i) != null) $('body').addClass('jasmine');
  if (navigator.userAgent.match(/Fennec/i) != null) $('body').addClass('fennec');
  if (navigator.userAgent.match(/Blazer/i) != null) $('body').addClass('blazer');
  if (navigator.userAgent.match(/Minimo/i) != null) $('body').addClass('minimo');
  if (navigator.userAgent.match(/MOT-/i) != null) $('body').addClass('mot');
  if (navigator.userAgent.match(/Nokia/i) != null) $('body').addClass('nokia');
  if (navigator.userAgent.match(/SAMSUNG/i) != null) $('body').addClass('samsung');
  if (navigator.userAgent.match(/Polaris/i) != null) $('body').addClass('polaris');
  if (navigator.userAgent.match(/LG-/i) != null) $('body').addClass('lg');
  if (navigator.userAgent.match(/SonyEricsson/i) != null) $('body').addClass('sony-ericsson');
  if (navigator.userAgent.match(/SIE-/i) != null) $('body').addClass('sie');
  if (navigator.userAgent.match(/AUDIOVOX/i) != null) $('body').addClass('audiovox');
  if (navigator.userAgent.match(/Palm Pre/i) != null) $('body').addClass('palm-pre');
  if (navigator.userAgent.match(/OmniWeb/i) != null) $('body').addClass('omniweb');
  if (navigator.userAgent.match(/iCab/i) != null) $('body').addClass('icab');
  if (navigator.userAgent.match(/KDE/i) != null) $('body').addClass('konqueror');
  if (navigator.userAgent.match(/Camino/i) != null) $('body').addClass('camino');
  if (navigator.userAgent.match(/Netscape/i) != null) $('body').addClass('netscape');
  if (navigator.platform.match(/Win/i) != null) $('body').addClass('windows');
  if (navigator.platform.match(/Mac/i) != null) $('body').addClass('mac');
  if (navigator.platform.match(/Linux/i) != null) $('body').addClass('linux');
}

I'd like to modernize this and make a new NPM package with little to no dependencies that adds classes to the body in this manner.

There are some other libraries out there that do some browser detection, but none meet all of these needs yet:

• https://github.com/KennethanCeyer/browser-detect
• https://npmjs.com/package/detect-browser
• https://www.npmjs.com/package/@braintree/browser-detection

Another feature I'd like to further explore is changing the version classes to be more specific to the relevant detail. In other words, for Chrome version 85.0.4183.121 running on MacOS version 10.13.6 (High Sierra), instead of adding the class "chrome" and "v-85", I would prefer that we add:

• chrome
• browser-major-v-85
• browser-minor-v-0
• browser-triv-v-4183.121
• macos
• os-major-v-10
• os-minor-v-13
• os-triv-v-6
• non-pwa (or maybe just web)

Looks like a good place to start would be to fork this NPM package. I'm not sure whether there's an open-source option there, though... I need to see what it looks like upon downloading the package.

I also like what I've seen so far of Bowser, especially with regard to the .satisfies chaining option.