Browser Detection with Javascript - php

Question

Reasoning for this Question
I am aware that browser detection can never be 100% reliable as the User Agent header can always be forged, however, I am not bothered by this.
Although there are many questions on this topic, they all seem to be quite old, so to get an up to date answer I felt I should ask this question again.
I am currently detecting the browser name and version server side using the PHP browscap, and then returning the name and version into javascript variables (not a very good method). The reason why I need to do this is simply to display a message to visitors if they are not using a supported browser.
Current method (something similar):
<script type="text/javascript">
var browser = new Array();
browser['browser'] = '<?php echo $browser_name; ?>';
browser['version'] = '<?php echo $browser_version; ?>';
browser['error'] = '<?php echo $browser_error; ?>';
</script>
It would be much better to do this client side as the browscap can be quite slow, and it would prevent me having to pass values into javascript variables from PHP. If you think using PHP is a better method then please state in your answer, this is just my opinion.
Question
Therefore, my question quite simply, is the following link a reliable method for determining the browser name and version?
Javascript Detect
I am aware that new browsers will need to be added to this, this does not bother me. I am more concerned about whether the algorithm used is reliable.
Thanks in advance
UPDATE 1
To see what I mean, take a look at https://www.icloud.com/ in Internet Explorer 7 or less. You will receive a message saying that the browser is not supported. This is easy to do for IE as you can simply use the <!--[if gt IE..., however, I need to test all browsers.

Answer 1

This does not look right, you can fetch browser information from Javascript. No need to mix JS and PHP code to do that.
You can do something like this to fetch, and detect user browser with just JavaScript:
var userAgent = navigator.userAgent.toLowerCase();
var old = false;
// Internet Explorer 7
if (userAgent.indexOf('msie 7.0b') !== -1) { old = true; }
else if (userAgent.indexOf('msie 7.0') !== -1) { old = true; }
// Internet Explorer 6
else if (userAgent.indexOf('msie 6.1') !== -1) { old = true; }
else if (userAgent.indexOf('msie 6.01') !== -1) { old = true; }
else if (userAgent.indexOf('msie 6.0b') !== -1) { old = true; }
else if (userAgent.indexOf('msie 6.0') !== -1) { old = true; }
...
// Detect any other browser versions you consider old
if(old = true) {
// Show notification and alert users that they are using old browser
}
This is how you can do it using JS, but you can also use HTML to achieve this:
<!--[if lte IE 6]>
// include your .css style or do whatever you want to alert users their browser is old
<![endif]-->
Short answer to your question is YES, its wrong to detect user browser the way you do it, since you can do it with plain JavaScript, or even with HTML. No need to mix PHP and JS code here, and at the end, both PHP and JS will get the same UserAgent info.

Answer 2

Explanation
After extensive research and discussing amongst other developers, it is clear that there is no reliable method for retrieving the browser name and version from the User Agent. This is down to several reasons:
The format of a browsers User Agent can change at any time if the developers of the browser so wish to do so. This could immediately prevent some scripts from working correctly.
Users can forge their User Agents to mimic other browsers, and therefore would appear to be using a browser they are not.
Possible Solutions
Whilst I hugely discourage the use of these scripts as they could stop working at the release of an update to any browser anytime, if you do wish to detect the browser name and version in Javascript then I would advise using this script:
Javascript Detect
However, the most reliable method for retrieving the details of the browser is without a doubt the browscap supplied by Gary Keith. The browscap project offers extensive information about each browser and OS gathered from the User Agent. It is very easy to implement and even easier to use. To read more, take a look at:
Gary Keith - Browscap
If you choose to use the browscap by Gary Keith, you will need to ensure it is updated weekly at the very least.
Answer
Whilst I am contradicting myself with this answer, it is clear that detecting the browser information with any sort of script is not advised. The only reliable method of browser detection is that of the Internet Explorer HTML conditions, and as stated, these only cover Internet Explorer.
Try to avoid browser specific functions and notices, and make use of the built in features such as:
media="only screen and (device-width: 768px)"
and
<!--[if IE 8]>I am IE 8<![endif]-->

Answer 3

This question needs an updated answer. I think the best option these days for client-side detection is WURFL.
Its an updated library of devices based on Useragents - think Browscap for the client side.
Load the JS and it returns JSON based on the device that requested the js. Perfect!
<script type="text/javascript" src="//wurfl.io/wurfl.js"></script>
Because it does the parsing on the WURFL server side, you need to load the js remotely and not save it in your dir tree.
A super easy
WURFL.is_mobile
is all it takes to determine mobile for example.
Good luck.

Answer 4

You could try having a look at navigator.appName and navigator.userAgent.

Answer 5

The yepnopejs IE detection (!ie prefixes) works by utilizing the MS conditional comments.
A short snippet for detecting versions of IE prior to IE10 in JavaScript without resorting to user-agent sniffing.
while (
div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->'
);
// …
https://github.com/SlexAxton/yepnope.js/blob/master/prefixes/yepnope.ie-prefix.js
yepnope usage example:
yepnope({
load: ['normal.js', 'ie6!ie7!ie-patch.js'] // patch for ie6 or ie7 only
});

Answer 6

You can use a perfect plugin for this information written in jQuery (like javascript)
look at this link:
https://github.com/jquery/plugins.jquery.com
Be sure to do feature detection instead of browser detection when you want to determine if a certain feature is available in a browser, apply bugfixes, etc.