Serving JavaScript based on User-Agent

Question

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?

Answer 1

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...

Answer 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.