《编写可维护的 JavaScript》编程实践 - 第 12 章 浏览器嗅探

编程实践 - 第 12 章 浏览器嗅探

《编写可维护的 JavaScript》—— Nicholas C. Zakas

浏览器嗅探在 Web 开发领域始终是个热点话题。自从网景浏览器介入以后，这场争论就开始了。

几年后，JavaScript 的浏览器嗅探技术也应运而生，网景 2.0 使用率远超任何其他浏览器，迫使其他浏览器也要在用户代理（User Agent）字符串中包含网景 的信息部分信息，以绕过这种形式的浏览器嗅探。

1. User-Agent 检测

最早的浏览器嗅探即用户代理（user-agent）检测，服务端（以及后来的客户端）根据 user-agent 字符串来确定浏览器的类型。
服务器会根据 user-agent 字符串屏蔽某些特定的浏览器查看网站的内容，其中获益最大的是网景浏览器，以致于很多网站认为只有网景浏览器才会正常展现他们的网页。

网景浏览器的 user-agent 字符串如下：

Mozilla/2.0(Win95; I)

当 IE 首次发布时，被迫沿用了网景浏览器 user-agent 字符串很大一部分，以确保服务器能够为这款新浏览器提供服务，
因为绝大多数的用户代理检测都是检测 "Mozilla" 字符串以及版本号。
IE 浏览器的 user-agent 字符串如下：

Mozilla/2.0(compatible; MSIE 3.0; Windows 95)

这意味着用户代理检测会把这款 IE 浏览器识别为网景的 Navigator 浏览器。
这也使得新生浏览器部分复制现有浏览器用户代理字符串成为了一种趋势：

• Chrome 的用户代理字符串包含了 Safari 的一部分
• Safari 的用户代理字符串包含了 Firefox 的一部分
• Firefox 的用户代理字符串包含了网景浏览器的一部分

// Chrome
"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36"

// Safari
"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/11.1.2 Safari/605.1.15"

// Firefox
"Mozilla/5.0 (Macintosh; Intel Mac OS X 10.13; rv:63.0) Gecko/20100101 Firefox/63.0"

到 2005 年，JavaScript 开始越来越流行，客户端也可以通过 JavaScript 的 navigator.userAgent 获取 user-agent 字符串。

// 不好的做法
if (navigator.userAgent.indexOf("MSIE") > -1) {
  // 是 IE
} else {
  // 不是 IE
}

随着越来越多的网站通过 JavaScript 检测用户代理，一批新的网站开始无法在浏览器正常工作，
因为解析 user-agent 字符串并非易事。
由于新浏览器为了确保兼容性，都会复制另一个现存浏览器的用户代理字符串，
因此一旦有新的浏览器发布则需要更新用户代理检测的代码，而在检测代码未更新这段时间会造成网站无法正常工作。

随着新浏览器的涌现以及版本的更替，为了确保 JavaScript 的正确执行，用户代理检测需要不断更新，这种方式就长期而言是不具备可维护性的。

但如果通过用户代理检测旧的浏览器，则是非常安全的，因为 IE8- 的 user-agent 字符串是不会变的。
如果你检测最新版本，则需要不断更新你的检测代码。