10

I am curious about the pros and cons of using user agent detection in a web server to determine which version of a JavaScript resource to send to the client.

In particular, if some web browsers support a feature natively while others require a verbose JavaScript workaround, is it better to serve the workaround to everyone and run it only if it's needed client-side, or to serve the workaround only to the browsers that require it and send a thin wrapper around native features to the rest?

What problems could arise with that second approach, and might they outweigh the benefit of smaller responses for the supporting browsers?

Improve this question
3
  • 5
    The pro of doing it clientside is that you can use feature detection, whereas serverside only UA-string-sniffing is possible (and often not successful) Commented Oct 24, 2012 at 17:40
  • Is it worthwhile, then, to send feature detection code to the client and then request the workaround dynamically where needed? Does the benefit to supporting browsers justify the extra round-trip for non-supporting ones? Commented Oct 24, 2012 at 17:53
  • 1
    Because of the efficiency of browser caching and the relatively small size of javascript to solve a particular problem, it is rarely ever worth extra round-trips to dynamically load a small amount of javascript. Commented Oct 24, 2012 at 18:09

4 Answers 4

Reset to default
3

You could load "optional" stuff on demand using RequireJS (or similar).

1) On Page load... test for feature with small tests (Modernizr)

2) If test succeeds, use native, if fails, use RequireJS to load your other resources

3) Profit.

This does assume you don't mind extra http requests....too many of these test, load, repeat processes can slow things down more than just including one large(r) file, so it's case dependent, but there is definitely reasonable middle ground...

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

2

Usually, it is a better solution to send one copy of your javascript to all clients and have the javascript itself do feature detection to decide how to best treat each browser. This has the following advantages:

  1. Feature detection is much more accurate and forward compatible than browser detection, even with browsers you've never even seen before.
  2. You get one copy of your javascript for all browsers which is generally much easier to test and deply and requires no server-side distribution logic.
  3. Developing one common set of javascript that adapts to client conditions is generally much easier than developing N separate versions of site javascript.
Improve this answer

2 Comments

I don't think #3 is true, you first develop one common code set according to a standard, and then develop separate ployfill modules for that standard for quirksy browsers
@Bergi, polyfills for a particular feature are fine, but making them separately served is unnecessary and complicates development, deployment and testing. These things are nearly always small and it's much simpler to just include them all and select the one that is needed in the client with feature detection.
1

This in neither Pro or Con, but speaking from SEO point of view, you should consider that Googlebot will always see the "workaround" version. (which I`m assuming is the default one, when no User-Agent was recognized)

I`m saying that here because I saw several sites take a dive, when implementing user-agent/cookie based custom JS rules.

Going back to your original question, I would suggest using a single version approach - simply because its much more manageable and does not require you to keep track of several versions of the script.

@BLSully also raised an excellent point here (+1) about the extra HTTP requests this will cause. Chances are that your overall site speed will plummet or any gains will be greatly diminished.

There are many better things you could do for acceleration - if this is indeed your goal here...

Improve this answer

1 Comment

GoogleBot surfes on Chrome. Of course, you need a clever UA-String -> Engine-Version mapping; but serving all unrecognized clients (like SE crawlers) the "does not support JS"-pure-HTML version wouldn't be bad either :-)
0

Another possibility (without additional http request) is to use user agent header for sending different versions of content. Have a look at device atlas article on this topic or have a look at referenced article about usage of this technique in wild.

I see as pros:

  • lover amount of content sent to client (specially for mobile devices is this nice)
  • browser will use lover resources without code which is not needed for it

Cons:

  • various number of javascript versions need to be maintained
  • user agent parsing is moving target
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.