This is a simple example of cache vary based on devices, divided by desktop, mobile and tablet.
Chrome 76 on Windows 10:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3163.100 Safari/537.36
Chrome 76 on Android 8 mobile:
Mozilla/5.0 (Linux; Android 8.0.0; LG-H870) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.12 Mobile Safari/537.36
Chrome 76 on Android 8 tablet:
Mozilla/5.0 (Linux; Android 8.0.0; SM-T825) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3786.0 Safari/537.36
Safari on iPhone:
Mozilla/5.0 (iPhone; CPU iPhone OS 12_0 like Mac OS X) AppleWebKit/ 604.1.21 (KHTML, like Gecko) Version/ 12.0 Mobile/17A6278a Safari/602.1.26
Safari on iPad:
Mozilla/5.0 (iPad; CPU OS 12_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0 Mobile/16A5288q Safari/605.1.15
For the above exemplary user agent, we will use Android
or iPad
as the user agent to detect tablets , iPhone
or Mobile
to detect mobile, and consider all the rest desktop. This is a simple solution but it should cover most cases. The rules can be further extended to match more specific cases.
PHP example code:
<?php if (stripos($_SERVER['HTTP_USER_AGENT'],"iPhone")!==false || stripos($_SERVER['HTTP_USER_AGENT'],"Mobile")!==false ) { echo 'This is Mobile view'; } elseif (stripos($_SERVER['HTTP_USER_AGENT'],"iPad")!==false or stripos($_SERVER['HTTP_USER_AGENT'],"Android") !==false) { echo 'This is Tablet view'; } else { echo 'this is Desktop view'; }
.htaccess code:
CacheLookup public on RewriteRule .* - [E=cache-control:max-age=120] RewriteCond %{HTTP_USER_AGENT} iPad|Android [NC] RewriteRule .* - [E=Cache-Control:vary=istablet] RewriteCond %{HTTP_USER_AGENT} iPhone|Mobile [NC] RewriteRule .* - [E=Cache-Control:vary=ismobile]
The first rule will cache every page for 120 seconds.
The second rule will check the user agent. If it contains the keyword iPad
or Android
it will set vary to istablet
. If the user agent ALSO contains the keyword Mobile
though, such as from an Android Mobile device, it will set vary to ismobile
instead of istablet
. All other user agents are treated as desktop.
Test:
[root@test ~]# curl https://example.com/test.php -i -H "User-Agent: Android" HTTP/1.1 200 OK Connection: Keep-Alive Content-Type: text/html; charset=UTF-8 Etag: "62-1566258748;;;" X-Litespeed-Cache: hit Content-Length: 19 Date: Mon, 19 Aug 2019 23:52:28 GMT Server: LiteSpeed Alt-Svc: quic=":443"; ma=2592000; v="39,43,46", h3-22=":443"; ma=2592000 This is Tablet view
[root@test ~]# curl https://example.com/test.php -i -H "User-Agent: Android Mobile" HTTP/1.1 200 OK Connection: Keep-Alive Content-Type: text/html; charset=UTF-8 Etag: "63-1566258751;;;" X-Litespeed-Cache: hit Content-Length: 19 Date: Mon, 19 Aug 2019 23:52:31 GMT Server: LiteSpeed Alt-Svc: quic=":443"; ma=2592000; v="39,43,46", h3-22=":443"; ma=2592000 This is Mobile view
[root@test ~]# curl https://example.com/test.php -i -H "User-Agent: iPad" HTTP/1.1 200 OK Connection: Keep-Alive Content-Type: text/html; charset=UTF-8 Etag: "62-1566258748;;;" X-LiteSpeed-Cache: hit Content-Length: 19 Date: Mon, 19 Aug 2019 23:52:37 GMT Server: LiteSpeed Alt-Svc: quic=":443"; ma=2592000; v="39,43,46", h3-22=":443"; ma=2592000 This is Tablet view
[root@test ~]# curl https://example.com/test.php -i -H "User-Agent: iPhone" HTTP/1.1 200 OK Connection: Keep-Alive Content-Type: text/html; charset=UTF-8 Etag: "63-1566258751;;;" X-LiteSpeed-Cache: hit Content-Length: 19 Date: Mon, 19 Aug 2019 23:52:40 GMT Server: LiteSpeed Alt-Svc: quic=":443"; ma=2592000; v="39,43,46", h3-22=":443"; ma=2592000 This is Mobile view
[root@test ~]# curl https://example.com/test.php -i -H "User-Agent: Windows" HTTP/1.1 200 OK Connection: Keep-Alive Content-Type: text/html; charset=UTF-8 Etag: "64-1566258765;;;" X-Litespeed-Cache: hit Content-Length: 20 Date: Mon, 19 Aug 2019 23:52:45 GMT Server: LiteSpeed Alt-Svc: quic=":443"; ma=2592000; v="39,43,46", h3-22=":443"; ma=2592000 This is Desktop view
[root@test ~]# curl https://example.com/test.php -i -H "User-Agent: others" HTTP/1.1 200 OK Connection: Keep-Alive Content-Type: text/html; charset=UTF-8 Etag: "64-1566258765;;;" X-LiteSpeed-Cache: hit Content-Length: 20 Date: Mon, 19 Aug 2019 23:52:48 GMT Server: LiteSpeed Alt-Svc: quic=":443"; ma=2592000; v="39,43,46", h3-22=":443"; ma=2592000 This is Desktop view
So each device hit cache and is showing varied cached content.