šµļøāāļø Parse client hints headers and provide a convenient API to access device information and user preferences
npm install client-hintsšµļøāāļø Parse client hints headers and provide a convenient API to access device information and user preferences
Use client hints, where available
``js
import { ClientHints } from "client-hints";
import { userAgentParser } from "some-user-agent-parser-library";
app.get("/api-endpoint", (req, res) => {
const hints = new ClientHints(req);
const isMobile =
hints.mobile ?? // cheap
userAgentParser(req.get("user-agent")).device?.type === "mobile"; // more expensive
const browserName =
hints.vendorName ?? // cheap
userAgentParser(req.get("user-agent")).browser?.name; // more expensive
console.log(JSON.stringify(hints, null, 2)); // Serialises all available hints
res.send(${isMobile ? "Mobile" : "Desktop"} browser: ${browserName});`
});
All detections return undefined if the relevant header is not available.
| Feature | Type | Header | Meaning | Adoption level |
| --------------------------------------- | --------- | ---------------------------------------------------------------- | ---------------------------------------------- | -------------- |
| arch, architecture | _string_ | Sec-CH-UA-Arch | CPU architecture | Experimental |bitness
| | _number_ | Sec-CH-UA-Bitness | CPU bitness (32, 64) | Experimental |contentDpr
| , contentDevicePixelRatio | _number_ | Content-DPR | Image device pixel ratio | Deprecated |deviceMemory
| | _number_ | Device-Memory | Appr. available RAM | Experimental |downlink
| | _number_ | Downlink | Network speed (Mbps) | Experimental |dpr
| , devicePixelRatio | _number_ | DPR | Device pixel ratio | Deprecated |ect
| , effectiveConnectionType | _string_ | ECT | Network profile (G) | Experimental |fetchDest
| , fetchDestination | _string_ | Sec-Fetch-Dest | Resource type |fetchMode
| | _string_ | Sec-Fetch-Mode | Navigation type |fetchSite
| | _string_ | Sec-Fetch-Site | Relationship to origin |fetchUser
| | _boolean_ | Sec-Fetch-User | Was the request triggered by user action |gpc
| | _boolean_ | Sec-GPC | Consents to sell or share personal information | Experimental |mobile
| | _boolean_ | Sec-CH-UA-Mobile | Boolean: Is this a mobile device | Experimental |model
| | _string_ | Sec-CH-UA-Model | Device model | Experimental |platform
| | _string_ | Sec-CH-UA-Platform | Operating system name | Experimental |platformVersion
| | _string_ | Sec-CH-UA-Platform-Version | Operating system version | Experimental |prefersColorScheme
| | _string_ | Sec-CH-Prefers-Color-Scheme | User's preferred color scheme | Experimental |prefersReducedMotion
| | _boolean_ | Sec-CH-Prefers-Reduced-Motion | User prefers reduced motion | Experimental |prefersReducedTransparency
| | _boolean_ | Sec-CH-Prefers-Reduced-Transparency | User prefers reduced transparency | Experimental |purpose
| | _string_ | Sec-Purpose | Resource purpose (prefetch) | Experimental |vendorName
| | _string_ | Sec-CH-UA / Sec-CH-UA-Full-Version-List | Browser Name | Experimental |vendorVersion
| | _string_ | Sec-CH-UA-Full-Version / Sec-CH-UA / Sec-CH-UA-Full-Version-List | Browser version | Experimental |viewportWidth
| | _number_ | Viewport-Width | Layout viewport width | Deprecated |width
| | _number_ | Width | Resource desired width | Deprecated |
Set the value of Accept-CH header to include the headers you want the browse to send.
`plaintext`
Accept-CH: Sec-CH-UA-Mobile,Sec-CH-UA-Full-Version,Sec-CH-UA-Full-Version-List,Sec-CH-UA-Model,Sec-CH-UA-Platform,Sec-CH-UA-Platform-Version,ECT
Include all available hints:
`plaintext``
Accept-CH: *