web-dev-qa-db-fra.com

Angular 2: Vérifiez si le navigateur de l'utilisateur est compatible

J'écris une application Angular 2 mais je suis conscient que certains utilisateurs n'utilisent peut-être pas un navigateur prenant en charge Angular 2.

Je vérifie si Javascript est activé, je suis plus intéressé à savoir si le navigateur de l'utilisateur ne prend pas en charge certaines fonctionnalités JS/HTML5/autres requises par Angular 2.

Quelle serait la meilleure façon d'évaluer si le navigateur de l'utilisateur prend en charge Angular 2, et afficher un message sinon?

Je connais par exemple Modernizer , mais je ne sais pas par où commencer car le focus de Modernizer semble être sur l'assemblage des contrôles de compatibilité au coup par coup plutôt que de fournir une solution qui vérifie la compatibilité de frameworks entiers.

javascripttypescriptangularcompatibilitymodernizr
19
Harry

Angulaire 2, et afficher un message sinon?

La version des navigateurs pris en charge angular prend officiellement en charge peut ne pas être la version des navigateurs que votre application fonctionne (elle peut être plus ou moins)).

Vous devez effectuer vous-même des vérifications individuelles du navigateur. par exemple. Détecter IE: http://codepen.io/gapcode/pen/vEJNZN

/**
 * detect IE
 * returns version of IE or false, if browser is not Internet Explorer
 */
function detectIE() {
  var ua = window.navigator.userAgent;

  // Test values; Uncomment to check result …

  // IE 10
  // ua = 'Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)';

  // IE 11
  // ua = 'Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko';

  // IE 12 / Spartan
  // ua = 'Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36 Edge/12.0';

  // Edge (IE 12+)
  // ua = 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2486.0 Safari/537.36 Edge/13.10586';

  var msie = ua.indexOf('MSIE ');
  if (msie > 0) {
    // IE 10 or older => return version number
    return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
  }

  var trident = ua.indexOf('Trident/');
  if (trident > 0) {
    // IE 11 => return version number
    var rv = ua.indexOf('rv:');
    return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);
  }

  var Edge = ua.indexOf('Edge/');
  if (Edge > 0) {
    // Edge (IE 12+) => return version number
    return parseInt(ua.substring(Edge + 5, ua.indexOf('.', Edge)), 10);
  }

  // other browser
  return false;
}
22
basarat

Tous les navigateurs ne prennent pas encore totalement en charge la norme ES6 (ES2015).

https://kangax.github.io/compat-table/es6/

Si vous souhaitez utiliser les fonctionnalités du langage ES6 pour votre application Angular 2), vous devez inclure le shim ES6 pour mettre votre navigateur à jour:

https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js

Cela étant dit, IE semble être l'exception. Il existe des polyfills supplémentaires que vous devez inclure pour prendre en charge IE:

https://npmcdn.com/angular2/es6/dev/src/testing/shims_for_IE.js

Si vous souhaitez cibler ES5 (ancienne norme), vous devez vous assurer que vous écrivez votre angular en utilisant uniquement les fonctionnalités du langage ES5. En général, il existe plus de prise en charge du navigateur pour les fonctionnalités ES5, mais c'est pas parfait:

http://kangax.github.io/compat-table/es5/

Bien sûr, il y a aussi une cale pour cela:

https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.8/es5-shim.min.js

3
pixelbits