How to change or set cache key based on browser user agent?

Question

Is it possible to maintain separate caches in Varnish or Fastly for desktop and mobile users? I am trying to load only the required items in the mobile devices instead of loading all CSS files, blocks, a few hidden elements using user agents.

Looking forward to suggestions.

• Shoaib Munir: Hope this post will help you magento.stackexchange.com/a/267832/31910
• Sathish: @ShoaibMunir Got it, Thanks

Answer 1

Don't try this in production!

In theory it is possible to do the following:

sub vcl_hash {
 hash_data(req.http.User-Agent);
}

Although this will create a cache variation per User-Agent value, I would NEVER recommend using this: there are just too many different kind of User-Agent values and it will result in a terrible hit rate.

Community-maintained device detection VCL

There's a commmunity-maintained device detection VCL file that does some basic checks and sets a X-UA-Device header containing the type of device.

Here's how you can use it:

include "devicedetect.vcl";
sub vcl_recv {
 call devicedetect;
}
sub vcl_hash {
 if(req.http.X-UA-Device ~ "mobile") {
 hash_data("mobile");
 } elseif(req.http.X-UA-Device ~ "tablet") {
 hash_data("tablet");
 } elseif(req.http.X-UA-Device ~ "pc") {
 hash_data("pc");
 } else {
 hash_data("other");
 }
}

This is a very static approach and depends on updates of the devicedetect.vcl file. It works in most cases, but is not as good as Device Atlas.

Device Atlas support

If you want a very reliable way to detect devices, you can use Device Atlas.

Varnish Enterprise has the vmod_deviceatlas module that reads the Device Atlas JSON files and provides a clean API. See https://docs.varnish-software.com/varnish-cache-plus/vmods/deviceatlas/ for more information.

Both Device Atlas and Varnish Enterprise are commercial solutions and require a license.