Intro Request Detailed Data With User Agent Client Hints

Posted on Edited on In Views: Disqus: Symbols count in article: 1.4k Reading time ≈ 2 mins.

Intro Request Detailed Data With User Agent Client Hints

這篇介紹Request Detailed Data With User Agent Client Hints。

User Agent Client Hints:

繼上一篇Chrome110開始提供固定的GA內容，但實務上使用會需要詳細的資訊來應用在各種產品或分析上。
故可以使用User-Agent Client Hints (UA-CH) API透過HTTP headers 或 JavaScript來取得資料。

You may have already seen the default headers being sent with the Sec-CH-UA- prefix that tells you the browser,
its major version, the operating system, and if the browser is a mobile device.

Default User-Agent Client Hints request headers from Chrome:

Sec-CH-UA: “Chromium”;v=”110”, “Not A(Brand”;v=”24”, “Google Chrome”;v=”110”
Sec-CH-UA-Mobile: ?1
Sec-CH-UA-Platform: “Android”

You can use the Accept-CH header in your response to ask for more data. In this case, you can ask for
Sec-CH-UA-Platform-Version and Sec-CH-UA-Model to get that Android version and device type back in subsequent requests.

Response header from your server specifying platform version and model:

Accept-CH:
Sec-CH-UA-Platform-Version,
Sec-CH-UA-Model

Request headers back from Chrome including Android version and model name:

Sec-CH-UA-Platform-Version: “13.0.0”
Sec-CH-UA-Model: “Pixel 7”

You can do the same thing in JavaScript by calling getHighEntropyValues() on the userAgentData API, passing in an array
of the values you want: platformVersion and model. This returns a promise with an object containing the specific values.

navigator.userAgentData
.getHighEntropyValues(
[‘platformVersion’, ‘model’]
).then(ua => { console.log(ua)
});

{
“platformVersion”: “13.0.0”,
“model”: “Pixel 7”
}