Angular 2: проверьте совместимость браузера пользователя

Я пишу приложение Angular 2, но сознаю, что некоторые пользователи могут не использовать браузер, который может поддерживать Angular 2.

У меня есть проверка того, включен ли Javascript, меня больше интересует, не поддерживает ли пользовательский браузер некоторые JS/HTML5/другие функции, необходимые для Angular 2.

Каким будет лучший способ оценить, поддерживает ли браузер пользователя Angular 2 и отображает сообщение, если нет?

Я знаю, например, Модернизатор, но не уверен, с чего начать, поскольку фокус Модернизатора, похоже, заключается в сборке проверок совместимости по частям, а не в предоставлении решения, которое проверяет для совместимости целых фреймворков.

Ответ 1

Angular 2 и отобразить сообщение, если нет?

Версия браузеров, поддерживаемая официально angular, может быть не версией браузеров, которые ваше приложение работает (это может быть больше или может быть меньше).

Вам нужно делать индивидуальные проверки браузера. например Обнаружить 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;
}

Ответ 2

Не все браузеры полностью поддерживают стандарт ES6 (ES2015).

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

Если вы хотите использовать языковые функции ES6 для своего приложения Angular 2, тогда вы должны включить прорезь ES6, чтобы довести ваш браузер до версии:

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

Как говорится, IE является исключением. Существуют дополнительные полисы, которые необходимо включить для поддержки IE:

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

Если вы хотите настроить таргетинг на ES5 (старый стандарт), вам необходимо убедиться, что вы пишете приложение Angular, используя только языковые функции ES5. В общем, для функций ES5 больше поддержки браузеров, но это не идеально:

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

Конечно, для этого тоже есть прокладка:

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