Archives/lancedikson_bowser
1
0
Fork 0
mirror of https://github.com/lancedikson/bowser synced 2026-03-02 03:40:27 +00:00
Code Issues Releases Wiki Activity

Document User-Agent Client Hints feature in README and source code

Browse Source 
Co-authored-by: naorpeled <6171622+naorpeled@users.noreply.github.com>
This commit is contained in:
copilot-swe-agent[bot]
2026-02-06 21:16:21 +00:00
parent 45296b224e
commit 3c5236ca16
9 changed files with 1723 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
docs/index.html
View File

@@ -27,7 +27,7 @@
<nav >
<h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Bowser.html">Bowser</a><ul class='methods'><li data-type='method'><a href="Bowser.html#.getParser">getParser</a></li><li data-type='method'><a href="Bowser.html#.parse">parse</a></li></ul></li><li><a href="Parser.html">Parser</a><ul class='methods'><li data-type='method'><a href="Parser.html#getBrowser">getBrowser</a></li><li data-type='method'><a href="Parser.html#getBrowserName">getBrowserName</a></li><li data-type='method'><a href="Parser.html#getBrowserVersion">getBrowserVersion</a></li><li data-type='method'><a href="Parser.html#getEngine">getEngine</a></li><li data-type='method'><a href="Parser.html#getEngineName">getEngineName</a></li><li data-type='method'><a href="Parser.html#getOS">getOS</a></li><li data-type='method'><a href="Parser.html#getOSName">getOSName</a></li><li data-type='method'><a href="Parser.html#getOSVersion">getOSVersion</a></li><li data-type='method'><a href="Parser.html#getPlatform">getPlatform</a></li><li data-type='method'><a href="Parser.html#getPlatformType">getPlatformType</a></li><li data-type='method'><a href="Parser.html#getResult">getResult</a></li><li data-type='method'><a href="Parser.html#getUA">getUA</a></li><li data-type='method'><a href="Parser.html#is">is</a></li><li data-type='method'><a href="Parser.html#isBrowser">isBrowser</a></li><li data-type='method'><a href="Parser.html#parse">parse</a></li><li data-type='method'><a href="Parser.html#parseBrowser">parseBrowser</a></li><li data-type='method'><a href="Parser.html#parseEngine">parseEngine</a></li><li data-type='method'><a href="Parser.html#parseOS">parseOS</a></li><li data-type='method'><a href="Parser.html#parsePlatform">parsePlatform</a></li><li data-type='method'><a href="Parser.html#satisfies">satisfies</a></li><li data-type='method'><a href="Parser.html#some">some</a></li><li data-type='method'><a href="Parser.html#test">test</a></li></ul></li></ul><h3>Global</h3><ul><li><a href="global.html#assign">assign</a></li><li><a href="global.html#find">find</a></li><li><a href="global.html#getAndroidVersionName">getAndroidVersionName</a></li><li><a href="global.html#getBrowserAlias">getBrowserAlias</a></li><li><a href="global.html#getBrowserTypeByAlias">getBrowserTypeByAlias</a></li><li><a href="global.html#getFirstMatch">getFirstMatch</a></li><li><a href="global.html#getMacOSVersionName">getMacOSVersionName</a></li><li><a href="global.html#getSecondMatch">getSecondMatch</a></li><li><a href="global.html#getVersionPrecision">getVersionPrecision</a></li><li><a href="global.html#map">map</a></li><li><a href="global.html#matchAndReturnConst">matchAndReturnConst</a></li></ul>
<h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Bowser.html">Bowser</a><ul class='methods'><li data-type='method'><a href="Bowser.html#.getParser">getParser</a></li><li data-type='method'><a href="Bowser.html#.parse">parse</a></li></ul></li><li><a href="Parser.html">Parser</a><ul class='methods'><li data-type='method'><a href="Parser.html#getBrandVersion">getBrandVersion</a></li><li data-type='method'><a href="Parser.html#getBrowser">getBrowser</a></li><li data-type='method'><a href="Parser.html#getBrowserName">getBrowserName</a></li><li data-type='method'><a href="Parser.html#getBrowserVersion">getBrowserVersion</a></li><li data-type='method'><a href="Parser.html#getEngine">getEngine</a></li><li data-type='method'><a href="Parser.html#getEngineName">getEngineName</a></li><li data-type='method'><a href="Parser.html#getHints">getHints</a></li><li data-type='method'><a href="Parser.html#getOS">getOS</a></li><li data-type='method'><a href="Parser.html#getOSName">getOSName</a></li><li data-type='method'><a href="Parser.html#getOSVersion">getOSVersion</a></li><li data-type='method'><a href="Parser.html#getPlatform">getPlatform</a></li><li data-type='method'><a href="Parser.html#getPlatformType">getPlatformType</a></li><li data-type='method'><a href="Parser.html#getResult">getResult</a></li><li data-type='method'><a href="Parser.html#getUA">getUA</a></li><li data-type='method'><a href="Parser.html#hasBrand">hasBrand</a></li><li data-type='method'><a href="Parser.html#is">is</a></li><li data-type='method'><a href="Parser.html#isBrowser">isBrowser</a></li><li data-type='method'><a href="Parser.html#isEngine">isEngine</a></li><li data-type='method'><a href="Parser.html#isOS">isOS</a></li><li data-type='method'><a href="Parser.html#isPlatform">isPlatform</a></li><li data-type='method'><a href="Parser.html#parse">parse</a></li><li data-type='method'><a href="Parser.html#parseBrowser">parseBrowser</a></li><li data-type='method'><a href="Parser.html#parseEngine">parseEngine</a></li><li data-type='method'><a href="Parser.html#parseOS">parseOS</a></li><li data-type='method'><a href="Parser.html#parsePlatform">parsePlatform</a></li><li data-type='method'><a href="Parser.html#satisfies">satisfies</a></li><li data-type='method'><a href="Parser.html#some">some</a></li><li data-type='method'><a href="Parser.html#test">test</a></li></ul></li></ul><h3>Global</h3><ul><li><a href="global.html#assign">assign</a></li><li><a href="global.html#find">find</a></li><li><a href="global.html#getAndroidVersionName">getAndroidVersionName</a></li><li><a href="global.html#getBrowserAlias">getBrowserAlias</a></li><li><a href="global.html#getBrowserTypeByAlias">getBrowserTypeByAlias</a></li><li><a href="global.html#getFirstMatch">getFirstMatch</a></li><li><a href="global.html#getMacOSVersionName">getMacOSVersionName</a></li><li><a href="global.html#getSecondMatch">getSecondMatch</a></li><li><a href="global.html#getVersionPrecision">getVersionPrecision</a></li><li><a href="global.html#map">map</a></li><li><a href="global.html#matchAndReturnConst">matchAndReturnConst</a></li></ul>
</nav>
<div id="main">
@@ -65,19 +65,23 @@
<li><strong>Multi-platform.</strong> It's browser- and node-ready, so you can use it in any environment.</li>
</ul>
<p>Don't hesitate to support the project on Github or <a href="https://opencollective.com/bowser">OpenCollective</a> if you like it ❤️ Also, contributors are always welcome!</p>
<p><a href="https://opencollective.com/bowser"><img src="https://opencollective.com/bowser/all/badge.svg?label=financial+contributors" alt="Financial Contributors on Open Collective"></a> <a href="https://travis-ci.org/lancedikson/bowser/"><img src="https://travis-ci.org/lancedikson/bowser.svg?branch=master" alt="Build Status"></a> <a href="https://greenkeeper.io/"><img src="https://badges.greenkeeper.io/lancedikson/bowser.svg" alt="Greenkeeper badge"></a> <a href="https://coveralls.io/github/lancedikson/bowser?branch=master"><img src="https://coveralls.io/repos/github/lancedikson/bowser/badge.svg?branch=master" alt="Coverage Status"></a> <img src="https://img.shields.io/npm/dm/bowser" alt="Downloads"></p>
<p><a href="https://opencollective.com/bowser"><img src="https://opencollective.com/bowser/all/badge.svg?label=financial+contributors" alt="Financial Contributors on Open Collective"></a> <a href="https://travis-ci.org/bowser-js/bowser/"><img src="https://travis-ci.org/bowser-js/bowser.svg?branch=master" alt="Build Status"></a> <a href="https://greenkeeper.io/"><img src="https://badges.greenkeeper.io/bowser-js/bowser.svg" alt="Greenkeeper badge"></a> <a href="https://coveralls.io/github/bowser-js/bowser?branch=master"><img src="https://coveralls.io/repos/github/bowser-js/bowser/badge.svg?branch=master" alt="Coverage Status"></a> <img src="https://img.shields.io/npm/dm/bowser" alt="Downloads"></p>
<h1>Contents</h1>
<ul>
<li><a href="#overview">Overview</a></li>
<li><a href="#use-cases">Use cases</a></li>
<li><a href="#advanced-usage">Advanced usage</a></li>
<li><a href="#contributing">How can I help?</a></li>
<li><a href="#use-cases">Use cases</a>
<ul>
<li><a href="#browser-props-detection">Browser props detection</a></li>
<li><a href="#using-user-agent-client-hints">Using User-Agent Client Hints</a></li>
<li><a href="#filtering-browsers">Filtering browsers</a></li>
</ul>
</li>
</ul>
<h1>Overview</h1>
<p>The library is made to help to detect what browser your user has and gives you a convenient API to filter the users somehow depending on their browsers. Check it out on this page: https://bowser-js.github.io/bowser-online/.</p>
<h3>⚠️ Version 2.0 breaking changes ⚠️</h3>
<p>Version 2.0 has drastically changed the API. All available methods are on the <a href="https://lancedikson.github.io/bowser/docs">docs page</a>.</p>
<p><em>For legacy code, check out the <a href="https://github.com/lancedikson/bowser/tree/v1.x">1.x</a> branch and install it through <code>npm install bowser@1.9.4</code>.</em></p>
<p>Version 2.0 has drastically changed the API. All available methods are on the <a href="https://bowser-js.github.io/bowser/docs/">docs page</a>.</p>
<p><em>For legacy code, check out the <a href="https://github.com/bowser-js/bowser/tree/v1.x">1.x</a> branch and install it through <code>npm install bowser@1.9.4</code>.</em></p>
<h1>Use cases</h1>
<p>First of all, require the library. This is a UMD Module, so it will work for AMD, TypeScript, ES6, and CommonJS module systems.</p>
<pre class="prettyprint source lang-javascript"><code>const Bowser = require(&quot;bowser&quot;); // CommonJS
@@ -98,6 +102,53 @@ As the result, you get a ES5 version of bowser with <code>babel-polyfill</code>
console.log(`The current browser name is &quot;${browser.getBrowserName()}&quot;`);
// The current browser name is &quot;Internet Explorer&quot;
</code></pre>
<h3>Using User-Agent Client Hints</h3>
<p>Modern browsers support <a href="https://developer.mozilla.org/en-US/docs/Web/API/User-Agent_Client_Hints_API">User-Agent Client Hints</a>, which provide a more privacy-friendly and structured way to access browser information. Bowser can use Client Hints data to improve browser detection accuracy.</p>
<pre class="prettyprint source lang-javascript"><code>// Pass Client Hints as the second parameter
const browser = Bowser.getParser(
window.navigator.userAgent,
window.navigator.userAgentData
);
console.log(`The current browser name is &quot;${browser.getBrowserName()}&quot;`);
// More accurate detection using Client Hints
</code></pre>
<h4>Working with Client Hints</h4>
<p>Bowser provides methods to access and query Client Hints data:</p>
<pre class="prettyprint source lang-javascript"><code>const browser = Bowser.getParser(
window.navigator.userAgent,
window.navigator.userAgentData
);
// Get the full Client Hints object
const hints = browser.getHints();
// Returns the ClientHints object or null if not provided
// Check if a specific brand exists
if (browser.hasBrand('Google Chrome')) {
console.log('This is Chrome!');
}
// Get the version of a specific brand
const chromeVersion = browser.getBrandVersion('Google Chrome');
console.log(`Chrome version: ${chromeVersion}`);
</code></pre>
<p>The Client Hints object structure:</p>
<pre class="prettyprint source lang-javascript"><code>{
brands: [
{ brand: 'Google Chrome', version: '131' },
{ brand: 'Chromium', version: '131' },
{ brand: 'Not_A Brand', version: '24' }
],
mobile: false,
platform: 'Windows',
platformVersion: '15.0.0',
architecture: 'x86',
model: '',
wow64: false
}
</code></pre>
<p><strong>Note:</strong> Client Hints improve detection for browsers like DuckDuckGo and other Chromium-based browsers that may have similar User-Agent strings. When Client Hints are not provided, Bowser falls back to standard User-Agent string parsing.</p>
<p>or</p>
<pre class="prettyprint source lang-javascript"><code>const browser = Bowser.getParser(window.navigator.userAgent);
console.log(browser.getBrowser());
@@ -131,6 +182,11 @@ console.log(browser.getBrowser());
}
}
</code></pre>
<p>You can also use <code>Bowser.parse()</code> with Client Hints:</p>
<pre class="prettyprint source lang-javascript"><code>console.log(Bowser.parse(window.navigator.userAgent, window.navigator.userAgentData));
// Same output structure, but with enhanced detection from Client Hints
</code></pre>
<h2>Filtering browsers</h2>
<p>You could want to filter some particular browsers to provide any special support for them or make any workarounds.
It could look like this:</p>
@@ -176,8 +232,8 @@ list of aliases can be found in <a href="src/constants.js">the file</a>.</p>
</ul>
<h2>Contributors</h2>
<h3>Code Contributors</h3>
<p>This project exists thanks to all the people who contribute. [<a href="CONTRIBUTING.md">Contribute</a>].
<a href="https://github.com/lancedikson/bowser/graphs/contributors"><img src="https://opencollective.com/bowser/contributors.svg?width=890&button=false" /></a></p>
<p>This project exists thanks to all the people who contribute. [<a href=".github/CONTRIBUTING.md">Contribute</a>].
<a href="https://github.com/bowser-js/bowser/graphs/contributors"><img src="https://opencollective.com/bowser/contributors.svg?width=890&button=false" /></a></p>
<h3>Financial Contributors</h3>
<p>Become a financial contributor and help us sustain our community. [<a href="https://opencollective.com/bowser/contribute">Contribute</a>]</p>
<h4>Individuals</h4>
@@ -210,7 +266,7 @@ list of aliases can be found in <a href="src/constants.js">the file</a>.</p>
<br class="clear">
<footer>
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Sat Sep 12 2020 11:21:13 GMT+0300 (Eastern European Summer Time) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Fri Feb 06 2026 21:15:18 GMT+0000 (Coordinated Universal Time) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
</footer>
<script>prettyPrint();</script>