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