web-dev-qa-db-ja.com

Angular 2：ユーザーのブラウザに互換性があるかどうかを確認する

Angular 2アプリを書いていますが、一部のユーザーはAngular 2。

Javascriptが有効になっているかどうかを確認します。ユーザーのブラウザがAngular 2.で必要な特定のJS/HTML5 /その他の機能をサポートしていないかどうかに興味があります。

ユーザーのブラウザがAngular 2をサポートしているかどうかを評価し、そうでない場合はメッセージを表示する最良の方法は何でしょうか？

私は知っています Modernizer 、しかし、Modernizerの焦点はフレームワーク全体の互換性をチェックするソリューションを提供するのではなく、互換性チェックを部分的に組み立てることにあるように思われるため、どこから始めるべきかはわかりません。

javascripttypescriptangularcompatibilitymodernizr
19
Harry

角度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
basarat

すべてのブラウザがまだ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言語機能のみを使用してangularアプリを作成することを確認する必要があります。完璧ではありません：

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

もちろん、そのためのシムもあります。

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

3
pixelbits