Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to get the code name and product name of the browser in JavaScript?
When a user accesses a web application, the JavaScript navigator object contains details about the browser they are currently using. Since each browser functions differently in how it interprets JavaScript, the navigator object helps in adapting your application to the user's browser preferences.
The browser engine or product name can be accessed in JavaScript using the navigator.product property. However, in modern browsers, navigator.product always returns "Gecko" for compatibility reasons, regardless of the actual browser being used.
Navigator.product Property
Syntax
navigator.product
Example 1: Getting Browser Product Name
This example demonstrates how to access the navigator.product property to get the browser's product name:
<!DOCTYPE html>
<html>
<head>
<title>Browser Product Name - TutorialsPoint</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="result"></div>
<script>
let productName = navigator.product;
document.getElementById("result").innerHTML = "Browser product name: " + productName;
</script>
</body>
</html>
Browser product name: Gecko
Navigator.appCodeName Property
The navigator.appCodeName property returns the code name of the browser. Like navigator.product, this property always returns "Mozilla" in all modern browsers for compatibility reasons.
Syntax
navigator.appCodeName
Example 2: Getting Browser Code Name
This example shows how to retrieve the browser's code name using the navigator.appCodeName property:
<!DOCTYPE html>
<html>
<head>
<title>Browser Code Name - TutorialsPoint</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="result"></div>
<script>
let codeName = navigator.appCodeName;
document.getElementById("result").innerHTML = "Browser code name: " + codeName;
</script>
</body>
</html>
Browser code name: Mozilla
Alternative: Using navigator.userAgent
For more accurate browser detection, consider using navigator.userAgent which provides detailed information about the browser and operating system:
<!DOCTYPE html>
<html>
<head>
<title>User Agent String - TutorialsPoint</title>
</head>
<body>
<div id="result"></div>
<script>
let userAgent = navigator.userAgent;
document.getElementById("result").innerHTML = "User Agent: " + userAgent;
</script>
</body>
</html>
Key Points
-
navigator.productalways returns "Gecko" in modern browsers -
navigator.appCodeNamealways returns "Mozilla" in modern browsers - Both properties are maintained only for backward compatibility
- Use
navigator.userAgentfor actual browser identification
Conclusion
While navigator.product and navigator.appCodeName provide standardized values for compatibility, they don't offer real browser identification. For practical browser detection, use navigator.userAgent or feature detection instead.
562 Views
