Browser version test script required

Tell users which version to switch to for the program to work.

Modern applications use new ECMAScript 6 features such as promised, Array methods, so it is necessary to tell the user when their browser does not support the feature that it should be updated, and at least which version it supports.

The scenario we propose is based on the following implementation table...

Function Chrome Android IE/Edge Firefox Safari
Promised 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 posted on the Mozilla website when available .

Demonstration...

navigator.userAgent is displayed, followed by the name of the current browser.

Source code to identify 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("Navigateur inconnu.");
} else {
  document.write("Votre navigateur: " + browser);
}

General scenario for determining the required version

Now that we know the browser, it remains in case of incompatibility to find the first compatible version. Ideally, we will download the latest version, but this is not always possible for the user, for example, he cannot install Edge if he does not have Windows 10.

To do this, the table above is converted to 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) {
  var row = feature[fea];
  var column = kbrowser[bro];
  var v = versions[row][column]
  if(v > minVersion)
    minVersion = v;
  return minVersion;	
}

Display

Verify that the JSON object is implemented in the current browser, otherwise specify the first version that implements it.

if (typeof JSON !== 'object' || typeof JSON.parse !== 'function') { 
  document.write("Version requise : " + versionRequired("JSON", browser));
}
else {
  document.write("JSON implémenté.");
}

Now we can run a series of tests...

Result

Test Source Code

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("Tout est implémenté.");
} else {
 document.write("Pour utiliser " + browser + " il vous faut au moins la version " + minVersion);
}

To set up tests, add rows to the table or remove unnecessary rows and update the test series accordingly...

See also