When it is necessary to identify the browser being used by a user, JavaScript provides a straightforward method. The JavaScript object, known as navigator, offers comprehensive data regarding the browser in use.Among its many properties, the navigator.userAgent property stands out as a crucial string that encapsulates details about the browser, operating system, and more.Displaying the navigator.userAgent value can be achieved through various methods:Alert// Display in an alert box
alert(navigator.userAgent);
Document.write// Write it in the HTML document
document.write(navigator.userAgent);
console.log()// Display it in the browser’s developer tool
// This is ideal
// Use console.log() when you’re developing/experimenting JavaScript
console.log(navigator.userAgent);
In the case of Internet Explorer 11 on Windows 7, the output would be:Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; MASM; .NET4.0C; .NET4.0E; rv:11.0) like Gecko
However, the navigator.userAgent string is often a lengthy, non-intuitive representation. To make use of this information or present it to users, it is essential to parse the string.Given my proficiency with regular expressions is limited, I am grateful for the Detect.js library by Darcy Clarke, which simplifies parsing the string into a human-readable and manageable JavaScript object.Here’s how you can display the browser name, version, and operating system in your console:// Create ‘user’ object that will contain Detect.js stuff
// Call detect.parse() with navigator.userAgent as the argument
var user = detect.parse(navigator.userAgent);
// Display some property values in my browser’s dev tools console
console.log(
user.browser.family
user.browser.version
user.os.name
);
In Firebug, you would see:Firefox 30 Windows 7
And in Chrome DevTools on the same machine:Chrome 35 Windows 7
Conditional statements can be employed to target specific browsers.For instance, to target desktop Safari, you might write:if (user.browser.family === ‘Safari’) {
alert(‘You’re using the Safari browser’);
}
A comprehensive table of parsed properties is available for reference:
Property
Description
Browser’s name
Browser’s name and version number
Browser’s full version
Browser’s major version number
Browser’s minor version number
Browser’s patch number
Device name
Device name and version
Device full version
Device’s major version number
Device’s minor version number
Device’s patch number
Type of device (e.g. “Desktop” or “Mobile”)
Manufacturer of the device
Operating system name
Operating system name a full version
Operating system’s full version
Operating system’s major version number
Operating system’s minor version number
Operating system’s patch number
Note: If any property cannot be parsed, its value will be null or undefined. If displaying this information to users, it is advisable to include conditional statements for null and undefined values.It is not advisable to rely on JavaScript browser detection.Moreover, the techniques described should never be used for mission-critical applications.The reasons for this are:JavaScript browser detection is not reliableJavaScript can be disabled by users.With the vast array of browsers and versions available today and those to come, browser detection becomes impractical and difficult to maintain in an evolving codebase.Feature detection is a better optionInstead of browser detection, feature detection is a more effective approach, especially when checking for specific browser capabilities, such as HTML5 APIs like WebRTC or Canvas.Using WebRTC as an example, the browser support status can be viewed on caniuse.com:
Using browser detection to determine WebRTC capability would necessitate numerous conditional statements and updates with each new browser version release.Furthermore, the table only lists a subset of browsers; it does not account for other browsers currently on the market or those yet to be developed.Using browser-support reference tables is also unreliable, as they are maintained by individuals like you and me, who may face challenges in keeping up with updates.Instead, it is recommended to check in real-time if the desired feature is available in the client’s browser, a method known as feature detection.For instance, to check for WebRTC capability, we can test the presence of the getUserMedia function:// hasWebRTC is undefined
// if .getUserMedia() (and its variants) is not available
var hasWebRTC = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia;
if (hasWebRTC) {
alert(‘This browser is fully or partially WebRTC-capable’);
}
For more advanced feature detection, consider using the Modernizr JavaScript library.JavaScript browser detection is most useful for non-essential progressive enhancement scenarios, such as enhancing the user experience for specific browsers.
Responsive Full Background Image Using CSS
7 Crazy Tips That Will Help You Become a Better Coder
5 Good Habits That Will Make You a Better Coder
