Question

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

Answer 1

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.