BDS Software

Javascript Browser Detection Testing

Which browser and version a visitor to your website is using is often a valuable piece of information to have.

You might want to use that information to provide some alternative code for older browsers. Or you might just want to advise your visitor that their present browser may not provide them with the best possible experience on your website.

Making a web page work with all (or even almost all) browsers is something major corporations (including major game developer organizations) work hard to achieve. They don't want to irritate or inconvenience any of their customers.

But, I'm old and retired - any time I spend on the (daunting) task of making web pages uniformly usable, is time I can't spend on designing games and other software. And, I'm not going to live this present life forever - I need to prioritize.

So, in my case, since I want to concentrate on design and development; I'll just let you know when I suspect that your browser may be too old to reap the full benefits of this site. Then, what you do about it is up to you.

Even with this lesser goal in mind, Browser Detection is NOT a trivial task.

MDN Web Docs says:

Using the user agent to detect the browser looks simple, but doing it well is, in fact, a very hard problem....

It's very rarely a good idea to use user agent sniffing. You can almost always find a better, more broadly compatible way to solve your problem! ....

Most browsers set the name and version in the format BrowserName/VersionNumber, with the notable exception of Internet Explorer. But as the name is not the only information in a user agent string that is in that format, you can not discover the name of the browser, you can only check if the name you are looking for. But note that some browsers are lying: Chrome for example reports both as Chrome and Safari. So to detect Safari you have to check for the Safari string and the absence of the Chrome string, Chromium often reports itself as Chrome too or Seamonkey sometimes reports itself as Firefox.

Browsers can also lie in more insidious ways. The Mac Observer says:

Not every Web site designer gets that you want to use your favorite browser, and not the one they think you should use. Some Web sites, for example, will block you if you arenit using Internet Explorer for Windows, even though the site will load properly in Safari or Firefox. Luckily, you can trick those sites by making your browser appear to Web servers as if it is Internet Explorer - or any other browser.

The trick is called browser spoofing, and it is not hard to do. Since your Web browser gladly identifies itself to any Web server that asks, all you have to do is make your browser lie and say that it is the browser that the server really wants it to be. All you need to do is find the right add-on to let you make the change.

So, browser detection is both difficult and potentially inaccurate.


-----

I surveyed six browser detection methods with mixed success:

Browser Detection Test Number 1 - Detects Firefox, Chrome, Opera, and Edge well. Mis-identifies IE, Slimjet, and Safari.

Browser Detection Test Number 2 - Detects Firefox, Chrome, and Safari; but abbreviates version information. Mis-identifies IE, Opera, Slimjet, and Edge.

Browser Detection Test Number 3 - Detects Chrome well. Detects Firefox, but abbreviates version information. Identifies Safari, but provides no version information. Mis-identifies IE, Opera, Slimjet, and Edge.

Browser Detection Test Number 4 - Detects Chrome well. Detects Safari but is somewhat imprecise in reporting the version number (e.g. it reports version 11.4 as 11.0). Mis-identifies Firefox, IE, Opera, Slimjet, and Edge.

Browser Detection Test Number 5 - This script only identifies the browser's name, not its version. It detects Firefox, Chrome, IE, Opera, and Edge properly. it mis-identifies Slimjet and Safari.

Browser Detection Test Number 6 - This script's purpose is to detect an IE browser's version only (after the browser has already been identified as IE). It doesn't do anything else.


-----

Conclusions:

1. The Chrome and Slimjet browsers are both made from the Chromium engine. As such there doesn't appear to be any way (at least not that I've yet discovered) to distinguish between the two. This is most likely not a major issue because both of those browsers should behave quite similarly to each other.

2. There doesn't appear to be any way (again, at least not that I've yet discovered) to detect Safari browser versions with greater precision than that exhibited by browserTest04.

3. Therefore, the best script procedure seems to be:

A. Begin by determining the Browser Name, using the code of browserTest05.

B. If the Browser Name === "IE", then determine the Browser Version, using the code of browserTest06.

C. Else, if the Browser Name === "unknown" (Safari?), then determine the Browser Name and Version, using the code of browserTest04.

D. Else, determine the Browser Version, using the code of browserTest01.


-----

And, that's just what I've done in the script on this page.

To examine the details of this combined browser detection method, simply right-click this page and then select "View Page Source" (in Firefox - other browsers similar).


                                                                                                                                                                M.D.J. 2018/08/22


HOWEVER, it turns out that Safari detection is really too inaccurate to be usable, even with this combined methodology. Therefore, when a Safari Browser is detected, no warning will be given if the browser version "seems" to be too old.

                                                                                                                                                                M.D.J. 2018/12/13


----------

References:

Mac Observer, The https://www.macobserver.com/tmo/article/Web_Browser_Spoofing.

MDN Web Docs https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent.