Angular 2:检查用户的浏览器是否兼容

时间:2016-04-26 22:46:16

标签: javascript typescript angular compatibility modernizr

我正在编写一个Angular 2应用程序,但我意识到某些用户可能没有使用支持Angular 2的浏览器。

我检查是否启用了Javascript,我更感兴趣的是用户的浏览器是否不支持Angular 2所需的某些JS / HTML5 /其他功能。

评估用户浏览器是否支持Angular 2的最佳方法是什么,如果不支持则显示消息?

我知道例如Modernizer,但不确定从哪里开始,因为Modernizer的重点似乎是逐步组装兼容性检查而不是提供检查整个框架兼容性的解决方案。

2 个答案:

答案 0 :(得分:22)

  

Angular 2,如果没有显示消息?

角度支持的浏览器版本可能不是您的应用程序可用的浏览器版本(可能更多或可能更少)。

您必须自己进行单独的浏览器检查。例如检测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;
}

答案 1 :(得分:3)

并非所有浏览器都完全支持ES6(ES2015)标准。

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

如果您想为Angular 2应用程序使用ES6语言功能,那么您应该包含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(旧版标准),则需要确保仅使用ES5语言功能编写角度应用。一般来说,ES5功能有更多的浏览器支持,但它并不完美:

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

当然,也有一个垫片:

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