Bazı durumlarda Internet Explorer tarayıcısında bazı özellikleri destekleyemiyoruz. Örneğin Angular, React, Vue gibi frameworklerde yaptığınız projelerde bazen ihtiyacınız olabilir. Bu durumda kullanıcı Explorer ile sisteme girdiğinde ona bozuk bir görüntü vermek pek doğru olmaz. Böyle bir durumda tarayıcıyı tespit etmek ve kullanıcıya bir uyarı göstermek iyi olacaktır. Ona Internet Explorer tarayıcısını desteklemediğimizi ve sistemi sorunsuz kullanması için modern tarayıcılar (Opera, Chrome, Mozilla vb.) kullanması gerektiğini söyleyebiliriz.
Bunun için bazı paketlerde vardır mutlaka ama çok basit bir işlem için paket kurmanıza gerek yok. Birkaç satır JavaScript ile kolayca yapabiliriz. JavaScript ile yaptığımız için otomatik olarak Angular, React, Vue vb. frameworkler ile de bu yöntemi kullanabiliyoruz.
Anahtar kelimemiz: "navigator.userAgent"
Evet navigator.userAgent ile kullanıcının hangi tarayıcıyı kullanarak sitemize girdiğini, mobil tarayıcı ile mi girdi hatta kullandığı tarayıcının sürümü, işletim sistemi bilgisi gibi bilgilere de ulaşabiliriz.
Ancak bazı ince noktalar var. Örneğin ben Opera kullanıyorum ama bu komutu çalıştırdığımda şöyle bir sonuç alıyorum;
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.163 Safari/537.36 OPR/67.0.3575.137
Burada Mozilla, Chrome ve Safari kelimeleri de geçiyor ama gerçekten Opera kullandığımı yakalayabilmek için birkaç kontrol yapmamız gerekiyor. Şöyle ki;
https://developer.mozilla.org/tr/docs/Web/HTTP/Browser_detection_using_the_user_agent
Buradaki tabloya baktığımızda tarayıcıların bazı kelimeleri içermesi bazı kelimeleri içermemesi gerekebiliyor.
Opera tarayıcısını da yakalayabilmek için navigator.userAgent içerisinde Opera 15 ve üzeri için OPR/versiyon, Opera 12 ve daha düşük sürümleri için Opera/versiyon yazması gerekiyor.
Yani kısaca Opera 15 ve üzerini yakalamak için;
navigator.userAgent.match(/opr/i)
Bu komutu çalıştırdığımızda sonuç null değilse kullanılan tarayıcı Operadır.
Aslında bütün iş bu kadar.
Internet Explorer için;
navigator.userAgent.match(/trident/i)
Örneğin;
if (navigator.userAgent.match(/trident/i) !== null) { // Internet Explorer }
Microsoft Edge için;
navigator.userAgent.match(/edg/i)
Evet kullanım bu şekilde.
Şu şekilde de güzel bir örnek buldum ve biraz oynama yapıp onuda paylaşmak istedim;
const browser = (function() { const test = function(regexp) { return regexp.test(window.navigator.userAgent); } switch (true) { case test(/edg/i): return "Edge"; case test(/opr/i) || test(/opera/i): return "Opera"; case test(/chrome/i) && !!window.chrome: return "Chrome"; case test(/MSIE/i): return "Internet Explorer 10-"; case test(/trident/i): return "Internet Explorer 11"; case test(/firefox/i): return "Firefox"; case test(/safari/i): return "Safari"; default: return "Other"; } })(); console.log(browser);