Identifying the Browser

The Navigator Object (window.navigator) contains information about the visitor's browser. It allows your JavaScript code to figure out what kind of device, browser, or internet connection the user is currently using.

Common Navigator Properties

1. navigator.userAgent This is the most commonly used property. It returns a string containing the browser name, version, and operating system.

console.log(navigator.userAgent);
// Output might look like: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36..."

2. navigator.language Returns the preferred language of the user's browser, which is fantastic for localization (displaying your site in different languages).

console.log(navigator.language); // "en-US"

3. navigator.onLine Returns a boolean indicating whether the browser is currently connected to the internet.

if (navigator.onLine) {
    console.log("Himanshu, you are online!");
} else {
    console.log("No internet connection. Please check your WiFi.");
}

4. navigator.geolocation Allows you to request the user's physical location (GPS coordinates). This requires the user to explicitly click "Allow" on a browser popup.

navigator.geolocation.getCurrentPosition(position => {
    console.log(position.coords.latitude);
    console.log(position.coords.longitude);
});

💡 Himanshu's Tip:

Never rely purely on navigator.userAgent to detect browsers (called "Browser Sniffing") because users and browsers can easily fake this string. Instead, use "Feature Detection" (checking if a specific feature exists on the window object before trying to use it).

Interview Questions

1. What kind of information does the navigator.userAgent string provide?
2. Why is "Browser Sniffing" considered a bad practice compared to "Feature Detection"?
3. What property would you use to warn a user if they lose their internet connection while filling out a form?