Update (April 24, 2015:

Ian Spare has written a great piece improving on this cache configuration. If you’re running WPtouch Pro 3 on an Nginx server, be sure to read this post, then head over to Ian’s for the improved .conf rules!

Over the weekend I migrated my personal site to use Nginx instead of Apache – partly as a test of my limited server administration skills.

Nginx’s popular advantage is its ability to very efficiently serve static content (plain HTML, images, etc.) in situations where Apache would get bogged down. With my images, stylesheets, and JavaScript sped up, all that was left was getting my content out of WordPress faster. To avoid handing off requests to PHP, I’m caching the HTML generated in Nginx’s fastcgi_cache.

If you’re using WPtouch Pro, though, there is a problem with the standard configuration for the Nginx cache: because we’re not sending the request to WordPress, the plugin doesn’t get a chance to  switch between themes when someone visits your site. Depending on whether  a page on your site is loaded by a WPtouch Pro compatible device or another browser, the page could get ‘stuck’ in one of the two modes.

The trick to solving this is to have Nginx manage two sets of cached data and switch between them depending on whether the visitor is on a mobile device or using a desktop browser. It’s dead easy to do using a single variable and two conditionals!

Find your fastcgi_cache_key configuration (mine is in nginx.conf), and append $mobile_request to it. For example, mine now reads like this:

fastcgi_cache_key "$scheme$request_method$host$request_uri$mobile_request";

Next, switch to your site configuration (I’ve kept it in default.conf for now). Within your server definition, add:

set $mobile_request 0;

if ($http_user_agent ~* "(2\.0 MMP|240x320|400X240|AvantGo|BlackBerry|Blazer|Cellphone|Danger|DoCoMo|Elaine\/3\.0|EudoraWeb|Googlebot-Mobile|hiptop|IEMobile|KYOCERA\/WX310K|LG\/U990|MIDP-2\.|MMEF20|MOT-V|NetFront|Newt|Nintendo Wii|Nitro|Nokia|Opera Mini|Palm|PlayStation Portable|portalmmm|Proxinet|ProxiNet|SHARP-TQ-GX10|SHG-i900|Small|SonyEricsson|Symbian OS|SymbianOS|TS21i-10|UP\.Browser|UP\.Link|webOS|Windows CE|WinWAP|YahooSeeker\/M1A1-R2D2|NF-Browser|iPhone|iPad|iPod|Android|BlackBerry9530|G-TU915 Obigo|LGE VX|webOS|Nokia5800)" ) {

	set $mobile_request 1;

}

if ($http_cookie ~ 'wptouch-pro-view=desktop') {
	set $mobile_request 0;
}

To allow users to use the mobile switch as expected, we need to take advantage of a feature just added to WPtouch Pro 3. On the Core Settings screen, switch Admin Mode to Advanced and save. Now scroll to the Desktop / Mobile Switching section and change the Desktop theme switch buttons setting to Automatically inserted with AJAX (better for caching). This will ensure the switch is inserted into your cached desktop view whenever a mobile visitor accesses the site.

Now restart nginx with nginx -t && service nginx reload. Your site should now be fully cached and elegantly switch between desktop and mobile views!