JS提交表单触发navigator.userAgent相关Chrome警告该如何解决？

警告本质 #

这个警告不影响当前版本的功能正常运行，只是Chrome的提前兼容提醒：你的代码（或引入的第三方依赖）调用了即将被缩减信息的旧版UA相关属性：navigator.userAgent、navigator.appVersion、navigator.platform，后续Chrome版本中这些属性返回的信息会变少，可能导致依赖这些属性的逻辑出错。

具体修复方案 #

• 优先使用特征检测替代UA判断（最推荐）
  不要通过UA字符串判断浏览器版本/支持能力，直接检测对应特征是否存在即可，比如：
  错误写法：

  // 不推荐：靠UA判断是否支持剪切板API
  if (navigator.userAgent.includes('Chrome 90')) {
    navigator.clipboard.writeText('测试内容')
  }
  

  正确写法：

  // 推荐：直接检测特征是否存在
  if ('clipboard' in navigator) {
    navigator.clipboard.writeText('测试内容')
  }
  

• 确需获取设备/浏览器信息时，迁移到新的navigator.userAgentData API
  这是Chrome官方推出的替代方案，用法示例：

  // 同步获取基础信息
  const basicInfo = navigator.userAgentData;
  console.log(basicInfo.brands); // 浏览器品牌标识数组
  console.log(basicInfo.mobile); // 是否为移动设备
  console.log(basicInfo.platform); // 操作系统平台
  
  // 异步获取高精度详细信息
  basicInfo.getHighEntropyValues(['platformVersion', 'uaFullVersion', 'architecture'])
    .then(detailInfo => {
      console.log(detailInfo);
    })
  

• 排查第三方依赖的调用
  如果你自己的代码没有调用旧版UA属性，大概率是引入的第三方库（比如统计埋点SDK、表单组件、兼容 polyfill）导致的，将对应依赖升级到最新版本即可，主流开源库已经完成了对新API的适配。

临时调试屏蔽方案（不推荐长期使用） #

如果当前开发阶段来不及修改代码，可以在Chrome控制台的设置面板中，找到「User-Agent reduction warnings」选项并勾选，即可临时隐藏该警告。

内容的提问来源于stack exchange，提问作者Khatere Rezaei