Integrating CMS mobile detection and CDN network

20 March 2012
Pawel Cegielski
Frink_Cognifide_2016_HeaderImages_0117
Content delivery network
Most performance sensitive websites use a content delivery network (CDN) to ensure optimal coverage and deliver the best possible user experience.  Now, desktop browsers may still account for most of your traffic but you've probably noticed a rapidly rising number of mobile user agents over the last couple of months. Here, we understand that savvy web marketers and expert CMS users (or in other words, Cognifide clients) prefer to explicitly specify what type of content is displayed over mobile devices as they recognise the merit in keeping content consistent over mobile and desktop browsers alike, in addition to having a url strategy that allows for content to be properly shared across different media.

Recently, we had an interesting request from one of our clients - to use the built-in CMS mobile detection mechanism together with a CDN network to allow for caching of specific content for different user-agents. While it was a standard to use the Vary-Header to indicate different types of content for different user agents, it did not really allow content to be stored on the CDN as the cache key is always based on the URL hierarchy and not on the specific headers. So, the challenge was how you could force your CDN to work with different user-agent based content and still ensure best cached responses?
 
Firstly, we need to ensure that we minimize the number of requests that comes to the origin server and then, tell the CDN network what kind of mobile or desktop device actually hits the CDN network. Of course, the easiest way to do this is to use a cookie based value that indicates user-agent group, for instance, we can split most devices into these groups: desktop, smart, touch, feature.

Preview content on Android touchphone using Adobe CQ5 Mobile module

Illustration: Preview content on an Android based touch phone using the Adobe CQ5 Mobile module


The first hit should always hit the origin server to get a valid cookie however all of the subsequent requests should be served from CDN network. To ensure a single URL solution, we decided to use ESI (Edge Side Includes) and include different URLs based on the cookie value.

We have implemented ESI with CMS so it produces ESI code instead of HTML content for those html files that does not include *.smart.*, *.touch.*, *.feature.* or *.desktop.* in the requested filename. A simple solution might be described by the graph below: mobile_detection_cdn This solution allows you to cache all of the files on the CDN cache however it requires you to by-pass the cache if the request does not contain a valid cookie or if the cookie value is incorrect. Advance Cache Logic setting logic can be defined as below:
  off
  0s
It allows you to deliver content from cache only if valid device-group is set otherwise it will bypass cache content to get cookie. Entire logic has to redirect back to the same URL so end-user  browser hits the CDN and process ESI code. As a part of ready to go solution you might consider to create specific ESI code to catch all of the bots and spiders. It can be easily implemented using ESI syntax and USER_AGENT directive.

Feedback on alternative methods is always appreciated and questions, if any are welcome!