Varnish custom html based on User Agent - varnish

Question

I want to display different html styles to users based on $_SERVER['HTTP_USER_AGENT']. How can I achieve this with varnish settings, to make it have a specific cache for a specific user agent.
I know I can achieve something similar with JS, but that's not reliable for me I want to do it server side.
The php I will use in my html to detect user agents will look like this;
<?php if($_SERVER['HTTP_USER_AGENT'] == $target):?>
<style>
//CSS
</style>
<?php endif;?>
How can I setup Varnish so it work neatly with this?

Answer 1

All you need to do is modify the vcl_hash method to add more info to the cache key.
https://varnish-cache.org/docs/trunk/users-guide/vcl-hashing.html
sub vcl_hash {
hash_data(req.http.User-Agent);
}
Be aware that there are no real standards that are followed for User Agent strings, so the variations are huge even for what are identical browsers. I would expect a 99% cache miss on this technique unless you will be controlling the User Agents yourself (internal system etc.)
If you want a different cache for mobile devices, the following might be more successful as it tries to detect a mobile browser, then uses a normalised cache key value to improve hit rate:
sub vcl_hash {
if (req.http.User-Agent ~ "mobile") {
// hash_data
hash_data("mobile");
}
}

Answer 2

Varnish supports that by default. You don't need to change Varnish's configuration. You only need to send the Vary header:
The Vary HTTP response header determines how to match future request headers to decide whether a cached response can be used rather than requesting a fresh one from the origin server.
In your specific case where you want it to vary based on the User-Agent, Varnish will understand that it needs to create different versions of the same object in cache for each different User-Agent.
Beware that using varying you cache might reduce your hit-rate considerably due to the number of variations the User-Agent header has. To avoid that, normalization is required. You can read more normalizing User-Agent headers in Varnish's documentation