What's User-Agent Client Hints?
User-Agent Client Hints
Improving user privacy and developer experience with User-Agent Client Hints
User-Agent Client Hints Demo on Browser
| ⬇️ Response Accept-CH |
⬆️ Request header |
⬆️ RequestExample value |
Description |
| UA |
Sec-CH-UA |
"Chromium";v="84", "Google Chrome";v="84" |
List of browser brands and their significant version. |
| UA-Mobile |
Sec-CH-UA-Mobile |
?1 |
Boolean indicating if the browser is on a mobile device (?1 for true) or not (?0 for false). |
| UA-Full-Version |
Sec-CH-UA-Full-Version |
"84.0.4143.2" |
The complete version for the browser. |
| UA-Platform |
Sec-CH-UA-Platform |
"Android" |
The platform for the device, usually the operating system (OS). |
| UA-Platform-Version |
Sec-CH-UA-Platform-Version |
"10" |
The version for the platform or OS. |
| UA-Arch |
Sec-CH-UA-Arch |
"ARM64" |
The underlying architecture for the device. While this may not be relevant to displaying the page, the site may want to offer a download which defaults to the right format. |
| UA-Model |
Sec-CH-UA-Model |
"Pixel 3" |
The device model. |
This plugin is set the Null Safety.
Add this to your package's pubspec.yaml file by running the following command
$ flutter pub add ua_client_hints
Usage
Supported platforms:
On Web, values depend on browser support for User-Agent Client Hints. Some fields such as architecture, model, or platformVersion can be empty on browsers that don't expose high-entropy hints.
Add to the request header.
class AppDio with DioMixin implements Dio {
AppDio._([BaseOptions options]) {
options = BaseOptions(
baseUrl: 'https://wasabeef.jp',
);
this.options = options;
interceptors.add(InterceptorsWrapper(
onRequest: (options) async {
options.headers.addAll(await userAgentClientHintsHeader());
return options;
},
));
}
static Dio getInstance() => AppDio._();
}
APIs
final String ua = await userAgent();
print('User-Agent: $ua');
final UserAgentData uaData = await userAgentData();
print('platform: ${uaData.platform}');
print('platformVersion: ${uaData.platformVersion}');
print('model: ${uaData.model}');
print('architecture: ${uaData.architecture}');
print('brand: ${uaData.brand}');
print('mobile: ${uaData.mobile}');
print('device: ${uaData.device}');
print('appName: ${uaData.package.appName}');
print('appVersion: ${uaData.package.appVersion}');
print('packageName: ${uaData.package.packageName}');
print('buildNumber: ${uaData.package.buildNumber}');
final Map<String, dynamic> header = await userAgentClientHintsHeader();
print("Sec-CH-UA-Arch: ${header['Sec-CH-UA-Arch']}");
print("Sec-CH-UA-Model: ${header['Sec-CH-UA-Model']}");
print("Sec-CH-UA-Platform: ${header['Sec-CH-UA-Platform']}");
print("Sec-CH-UA-Platform-Version: ${header['Sec-CH-UA-Platform-Version']}");
print("Sec-CH-UA: ${header['Sec-CH-UA']}");
print("Sec-CH-UA-Full-Version: ${header['Sec-CH-UA-Full-Version']}");
print("Sec-CH-UA-Mobile: ${header['Sec-CH-UA-Mobile']}");