We've recently built a WebExtension for our Web Application as Add-on and extra feature to sell 💰💸 (b/c why not). We decided to serve 4 different browser types:Chrome,Safari,Opera, andFirefox. So we had to figure out which browser is rendering our page to display a browser-specific instructions to the users.

You're lying to me. Aren't You?

Browser detection using the user agent is just sucks!! because it's trivial to spoof thisvalue. For example the snippet below:

navigator.userAgent.indexOf('Chrome')!==-1

returnstrue for bothGoogle Chrome andOpera (since Opera replaces its engine with Blink + V8 used by Chromium) because its UA string looks like Chrome. Thats is not what am looking for. And if we're trying to detect a specific browser, the point of feature-checking is kind of lost.

Check outMDN web docs: Browser detection using the user agent for futher details.

Top-level object FWT

window is the top-level object in theBrowser Object Model (BOM) hierarchy. Every single browser has its own properties such asApplePayError in Safari for instance, in addtion to the standard ones (e.g.window.location,window.console, ...etc).

Solution

/* * Browser detection * @return {String}  */constbrowserDetection=()=>{constbrowsers={firefox:!!window.InstallTrigger,safari:!!window.ApplePaySession,opera:window.opr&&!!window.opr.addons,chrome:window.chrome&&!!window.chrome.webstore};returnObject.keys(browsers).find(key=>browsers[key]===true);};console.log(browserDetection())// browser name expected

• Firefox: The InstallTrigger interface is an interesting outlier in the Apps API.
• Safari:ApplePaySession belongs to the Apple Pay JS API. A session object for managing the payment process on the web.
• Opera:opr self explanatory..opr.addons represent interface in the Add-ons API
• Chrome:chrome.webstore API to initiate app and extension installations "inline" from web page. Notice: this will bedeprecated, thanks toMadison Dickson. Any recommendations are welcome!

Tested in the following "Desktop Browsers":

✓Firefox Quantum Version ~60

✓Google Chrome Version ~67

✓Opera Version ~53

✓Safari Version ~11

Please keep in mind, that solution worked just perfectly in my case, andmight not fit yours.

Demo on Codepen

Feedback are welcome. If you have any suggestions or corrections to make, please do not hesitate to drop me a note/comment.