1. userAgent 是什么

userAgent 的定义Navigator.userAgent 只读属性返回当前浏览器的用户代理字符串,用于指定浏览器在 HTTP 标头以及当前属性和 Navigator 对象的其他相关方法的响应中提供的完整用户代理字符串。

userAgent 的值:用户代理字符串遵循严格的结构,可以分解为多个信息片段。每个信息片段都来自其他用户代理属性,这些属性也可以由用户设置。

示例

	console.log(window.navigator.userAgent);
	// Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:124.0) Gecko/20100101 Firefox/124.0

2. userAgent 的使用示例

  1. 判断是否在安卓设备内
    	isAndroid = () => {
    		return u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;
    	};
    
  2. 判断是否在ios设备内
    	isiOS = () => {
    		return (
    			ulc.includes('iphone') ||
    			ulc.includes('ios') ||
    			ulc.includes('ipad') ||
    			(ulc.includes('mac os x') && 'ontouchend' in document)
    		);
    	};
    
  3. 判断是否是有刘海屏的 iPhone(特征 iOS + 机身长)
    	isHasSafeAreaIphone = () => {
    		// 上个IOS示例函数
    		return isiOS() && window.screen.height >= 812;
    	};
    
  4. 判断是否在小程序环境内
    	isWxMiniProgram = () => {
    		return (
    			!!u.match(/miniprogram/i) ||
    			window.__wxjs_environment === 'miniprogram' ||
    			u.toLowerCase().includes('miniprogram')
    		);
    	};
    
  5. 判断是否是微信内置浏览器(公众号页面)
    	isWechatBrowser = () => {
    		return !!u.match(/MicroMessenger/i);
    	};
    
  6. 判断支付宝浏览器
    	isAlipayClient = () => {
    		return !!u.match(/AlipayClient/i);
    	};
    
  7. 判断是否是原生 APP 环境
    	isAppClient = () => {
    		return /CMMManager/.test(u) || /CmmManager/.test(u);
    	};
    
  8. 判断是否IE<11浏览器
    	isIE = () => {
    		return userAgent.indexOf('compatible') > -1 && userAgent.indexOf('MSIE') > -1;
    	};	
    
  9. 判断是否IE<11浏览器
    	isIE11 = () => {
    		return userAgent.indexOf('Trident') > -1 && userAgent.indexOf('rv:11.0') > -1;
    	};	
    
  10. 判断是否Edge浏览器
    	isEdge = () => {
    		return userAgent.indexOf('Edge') > -1 && !(userAgent.indexOf('compatible') > -1 && userAgent.indexOf('MSIE') > -1);
    	};	
    
  11. 判断是否Firefox浏览器
    	isFirefox = () => {
    		return userAgent.indexOf('Firefox') > -1;
    	};	
    
  12. 判断是否Opera浏览器
    	isOpera = () => {
    		return userAgent.indexOf('Opera') > -1 || userAgent.indexOf('OPR') > -1;
    	};	
    
  13. 判断是否Chrome浏览器
    	isChrome = () => {
    		return userAgent.indexOf('Chrome') > -1 &&
    			    userAgent.indexOf('Safari') > -1 &&
    			    userAgent.indexOf('Edge') === -1 &&
    			    userAgent.indexOf('OPR') === -1;
    	};	
    
  14. 判断是否Safari浏览器
    	isSafari = () => {
    		return userAgent.indexOf('Safari') > -1 &&
    			    userAgent.indexOf('Chrome') === -1 &&
    			    userAgent.indexOf('Edge') === -1 &&
    			    userAgent.indexOf('OPR') === -1;
    	};	
    

3. userAgent 的使用限制

  1. 规范要求浏览器尽可能减少通过此字段提供的信息。请勿假设此属性的值在同一浏览器的未来版本中会保持不变。尽量不要使用它,或者仅将其用于当前和过去版本的浏览器。
  2. 新版浏览器可能与旧版浏览器开始使用相同的 UA 或部分 UA,因此你无法完全保证浏览器代理确实是此属性所宣告的浏览器代理。此外,请注意浏览器用户可以根据需要更改此字段的值(UA 欺骗)。

4. userAgent 的前世今生

1955年6月8日,伯纳斯·李(Tim Berners-Lee)出生于英格兰伦敦西南部。他的父母都参与了世界上第一台商业电脑,曼切斯特1型的建造。1976年从牛津大学物理系获得一级荣誉学位,毕业之后,就职于英国一些高技术公司。1984年,一个偶然的机会,来到瑞士的日内瓦,进入著名的由欧洲原子核研究会(CERN)建立的粒子实验室。

起初计算机只是以单机模式被广泛应用,1977到1979年间推出目前形式的TCP/IP体系结构和协议规范,1987年,尼尔森出版了《文字机器》,计划是做一个进行在线超文本出版和商务的全球系统;而后1989年,Internet上的主机数量突破了100000台。

1989年,欧洲粒子物理实验室(CERN)当时连因特网已有两年时间了,伯纳斯·李建议采用超文本技术(Hypertext)把CERN内部的各个实验室连接起来,在系统建成后,将可能扩展到全世界。后来总算得到了批准,并得到了一笔经费,购买了一台NEXT计算机;

1989年仲夏之夜,伯纳斯·李成功开发出世界上第一个Web服务器和第一个Web客户机。虽然这个Web服务器简陋得只能说是CERN的电话号码簿,它只是允许用户进入主机以查询每个研究人员的电话号码,但它实实在在是一个所见即所得的超文本浏览;

1989年12月,他的发明正式定名为World Wide Web,即我们熟悉的WWW(是基于客户机/服务器方式的信息发现技术和超文本技术的综合);这位老兄顺便也做出了史上第一个浏览器,也叫WorldWideWeb,这个浏览器只能在NeXT系统上运行,NeXT软件公司的老板就是当年被苹果扫地出门的乔布斯。后来苹果将NeXT收购,乔布斯也重新掌管苹果,NeXT系统也成为了优雅的macOS的基础。但是这名字这么长,后来伯纳斯·李把WorldWideWeb更名为Nexus(连接),得益于兼容Unix和Microsoft DOS,当年它成为最流行的浏览器,不过它只支持文字展示,还不支持图片展示;

1992年,期间出现了基于Unix浏览器Erwise、以及一个纯文字的浏览器Lynx,但是视频音频功能强大;

1993年,伊利诺伊的NCSA(美国国家超级计算应用中心)组织认为没有图片的网页就像失去颜色的世界!因此他们发明了第一个可以显示图片的浏览器:Mosaic(马赛克);

此时的霸主是Nexus,它是不能显示图片的,而Mosaic能显示,这就叫html的开发陷入了两难的境地。之后Mosaic想到了一个办法:这本质上就是一个身份的问题嘛,那我就在给你发请求的时候告诉你们我的身份,和Nexus区分开来不就行了,这就是UserAgent的由来。比如Mosaic把自己标注为NCSA_Mosaic/2.0(Windows 3.1)。

但是我们看到的很多UserAgent的开头是Mozilla,是为什么呢?

别急,故事还没有结束;很快就出来一个混世魔王,叫Mozilla。在PC时代,浏览器作为一个巨大的流量和资源的入口,可以带来难以估量的商业价值。这也是Mosaic团队领导人马克•安德森(Marc Andreessen)带领团队辞职并自主创业建立Netscape(网景公司)的原因;

1994年,在Mosaic如日中天的时候,网景公司发明了一款浏览器,希望能够取代Mosaic,他的名字就叫:Mozilla。Mozilla由“Mosaic Killa”变化而来,大致意思就是吃掉Mosaic;

碍于当时Mosaic的江湖地位,网景公司怕不得已把浏览器名字改为Netscape Navigator(网景航海家),但是仍然偷偷地在自己的UserAgent后面写上了Mozilla。以网景为首的一批互联网技术公司的崛起,迅速构成了一股隐隐的可以与微软分庭抗礼的新力量。比尔盖茨和网景谈判,希望建立合作关系,但是网景公司雄心壮志,岂会就此买账,于是谈判破裂;

1995年,为了快速抢占市场,收购了一家名为Spyglass的公司,这家公司已经从NCSA处买了Mosaic的授权。可以基于此直接开始开发,于是迅速发布了IE 1.0(Explorer 探索者)、IE2.0(加入了支持JavasScript功能),但是由于这两个版本还是不够完美。但是为了彻底摧毁网景,微软决定将IE免费开放,但是网景浏览器收费但是要45美元,这还不够,半年后宣布Windows95与IE捆绑销售,并且还宣布自己是兼容Mozilla的,还将自己的userAgent改成Mozilla/1.22 (compatible; MSIE 2.0; Windows 95)。这下网景彻底绝望了;

1996年,一家挪威的公司也推出了一款浏览器,Opera(歌剧)浏览器首次亮相,它支持单窗口多文档阅读。在IE和FireFox(火狐)还在龙争虎斗的时候,市场上还存在另外一个著名的操作系统Linux,Linux看着Window的IE浏览器非常眼红,于是寻思着也开发一款基于Linux的浏览器。于是Konqueror浏览器也出现了,它可以运行在类Unix(Linux)系统上;

1997年,微软用两年时间就从IE1.0更新到了IE4.0,并率先推出了Trident内核,这种开发效率太恐怖了;

1998年,网景公司与IE浏览器竞争失利后,为了挽回市场,宣布旗下所有的软件都免费。并开放了网景通信家(Netscape Communicator 4.0)的源代码。失败后,他们围绕着浏览器排版引擎 Gecko (壁虎) 成立了非正式组织 Mozilla。同年11月,AOL(美国在线)为了防止浏览器再度被垄断,耗资42亿美元收购了网景;

2001年,8月27日微软发布IE6浏览器,IE6以垄断性的市场份额独占鳌头。 Netscape逐渐在与IE6竞争中败下阵来;

2002年,原网景公司的一批大神,开发出了Phoenix(凤凰)浏览器,有点“凤凰涅槃”之意,但是刚推出就被人告了,原来已经有一家公司叫做 “凤凰科技”;然后准备改名叫Firebird(火鸟),苍天啊,没想到又有一个开源数据库居然也叫Firebird,泪流满面的Mozilla感慨重生好难呀,最终还是叫 Firefox (火狐)吧,火狐一直备受关注。后来美国在线向微软提出索偿诉讼,微软因滥用垄断能力而败讼后;

在2003年5月,微软和AOL(美国在线)达成和解协议,愿意支付网景7.5亿美元。同年7月,AOL(美国在线)解散网景公司,并且将Netscape源码送给了开源社区,成立了Mozilla基金会(如今是Firefox浏览器的管理与推进组织);

也是在2003年,苹果发布了Safair浏览器,内核是WebKit,WebKit起初是KHTML渲染引擎的一个分支,使用在Linux系统的浏览器上,后来专注发展开源引擎,并在05年开源了Safair的内核,也就是现在占领了浏览器大半江山的Webkit内核;

2004年,Firefox 1.0发布,基于 Gecko 引擎的 Firefox 非常优秀,它标志自己的 UserAgent 为 Mozilla/5.0 (Windows; U; Windows NT 5.1; sv-SE; rv:1.7.5) Gecko/20041108 Firefox/1.0 ,Firefox 在业内广受好评,得到了快速的发展;

但是,Linux的追随者对此很难过,因为他们编写Konqueror,它的引擎是KHTML,他们认为KHTML和Gecko一样出色,于是Konqueror为得到更好的页面开始将自己伪装成“like Gecko”,从此“Like Gecko”也变成了一个行内皆知的萌词;

脑洞大开的Opera觉得IE和Konqueror的做法真的太棒了,甚得吾心!于是他直接在菜单提供了三个UserAgent 选项,让用户选择IE/Firefox/Opera,想变谁就变谁;

几年间IE虽然独霸、但不思进取,自己搞一套web标准,还不能完美支持html、javascript、css等新特性,一直维持着速度慢、体验差、不稳定的特点,让人不得不想要找个更好的替代品;

2008年,谷歌(Chrome)参战,内核是WebKit的一个分支,命名为chromium, 后来谷歌研发了自己的JavaScript引擎V8,极大地提高了JS的运算速度;

2009年谷歌推出Chrome扩展库,用户可以安装第三方插件到Chrome;

2010年,苹果就已经发布了Webkit2。Webkit2的目标是将元件抽象化,并提供更干净的网页渲染。

2012年,Chrome占有31%的市场份额,取代IE成为全球最受欢迎的浏览器;

2013年谷歌推出全新的浏览器内核项目Blink,Opera玩了几年自己的内核后,跟Google一起开发Blink内核,并在4月发布第一个版本。

微软为了遏制Chrome,从09年开始频繁更新IE和Trident内核版本号,当年就发布了Trident4.0,11年Trident5.0,12年Trident6.0,13年Trident7.0(即IE 11,随Windows 8.1发行);

2015年,微软对IE极致优化并改名为EdgeHTML,跟随Win10同步发布。但是Edge可以做的一切Chrome和Firefox都可以做得更好。

2018年12月,微软正式确认,新的Edge浏览器将从EdgeHTML内核迁移为Chromium内核,正式版已于2020年1月15日正式发布。

2021年5月19日,微软宣布IE浏览器将在次年退出市场,2022年6月15日,大多数版本的Windows 10系统不再支持IE浏览器(IE11退役),取而代之的是更新、更快、更安全的Edge浏览器。

Logo

开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!

更多推荐