Script de test de version requise de navigateur

Indiquer aux utilisateurs à quelle version il faut passer pour que l'application fonctionne.

Les applications modernes tirent parti des nouvelles fonctionalités d'ECMAScript 6, telles les promises, les méthodes de Array, aussi faut-il indiquer à l'internaute, quand son navigateur ne supporte pas une fonction, qu'il convient de le mettre à jour, et quelle version au moins la supporte.

Le script que nous proposons se base sur le tableau d'implémentations suivant...

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

Ces versions sont affichées sur le site de Mozilla, lorsqu'elles sont disponibles.

Démonstration...

On affiche navigator.userAgent puis le nom du navigateur courant.

Code source pour déterminer le navigateur courant:

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);
}

Script général pour déterminer la version requise

Maintenant que nous connaissons le navigateur, il reste en cas d'incompatibilité, de trouver la première version compatible. Idéalement, on téléchargera la dernière version, mais ce n'est pas toujours possible pour l'utilisateur, par exemple il ne peut installer Edge s'il n'a pas Windows 10.

Pour ce faire on convertit le tableau ci-dessus en objet JavaScript.

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;	
}

Démonstration

On vérifie que l'objet JSON est implémenté dans le navigateur courant, sinon on indique la première version qui l'implémente. 

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

On peut maintenant exécuter une série de tests...

Résultat

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

Pour personnaliser les tests on ajoute des lignes à la table ou on supprime les lignes inutiles, et on met à jour la série de tests en accordance...

Voir aussi