Agent Skills
返回列表
浏览器系统识别

浏览器系统识别

开发编程 更新于 2026.08.29

将以下提示词粘贴到你的 AI 对话框中:

请根据 https://skillhub.cn/install/skillhub.md,安装 @user_f1b049da/bcjd2026445。

技能介绍

为什么需要UA解析?

在前端开发中,开发者常需快速了解用户访问环境,例如Demo页需要显示「当前环境」信息条,附件预览需提示Safari或旧版Chrome的兼容性问题,跟进记录需附带访问端摘要。直接解析UA字符串(navigator.userAgent)是轻量级解决方案,但手动解析易出错且重复。

技能如何工作?

该技能基于ua-parser-js库,实现「本地解析→结构化输出」流程:

  • 输入处理:默认读取当前页UA,支持传入自定义UA字符串;
  • 解析逻辑:通过UAParser解析后输出{browser, os, device}对象;
  • 输出规范:至少包含浏览器名/版本、系统名(缺省用「未知」);
  • 本地化设计:解析过程仅在浏览器本地完成,不上传完整UA,避免隐私风险;
  • 实现标记:关键代码注释标注小四原创,明确功能边界。

适用边界与注意点

  • 不做:Canvas指纹、风控评分、UA鉴权(UA易伪造,不可作为唯一身份依据);
  • 避免:收集并上传完整UA至第三方(违反本地化设计原则);
  • 依赖约束:必须使用ua-parser-js作为解析库,确保解析结果稳定性;
  • 测试要求:需验证空UA输入不崩溃,并确保Chrome/Windows等常见环境可读。

使用场景

  • 在 Demo 页顶部展示访问者的浏览器与系统版本,方便快速确认当前运行环境是否匹配预期
  • 附件预览时根据解析结果提示 Safari 或旧版 Chrome 可能导致的兼容性问题,提前告知用户
  • 客服跟进记录中附带客户的浏览器与系统摘要,便于后续排查访问端相关问题
  • 排障面板中调用 formatClientEnv() 展示客户端环境信息,辅助定位环境类故障

适合人员

  • 前端开发者,需要在 Demo 页或排障面板中快速确认访问者的浏览器与系统环境
  • 产品文档维护者,需要在附件预览场景中标注兼容性提示以降低用户困惑
  • 客服或技术支持人员,需要在跟进记录中附带访问端摘要以辅助问题排查
  • 独立开发者,需要在工具页面中展示客户端环境信息方便自测与调试