How to detect browser in lightning component for desktop and mobile both

Question

I need to detect browser type (IE, Chrome, Safari etc.) in the lightning component but navigator.userAgent is not working in lightning.

Answer 1

There's a much easier way of doing this natively using the $Browser value provider. https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/expr_browser_value_provider.htm

You can access these values using e.g. $A.get('$Browser.isDesktop') in the Javascript.

Here's is an example of the properties available...

Answer 2

you can use this function to detect a browser in Lightning.

({
checkBrowser: function (component) {

var browserType = navigator.sayswho= (function(){
    var ua= navigator.userAgent, tem,
        M= ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
    if(/trident/i.test(M[1])){
        tem=  /\brv[ :]+(\d+)/g.exec(ua) || [];
        alert("IE"+'IE '+(tem[1] || ''));
        return 'IE '+(tem[1] || '');
    }
    if(M[1]=== 'Chrome'){
        tem= ua.match(/\b(OPR|Edge)\/(\d+)/);
        if(tem!= null) return tem.slice(1).join(' ').replace('OPR', 'Opera');
        alert('chrome');
    }
    M= M[2]? [M[1], M[2]]: [navigator.appName, navigator.appVersion, '-?'];
    if((tem= ua.match(/version\/(\d+)/i))!= null) M.splice(1, 1, tem[1]);
    return M.join(' ');
})();
if (browserType.startsWith("IE")) {
    component.set("v.isIE", true);
    alert("IE");
}

} })