How to sniff Browsers?
After reading the blog arcticle about How Browsers work I started wondering How could I detect which Browser is our customer using to browse TransferWise. We know what Browsers are our customers using by Bugsnag and Google Analytics, but how are these tools doing it.. Hmm. Maybe the best way to find out is to talk to my browser
me: “Hey, which browser are you?” Chrome: “Netscape” me: “Netscape died along time ago, so who are you again?” Chrome: “Mozilla” me: “Well, which version of it?” Chrome: “5.0 (Macintosh; Intel Mac OS X 10_10_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/38.0.2125.122 Safari/537.36” me: “Argghhhhh”
Why browsers call themselves Netscape?
Compatibility. At least this was the reason when Netscape was the dominant browser. Those days developers were really into browser sniffing and used
appName property for it. When your browser wasn’t Netscape (the coolest browser in the world) then you were served with a different web page (something like a mobile website in today). So to maintain compatibility with the old pages, the newer browser were forced to lie about their identity.
That moment I realized it won’t be as easy as I thought. Seems that the only reliable information from navigator is
userAgent which looks something like this:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/38.0.2125.122 Safari/537.36
It holds a lot of good stuff that I could use. Buuuut, this is the Chrome userAgent. Why does it contain Safari or Mozilla?
Seems like the
Mozilla/5.0 is there for the compatibility reasons and the
Safari/537.36 because Chrome rendering engine Blink is forked from Safari WebKit. Thats cool for a history lesson but it is still a noise in the
userAgent that I must get rid off.
Yes, I have chosen Regex. By regexing userAgent in a correct order I could tell which browser we are dealing with:
if (/Opera/.test(userAgent)) browser = getOperaInfo(); else if (/MSIE/.test(userAgent)) browser = getIEInfo(); else if (/Chrome/.test(userAgent)) browser = getChromeInfo(); else if (/Safari/.test(userAgent)) browser = getSafariInfo(); else if (/Firefox/.test(userAgent)) browser = getFirefoxInfo(); else if (/Trident\//.test(userAgent)) browser = getNewerIEInfo();
Couple of a days later I released TransferWise first AngularJS open-source module called ngBrowserInfo. This tool gives AngularJS developers a service that will sniff the browser and collects:
- Browser name and version
- OS name and version
- Are cookies enabled
- Is user using a mobile device
- Screen size
- Window size
Go check it out ;)
Fun facts about IE
Only way to detect IE 11 is to regex
Trident (thanks to Microsoft for not saying IE or something like that). Trident is a token that says which layout engine is used on the browser (same as WebKit or Gecko).
IE appName was Microsoft Internet Explorer until the IE 11 was released.
Some say IE changed its appName to Netscape, because Microsoft developers wanted to break the old code that other developers had written to detect IE. Others say that the IE just took over HTML5 spec.