javascript - navigationend - Angular 2: verifica si el navegador del usuario es compatible

router events subscribe angular 4

Question

Estoy escribiendo una aplicación de Angular 2, pero estoy consciente de que algunos usuarios pueden no estar usando un navegador que sea compatible con Angular 2.

Tengo una verificación de si Javascript está habilitado, estoy más interesado en saber si el navegador del usuario no admite ciertas funciones JS / HTML5 / otras requeridas por Angular 2.

¿Cuál sería la mejor manera de evaluar si el navegador del usuario admite Angular 2 y mostrar un mensaje si no?

Soy consciente de, por ejemplo, Modernizer , pero no estoy seguro de por dónde comenzar, ya que el enfoque de Modernizer parece estar en el montaje de verificaciones de compatibilidad poco a poco en lugar de proporcionar una solución que verifique la compatibilidad de marcos completos.

Answer 1

Angular 2, y mostrar un mensaje si no?

Es posible que la versión de los navegadores que admite angularmente no sea la versión de los navegadores en los que funciona su aplicación (puede ser más o puede ser menos).

Tienes que hacer chequeos individuales del navegador. Ej. Detecte 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;
}

Answer 2

No todos los navegadores son totalmente compatibles con el estándar ES6 (ES2015) todavía.

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

Si desea utilizar las funciones de idioma de ES6 para su aplicación Angular 2, debe incluir el complemento ES6 para que su navegador esté a la altura de las especificaciones:

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

Dicho esto, IE parece ser la excepción. Hay polifills adicionales que debe incluir para ser compatible con IE:

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

Si desea apuntar a ES5 (estándar anterior), debe asegurarse de escribir su aplicación angular solo con las funciones de idioma de ES5. En general, hay más soporte de navegador para las características de ES5, pero no es perfecto:

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

Por supuesto, hay un problema para eso también:

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