Rendering engine UA sniffer

engine-ua-sniffer.js

// This is a minimal UA sniffer, that only cares about the rendering/JS engine
// name and version, which should be enough to do feature discrimination and
// differential code loading.
//
// This is distinct from things like https://www.npmjs.com/package/ua-parser-js
// which distinguish between different branded browsers that use the same rendering
// engine. That sort of distinction is maybe useful for analytics purposes, but
// for differential code loading it is overcomplicated.
//
// This is meant to demonstrate that UA sniffing is not really that hard if you're
// trying to accomplish things like https://github.com/whatwg/html/issues/4432.

function getRenderingEngine() {
  // Order is important because of how browsers pretend to be each other
  
  const edge = /Edge\/([^ ]+)/.exec(navigator.userAgent);
  if (edge) {
    return { engine: "EdgeHTML", version: edge[1] };
  }
  
  // Will also catch anything using Blink (e.g. Samsung Browser)
  const chrome = /Chrome\/([^ ]+)/.exec(navigator.userAgent);
  if (chrome) {
    return { engine: "Blink", version: chrome[1] };
  }
  
  // Will also catch anything using WebKit (e.g. Chrome iOS)
  const safari = /AppleWebKit\/([^ ]+)/.exec(navigator.userAgent);
  if (safari) {
    return { engine: "WebKit", version: safari[1] };
  }
  
  // Will also catch anything using Gecko (e.g. Iceweasel)
  const firefox = /Firefox\/([^ ]+)/.exec(navigator.userAgent);
  if (firefox) {
    return { engine: "Gecko", version: firefox[1] };
  }

  // Assume too old; serve the lowest-level code you support.
  // Could be Presto (old Opera), Trident (IE), Lynx, ...
  return null;
}