Conditionally display message to the user that we support only Chrome, firefox, edge browsers using angular

Question

I want to show a message saying We support Chrome, Safari, Firefox and Edge browsers only conditionally when any user comes from other browsers other than these like Opera etc. So how to achieve this using angular 10? Can anybody show me a small code snippet?

I tried with this code but its working for only chrome.

const userAgent = navigator.userAgent;
    let browser = "unkown";
    this.browserDetection = (/chrome|crios/i).test(userAgent) && !(/opr|opera|chromium|edg|ucbrowser|googlebot/i).test(userAgent) ? 'Chrome' : browser;
    if(this.browserDetection === browser){
        this.displayMsg = "*Supported browser is Google Chrome"
    }

Thanks.

Answer 1

Generally this type of approach isn't ideal. It's better to solve the issue as to why you need to detect the browser type.

A good article to read is this: https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent

It gives some great advice and some strings to look for in the user-agent when detecting different browsers.