Soru Açısal 2: Kullanıcının tarayıcısının uyumlu olup olmadığını kontrol etme


Bir Angular 2 uygulaması yazıyorum ancak bazı kullanıcıların Angular 2'yi destekleyebilecek bir tarayıcı kullanamayacağının bilincindeyim.

Javascript'in etkin olup olmadığına dair bir kontrolüm var. Kullanıcının tarayıcısının Angular 2 tarafından istenen belirli JS / HTML5 / diğer özellikleri destekleyip desteklemediğiyle ilgileniyorum.

Kullanıcının tarayıcısının Angular 2'yi destekleyip desteklemediğini ve bir mesaj gösterip göstermediğini değerlendirmenin en iyi yolu ne olurdu?

Biliyorum, ör. moderniserAncak, modernizörün odak noktası bir araya getirme konusunda olduğu gibi nereden başlayacağınızdan emin değilim, tüm çerçevelerin uyumluluğunu kontrol eden bir çözüm sağlamak yerine uyumluluk kontrollerini yerine getirir.


18
2018-04-26 22:46


Menşei




Cevaplar:


Açısal 2 ve değilse bir mesaj gösterilsin mi?

Açısal olarak resmi olarak destekleyen tarayıcıların sürümü, uygulamanızın çalıştığı tarayıcıların sürümü olmayabilir (daha fazla olabilir veya daha az olabilir).

Tek tek tarayıcıyı kendiniz kontrol etmeniz gerekiyor. Örneğin. IE'yi algıla: 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
2018-04-26 23:50



Cevabınız için teşekkür ederim. Çalışmaların az çok desteklendiğini ve tahmin edilmesinin zor olduğunu anladım. Tarayıcı kontrollerini şimdi bir ilk geçiş yöntemi olarak ekliyorum. benzin pompası. Yine de bu soruya kesin bir cevap olup olmadığına meraklıyım. - Harry


Tüm tarayıcılar henüz ES6 (ES2015) standardını tam olarak desteklememektedir.

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

Angular 2 uygulamanız için ES6 dil özelliklerini kullanmak istiyorsanız, tarayıcınızı aşağıdaki özelliklere getirmek için ES6 etiketini eklemelisiniz:

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

Bu söyleniyor, IE istisna gibi görünüyor. IE'yi desteklemek için eklemeniz gereken ek çok sayıda dolgu var:

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

Eğer ES5'i (eski standart) hedeflemek istiyorsanız, sadece ES5 dil özelliklerini kullanarak açısal uygulamanızı yazdığınızdan emin olmanız gerekir. Genel olarak, ES5 özellikleri için daha fazla tarayıcı desteği var, ancak mükemmel değil:

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

Tabi ki bunun için de bir şey var:

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


3
2018-04-27 02:44



Cevabınız için teşekkürler. Angular 2 quickstart kurulumuna göre, Angular 2 ve SystemJS polyfill'lerine ek olarak ES6 ve IE şimleri zaten kullanıyorum, ancak ES5 shim'in farkında değildim. Bununla birlikte, eski standartların uyumsuz tarayıcıları tespit etmesi ve kullanıcılara işlerin çalışmadığı zamanlarda kafasının karışmasına neden olmadığından emin olmak için söylüyorum. - Harry