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

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

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

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

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

18
angular compatibility javascript modernizr typescript

2 ответов

угловой 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;
}
22

не все браузеры полностью поддерживают стандарт 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, кажется, является исключением. Есть дополнительные polyfills что нужно включить для поддержки IE:

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

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

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

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

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

3