I know browsersniffing is not the correct way to design a site for multiple browsers. My question however is not related to designing a site which behaves well for each browser.
I want to offer the user the ability to install the site as a webapp if the browser is Google Chrome or Firefox 4+, as a widget if it's Opera, as an extension if it's Safari... and so on
Basically I want to slide in a div with a button offering this kind of install. There is no use showing the webapp solution if the browser is for example Safari as Safari has no support for it.
So how do I do this in a good way?
I found this based on features rather than useragent
Safe feature-based way for detecting Google Chrome with Javascript?
var is = {
ff: window.globalStorage,
ie: document.all && !window.opera,
ie6: !window.XMLHttpRequest,
ie7: document.all && window.XMLHttpRequest && !XDomainRequest && !window.opera,
ie8: document.documentMode==8,
opera: Boolean(window.opera),
chrome: Boolean(window.chrome),
safari: window.getComputedStyle && !window.globalStorage && !window.opera
}
It seems to work for my needs and is short and not bulky and more or less spoof safe
Take a look at jQuery.browser: http://api.jquery.com/jQuery.browser/
The $.browser property provides
information about the web browser that
is accessing the page, as reported by
the browser itself. It contains flags
for each of the four most prevalent
browser classes (Internet Explorer,
Mozilla, Webkit, and Opera) as well as
version information.
Available flags are:
webkit (as of jQuery 1.4) safari
(deprecated) opera msie mozilla This
property is available immediately. It
is therefore safe to use it to
determine whether or not to call
$(document).ready(). The $.browser
property is deprecated in jQuery 1.3,
and its functionality may be moved to
a team-supported plugin in a future
release of jQuery.
Because $.browser uses
navigator.userAgent to determine the
platform, it is vulnerable to spoofing
by the user or misrepresentation by
the browser itself. It is always best
to avoid browser-specific code
entirely where possible. The $.support
property is available for detection of
support for particular features rather
than relying on $.browser.
Don't worry about what is considered proper. Do what works; in this case perhaps browser sniffing is the best or only good option.
I never understood the problem with just using properties out of the navigator object:
<script>
for(var item in navigator)
{
document.write('navigator.' + item + ': ' + navigator[item] + '<br>');
}
</script>
They say that the navigator.userAgent is unreliable, but do your research, it can be combined with navigator.appName and navigator.vendor with high reliability I reckon.
UPDATE: March 2013
You have to test directly for the thing that you want to know, if you try to infer it, you're doing it wrong.
For example. If you want to use a feature, test for it directly, don't assume that if document.all then you can use document.uniqueID. Test for document.uniqueID directly.
Everyone knows that using navigator.userAgent to determine if window.localStorage can be used is insane, but they don't realise that ie7: document.all && window.XMLHttpRequest && !XDomainRequest && !window.opera is also doing the same thing in the opposite direction.
If you actually want to know what the user agent is, then all you can go off is the navigator object, unfortunately.
User agent string spoofing is not a problem, not yours anyway.
You can try: BrowserHawk, (http://www.cyscape.com/showbrow.asp) Which does the browser checking on the server side. This will theoritically reduce the processing on browser side when determining what to show the end users. However, I dont think this is free. Their featured customers include Yahoo, AOL, Cisco, Microsoft and Sun. So this is for production use only with large expectancies of end users visiting the site.
