User Device-Based Caching

It could be required to cache an asset based on the client device. For instance, if you want to cache and deliver a different layout to your mobile users than your desktop users you will need to take advantage of device-based caching. On the other hand, if you are taking advantage of responsive web design you don't need to worry about device-based caching as all devices will access the same assets, letting CSS perform the sizing adjustments.

In the event that you do require device-based caching, this guide will show you how KeyCDN's user device-based caching feature works and how you can start using it.

How does user device-based caching work?

The device-based caching feature will allow you to cache your assets for each specific device. The device type is determined by the User-Agent request header sent from the client. Three different device categories exist for this caching approach:

• desktop
• mobile
• tablet

The KeyCDN edge servers send the X-Device response header when they fetch the content from the origin server:

X-Device: desktop

The default value is always desktop, however, will change based on the device type used by the client. The Nginx rules implemented to enable user device-based caching have different regular expression patterns for mobile and tablet to detect the device used by the client.

map $http_user_agent $ua_device {
    default "desktop";
    "~*(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge\ |maemo|midp|mmp|mobile.+firefox|netfront|opera\ m(ob|in)i|palm(\ os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows\ ce|xda|xiino/i" "mobile";
    "~*android|ipad|playbook|silk/i" "tablet";
}

Purging user device-based assets

If user device-based caching is enable in your KeyCDN Zone and you want to purge a particular asset it is required to append the relevant device tag at the end of the URL, for instance:

example-hexid.kxcdn.com/path/to/asset.cssmobile

The example above will purge only the mobile version of that asset. However, if you wanted to completely remove the asset from cache, regardless of device type, you would purge using the following.

example-hexid.kxcdn.com/path/to/asset.cssmobile
example-hexid.kxcdn.com/path/to/asset.csstablet
example-hexid.kxcdn.com/path/to/asset.cssdesktop

Summary

User device-based caching can be very useful for those who deliver different assets to users based on the devices they are using. This feature is disabled by default for all new Zones, however, if you want to enable it, simply navigate to your Zone settings in the KeyCDN dashboard, set the Cache Key Device setting to enabled, and wait until your Zone is redeployed.