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.

  • Admin
  • Last modified: 2019/08/20 15:09
  • by Kacey Schroeder