Script to check the required version of the browser

Tell users which version you have to install for the application to work.

Modern web applications take advantage of the new features of ECMAScript 6, like Promise, methods of Array, also we need to indicate the user, when the browser does not support a feature, it is appropriate to update it and which version at least is required.
The script that we propose is based on the following table of implementations ...

Fonction Chrome Android IE/Edge Firefox Safari
Promise 32 4.4.4 Edge 29 7.1
Array.map 47 4.4 IE9 1.5 9
Array.lastIndexOf 47 4.4 IE9 44 9
Object.keys 5 4.4 IE9 4.2 5
ArrayBuffer 7 4.3 IE10 4 5.1
JSON 1

4.3

 IE8 3.5 4
WebSocket 16 4.4 IE10 6 6
SVG 1 4.4 IE9 1.5 3

These versions are displayed on the Mozilla's website, when available.

Demonstration...

We display navigator.userAgent then the name of the current browser.

Source code to get the current browser:

var browsers = ["Firefox","MSIE","Trident","Edge","Chrome","Safari", "Android"];

function getBrowser(bname) {
  var ua = navigator.userAgent;
  for(var b in browsers) {
    b = browsers[b];
      if(ua.indexOf(b) != -1) return b;
  }	
  return false;
}

var browser = getBrowser();
if(browser == "Trident"|| browser=="MSIE") browser="IE/Edge";
if (browser === false) {
  document.write("Unknown browser.");
} else {
  document.write("Youe browser: " + browser);
}

Universal script to know the required version

Now that we know the browser, it remains in case of incompatibility, to find the first compatible version.

To do it, we convert the table above in a JavaScript object.

var feature = { "Promise":0, "Array.map":1, "Array.lastIndexOf":2, "Object.keys":3, "ArrayBuffer":4, "JSON":5, "WebSocket":6, "SVG":7};
var kbrowser = {"Chrome":0, "Android":1, "IE/Edge":2, "Firefox":3, "Safari":4};

var versions = [
 ["32","4.4.4","Edge","29","7.1"],
 ["47","4.4","IE9","1.5","9"],
 ["47","4.4","IE9","44","9"],
 ["5","4.4","IE9","4.2","5"],
 ["7","4.3","IE10","4","5.1"],
 ["1","4.3","IE8","3.5","4"],
 ["16","4.4","IE10","6","6"],
 ["1","4.4","IE9","1.5","3"]
];

var minVersion = "0";

function versionRequired(fea, bro) {
  document.write(fea + " not supported.<br>");
  var row = feature[fea];
  var column = kbrowser[bro];
  var v = versions[row][column]
  if(v > minVersion)
    minVersion = v;
  return minVersion;	
}

Demonstration

We check that the JSON object is implemented in the current browser, otherwise the script indicates the first version that implements it. Ideally, you download the latest version, but it is not always possible for the user, for example he can not install Edge if has not Windows 10.

if (typeof JSON !== 'object' || typeof JSON.parse !== 'function') { 
  document.write("Required version : " + versionRequired("JSON", browser));
}
else {
  document.write("JSON implemented.");
}

We can now execute a series of checks...

Result

Source code of the tests

if(typeof Array.prototype.map !== "function") versionRequired("Array.map", browser);

if(typeof Array.prototype.lastIndexOf !== "function") versionRequired("Array.lastIndexOf", browser);

if(typeof Object.keys !== "function")  versionRequired("Object.keys", browser);

if (typeof JSON !== 'object' || typeof JSON.parse !== 'function')  versionRequired("JSON", browser)

if (typeof ArrayBuffer !== 'function')  versionRequired("ArrayBuffer", browser);

if (typeof WebSocket !== 'function')  versionRequired("WebSocket", browser);

if(typeof SVGRect === "undefined")  versionRequired("SVG", browser);

if(typeof Promise === "undefined")  versionRequired("Promise", browser);

if(minVersion == "") {
  document.write("All is implemented.");
} else {
 document.write("To use " + browser + " you need at least the version " + minVersion);
}

To customize the tests, you may added rows to the table or remove unnecessary row, and updates the test series according ...

See also