Bypass cache for mobile user agents, VARNISH+NGINX+W3CACHE

Question

Right now I'm running Wordpress w/ W3 Cache on nginx with varnish front end. I'm trying to use the WP Touch Pro plugin for wordpress to display mobile sites, but it is not working. Shows the desktop theme still.

I've put the mobile user agents in the rejected user agents box in w3 cache.

Here is the nginx config w3 cache spit out:

BEGIN W3TC Page Cache cache
location ~ /wp-content/w3tc/pgcache.*html$ {
expires modified 3600s;
add_header X-Powered-By "W3 Total Cache/0.9.2.4";
add_header Vary "Accept-Encoding, Cookie";
}
location ~ /wp-content/w3tc/pgcache.*gzip$ {
gzip off;
types {}
default_type text/html;
expires modified 3600s;
add_header X-Powered-By "W3 Total Cache/0.9.2.4";
add_header Vary "Accept-Encoding, Cookie";
add_header Content-Encoding gzip;
}
# END W3TC Page Cache cache
# BEGIN W3TC Browser Cache
gzip on;
gzip_types text/css application/x-javascript text/x-component text/richtext     image/svg+xml text/plain text/xsd text/xsl text/xml image/x-icon;
location ~ \.(css|js|htc)$ {
expires 31536000s;
add_header X-Powered-By "W3 Total Cache/0.9.2.4";
}
location ~ \.(html|htm|rtf|rtx|svg|svgz|txt|xsd|xsl|xml)$ {
expires 3600s;
add_header X-Powered-By "W3 Total Cache/0.9.2.4";
}
location ~ \.(asf|asx|wax|wmv|wmx|avi|bmp|class|divx|doc|docx|eot|exe|gif|gz|gzip|ico|jpg|jpeg|jpe|mdb|mid|midi|mov|qt|mp3|m4a|mp4|m4v|mpeg|mpg|mpe|mpp|otf|odb|odc|odf|odg|odp|ods|odt|ogg|pdf|png|pot|pps|ppt|pptx|ra|ram|svg|svgz|swf|tar|tif|tiff|ttf|ttc|wav|wma|wri|xla|xls|xlsx|xlt|xlw|zip)$ {
expires 31536000s;
add_header X-Powered-By "W3 Total Cache/0.9.2.4";
}
# END W3TC Browser Cache
# BEGIN W3TC Minify core
rewrite ^/wp-content/w3tc/min/w3tc_rewrite_test$ /wp-content/w3tc/min/index.php?w3tc_rewrite_test=1 last;
rewrite ^/wp-content/w3tc/min/(.+\.(css|js))$ /wp-content/w3tc/min/index.php?file=$1 last;
# END W3TC Minify core
# BEGIN W3TC Page Cache core
rewrite ^(.*\/)?w3tc_rewrite_test$ $1?w3tc_rewrite_test=1 last;
set $w3tc_rewrite 1;
if ($request_method = POST) {
set $w3tc_rewrite 0;
}
if ($query_string != "") {
set $w3tc_rewrite 0;
}
if ($http_host != "mysite.com") {
set $w3tc_rewrite 0;
}
set $w3tc_rewrite2 1;
if ($request_uri !~ \/$) {
set $w3tc_rewrite2 0;
}
if ($request_uri ~* "(sitemap(_index)?\.xml(\.gz)?|[a-z0-9_\-]+-sitemap([0-9]+)?\.xml(\.gz)?)") {
set $w3tc_rewrite2 1;
}
if ($w3tc_rewrite2 != 1) {
set $w3tc_rewrite 0;
}
set $w3tc_rewrite3 1;
if ($request_uri ~* "(\/wp-admin\/|\/xmlrpc.php|\/wp-(app|cron|login|register|mail)\.php|\/feed\/|wp-.*\.php|index\.php)") {
set $w3tc_rewrite3 0;
}
if ($request_uri ~* "(wp\-comments\-popup\.php|wp\-links\-opml\.php|wp\-locations\.php)") {
set $w3tc_rewrite3 1;
 }
if ($w3tc_rewrite3 != 1) {
set $w3tc_rewrite 0;
}
if ($http_cookie ~* "(comment_author|wp\-postpass|wordpress_\[a\-f0\-9\]\+|wordpress_logged_in)") {
set $w3tc_rewrite 0;
}
if ($http_user_agent ~* "(W3\ Total\ Cache/0\.9\.2\.4|iphone|ipod|ipad|aspen|incognito|webmate|android|dream|cupcake|froyo|blackberry9500|blackberry9520|blackberry9530|blackberry9550|blackberry\ 9800|blackberry\ 9780|webos|s8000|bada)") {
set $w3tc_rewrite 0;
}
set $w3tc_ua "";
if ($http_user_agent ~* "(acer\ s100|android|archos5|blackberry9500|blackberry9530|blackberry9550|blackberry\ 9800|cupcake|docomo\ ht\-03a|dream|htc\ hero|htc\ magic|htc_dream|htc_magic|incognito|ipad|iphone|ipod|kindle|lg\-gw620|liquid\ build|maemo|mot\-mb200|mot\-mb300|nexus\ one|opera\ mini|samsung\-s8000|series60.*webkit|series60/5\.0|sonyericssone10|sonyericssonu20|sonyericssonx10|t\-mobile\ mytouch\ 3g|t\-mobile\ opal|tattoo|webmate|webos)") {
set $w3tc_ua _high;
}
set $w3tc_ref "";
set $w3tc_ssl "";
set $w3tc_enc "";
if ($http_accept_encoding ~ gzip) {
set $w3tc_enc _gzip;
}
set $w3tc_ext "";
if (-f "$document_root/wp-content/w3tc/pgcache/$request_uri/_index$w3tc_ua$w3tc_ref$w3tc_ssl.html$w3tc_enc") {
set $w3tc_ext .html;
}
if ($w3tc_ext = "") {
set $w3tc_rewrite 0;
}
if ($w3tc_rewrite = 1) {
rewrite .* "/wp-    content/w3tc/pgcache/$request_uri/_index$w3tc_ua$w3tc_ref$w3tc_ssl$w3tc_ext$w3tc_enc" last;
}
# END W3TC Page Cache core

And here is what I have in my varnish vcl..

sub vcl_recv {
# Add a unique header containing the client address
remove req.http.X-Forwarded-For;
set req.http.X-Forwarded-For = client.ip;

# Device detection
set req.http.X-Device = "desktop";
if ( req.http.User-Agent ~ "iP(hone|od|ad)" || req.http.User-Agent ~ "Android" ) {
set req.http.X-Device = "smart";
}
elseif ( req.http.User-Agent ~ "(SymbianOS|BlackBerry|SonyEricsson|Nokia|SAMSUNG|^LG)"     ) {
set req.http.X-Device = "cell";
}

Any help is greatly appreciated, I've been banging my head against this for 2 days..

As long as the backend sends "Vary: User-Agent", Varnish will store an extra cache entry for each user agent that visits the URL. This effectively means that the backend is still delivering the desktop theme. Have you verified that the backend delivers the mobile version of the site? — Kvisle, Oct 19 '11 at 19:12
Well here is what I can tell you.. If I use the address bar in safari on my phone it works. If I click the title bar or home in the menu it takes me to the desktop theme. Click reload and it takes me to the mobile theme..click title bar - desktop, reload again - mobile. Ever see anything like this? — Mike McGhee, Oct 19 '11 at 21:29
Are you sure that this isn't your smartphones cache playing tricks on you? And have you tried accessing the backend directly? Do you see the same behaviour there? — Kvisle, Oct 19 '11 at 21:35
I'm trying to figure out how to do that...if I use 8080 (nginx) it strips it out and redirects back to port 80. I deleted my smartphone cache and tried skyfire and it's still doing it. — Mike McGhee, Oct 20 '11 at 00:49
I disabled varnish and just using nginx and w3 cache and its working perfectly fine now..so its definitely and issue with Varnish.. — Mike McGhee, Oct 20 '11 at 14:40

Kirrus · Answer 1 · 2012-06-09T15:25:35.807

It doesn't look like you're adding the X-Device header to your hash, assuming you've not posted that part of your VCL because it doesn't exist?

There's a full set of instructions here, slightly drupal based, but still relevant: http://fangel.github.com/mobile-detection-varnish-drupal/

The main bit, you need to have this in your VCL config file:

sub vcl_hash { 
  # Your existing hash-routine here..

  # And then add the device to the hash (if its a mobile device)
  if (req.http.X-Device ~ "^mobile") {
    set req.hash += req.http.X-Device; 
  }
}

If you've got that, and it's still not working, try running varnishlog -o {FILENAME} to log all web-requests to a file. That's extremely verbose, and should let you see exactly how varnish is handling those requests.

Bypass cache for mobile user agents, VARNISH+NGINX+W3CACHE

1 Answers1