移动体验 / 方法解读

移动端网页如何通过 NavigatorUAData 获取高熵设备信息

当浏览器启用 User-Agent reduction 后,低熵信息会被简化,若需获取高熵信息如设备型号,需使用 NavigatorUAData.getHighEntropyValues 方法。

检查浏览器是否支持 NavigatorUAData 属性

在移动端网页中,首先需要确认当前环境是否支持 User-Agent Client Hints API。可以通过检查 Navigator 对象上是否存在 userAgentData 属性来判断。如果该属性存在,说明浏览器支持通过 JavaScript 访问客户端提示信息。若该属性不存在,则无法使用后续的高熵值获取方法,需要考虑降级处理或使用其他方式。

若 userAgentData 属性存在,可以进一步检查其 highEntropyValues 属性是否为空。这是一个 Promise 对象,用于异步获取高熵值。在代码中,可以通过调用 getHighEntropyValues 方法来触发获取过程。如果该属性为空或未定义,可能意味着浏览器虽然支持 API,但当前环境未启用高熵值请求,或者网络请求被拦截。

调用 getHighEntropyValues 方法请求高熵信息

在确认浏览器支持后,需要调用 NavigatorUAData 对象的 getHighEntropyValues 方法来获取高熵信息。该方法接受一个字符串数组作为参数,指定需要获取的具体提示字段。例如,若要获取设备型号,可以在数组中传入 'model'。若要获取多种信息,可以传入多个字段,如 ['model', 'platformVersion', 'formFactor']。

调用该方法后,会返回一个 Promise 对象。需要使用 .then() 方法处理返回的数据。在回调函数中,可以检查返回的对象是否包含请求的字段。例如,若请求了 'model',则应检查返回对象中是否存在 'model' 属性。如果属性存在且值不为空,说明成功获取到了设备型号信息。

验证返回数据中的高熵字段是否存在

获取高熵值后,需要验证返回的数据是否符合预期。例如,若请求了 'model' 字段,应检查返回对象中 'model' 的值是否为有效的设备型号字符串。如果值为空或 undefined,说明浏览器未返回该信息,可能是因为浏览器未启用高熵值请求,或者该字段在当前设备上不可用。

除了检查字段是否存在,还应检查返回的数据格式是否正确。高熵值通常以字符串形式返回,例如 'Pixel 9'。如果返回的数据格式不符合预期,可能需要进一步检查请求的字段名称是否正确,或者浏览器的实现是否符合 User-Agent Client Hints API 的规范。

处理获取失败或数据为空的情况

如果调用 getHighEntropyValues 方法后返回的数据为空,或者请求的字段不存在,需要考虑降级处理。例如,可以尝试使用低熵信息作为替代,如 Navigator.platform 或 Navigator.userAgent。如果低熵信息也无法获取,可能需要提示用户手动输入设备信息,或者使用其他方式获取设备信息。

此外,还应检查浏览器的隐私设置是否阻止了高熵值的获取。某些浏览器可能要求用户明确授权才能发送高熵信息。如果用户未授权,浏览器可能会返回空数据或拒绝请求。在这种情况下,需要引导用户检查浏览器的隐私设置,确保高熵值请求被允许。

资料与延伸阅读

你可以通过以下原始资料核对文中概念,并继续深入阅读。

  1. User-Agent reduction - HTTP | MDN ↗
← 更多移动体验文章返回顶部 ↑