How to Grasp the Navigator userAgentData Property?
Navigator is an object that provides various properties to retrieve the current web browser features and properties that help developers in choosing the right browser for their application. This “Navigator” object offers a property named “userAgentData” that provides data related to the current web browser like the UI design, font sizes, or interactions to better suit the user’s environment. There are many other properties provided by the navigator object which are briefly discussed in our article1 and article2.
This blog will explain the Navigator object userAgentData property in JavaScript.
How to Grasp the Navigator userAgentData Property?
The information provided by the “userAgentData” property allows developers to search different browser environments and identify any issues that might arise on specific platforms. It is accessible via the “Navigator” object. The values for properties “brands”, “mobile”, and “platform” can be retrieved using the “userAgentData” property of the Navigator object.
Syntax
The navigator “userAgentData” property has the following syntax:
The above syntax returns the values for containing properties like “brands”, “mobile”, and “platform” relative to the web browser.
Let’s have a program to see the practical demonstration:
<h1 style="color: cadetblue;"> Linuxhint </h1><button onclick="brands()"> Retrieve Brands </button>
<button onclick="mobile()"> Retrive Mobile </button>
<button onclick="platform()"> Retrieve Brands </button>
<script>
function brands(){
console.log( navigator.userAgentData.brands )
}
function mobile(){
console.log("You are Viewing on Mobile: " + navigator.userAgentData.mobile)
}
function platform(){
console.log("The Platform or Operating System You are using:\n " + navigator.userAgentData.platform)
}
</script>
</body>
The description of the code displayed in the above code block is as follows:
- First, three “<button>” tags are used that call the “brands()”, “mobile()”, and “platform()” custom-built functions using the “onclick” event listener.
- Inside the “<script>” tag, define the “brands()” function which retrieves web browser brand information using the “navigator.userAgentData.brands” property. Also, display the result retrieved by this property over the console.
- In the same manner, define the “mobile()” and “platform()” functions and utilize the “navigator.userAgentData.mobile” and “navigator.userAgentData.platform” properties respectively.
- These properties return the corresponding data over the console.
The final result appears like this:
The output shows that by clicking on the button the corresponding value gets retrieved and displayed over the console window.
Bonus Tip: Use of Navigator userAgent Property
The “userAgent” property is also provided by the “navigator” object, it returns the name, version, and platform for the current browser which is being used by the user. The practical demonstration of this navigator property is stated below:
The above code is described as:
- First, the “<button>” tag is used along the “onclick” event listener which calls the “browserData()” function.
- Next, this “browserData()” function is defined inside the “<script>” tag. This function utilizes the “navigator.userAgent” property and the result gets displayed over the console.
Preview of the webpage after the completion of the above code:
The output shows that data related to the web browser has been retrieved and displayed over the console window.
You’ve learned the procedure to grasp the navigator userAgentData property.
Conclusion
The “navigator.userAgentData” property retrieves the browser-specific values which helps a lot when developers are creating the application specifically for single or multiple web browsers. This property can retrieve the values for “brands”, “mobile”, and “platform” strings, the values returned vary from browser to browser. The string needs to be attached next to the “navigator.userAgentData” property to return the value only for that string. This blog has successfully explained the process to use the navigator.userAgentData property in JavaScript.
Source: linuxhint.com