Joomla Displays Mobile Version of the Content for Desktop Visitors – How to Fix

“Joomla’s caching will come back to haunt you.” – itoctopus, Joomla experts, circa 2014

Note: The solution to this problem requires a modification to a core file, which means that future Joomla updates will wipe out the solution. Be careful and vigilant when you update your website if you have modified core files.

One of our very large clients had a recurring problem: the layouts of the mobile and the desktop version of the site were getting mixed up. In other words, a user visiting the website through his mobile device would see the desktop version of the site, and a user visiting the website using a laptop would see the mobile version. Of course, this wasn’t happening all the time, but it was happening, and it was annoying and making the whole website look unprofessional.

Why was the problem happening?

The problem was happening because of Joomla’s cache, and we’re not talking about the System – cache plugin (which was disabled for that particular website), but we’re talking about the global Joomla cache that is set in the configuration settings (which is enabled by logging in to the backend, and then going to System -> Global Configuration in the backend of the Joomla website, and then clicking on the System tab on the top, and finally setting the Cache value under Cache Settings to On – Conservative caching). But why was caching the cause of the problem?

Well, when a person was visiting a page with a mobile device and the content on that page was not yet cached, then Joomla will cache the mobile version of the content, which was using a completely different template. When a subsequent visitor visits that same page using a laptop, then the cache for the content of that Joomla page will not be re-created (Joomla does not distinguish between mobile and desktop traffic when it comes to caching), and Joomla will serve the cached version of that content, which is the mobile version. As you can see, we never used the term “Page Caching” because pages were not cached (since the System – Cache plugin was disabled), what was cached was the content (content will be automatically cached if caching is enabled at the global level).

So, how did we solve the problem?

We had 3 options to solve the problem:

1. Completely disable caching.

2. Disable content caching.

3. Modify Joomla’s caching to make it distinguish between mobile and desktop traffic.

Option #1 was completely out of the question, because the traffic that the website was getting was substantial, and completely disabling caching will definitely crash the website within a few minutes. So, we experimented with option #2, and we disabled content caching as explained here. However, soon after we did that, load started increasing exponentially and the website was bound to crash, and so we reverted our change and re-enabled content caching. This meant that we were only left with one option: Modifying Joomla’s own cache.

Now, if you have been developing for Joomla for a long time, you will probably know that Joomla’s cache is very delicate and very complex. We literally spent a couple of days until we figured out the solution. Here’s what we did to solve the problem:

• We opened the file storage.php located under the libraries/joomla/cache folder.

• We added the following code at the beginning of the _getCacheId function:

  $isMobile = false;
  $arrMobileAgent = array('Android', 'BlackBerry', 'Googlebot-Mobile', 'iPhone', 'iPod', 'mobi', 'mobile', 'Opera Mini', 'Safari Mobile', 'Windows Mobile');
  foreach ($arrMobileAgent as $mobileAgent) {
  	if (preg_match("/$mobileAgent/i",$_SERVER['HTTP_USER_AGENT'])) {
  		$isMobile = true;;
  	}
  }
  $appendMobile = '';
  if ($isMobile == true){
  	$appendMobile = 'mobile-';
  }

• We then changed, in the same function, the following line:

  return $this->_hash . '-cache-' . $group . '-' . $name;

  to this one:

  return $this->_hash . '-cache-' . $appendMobile. $group . '-' . $name;

• We uploaded the file back.

• The problem was solved!

The above code, in case you’re curious, will generate a different cache for the mobile version of the site, which means that fixing the problem did not entail us to disable caching for the mobile version of the site, which was ideal!

If you want to make sure that the above method is working, then run the following command in ssh under the cache folder after visiting the website with a mobile device:

find . -type f -name "*-mobile-*" | wc -l

If you get a number that is bigger than 1, then this means that the method is working. If that’s not the case, then you probably have modified the wrong file or you are visiting the website with an unrecognized mobile device (in the latter case, you will need to check the user agent of that device and add it to the $arrMobileAgent array).

Now, here are some FAQs about our solution.

• Will it work with K2?

  Yes – it will, since K2 uses Joomla’s cache and doesn’t have its own cache.

• Is it template-dependent?

  No. It’ll work with any template.

• Which versions of Joomla is it compatible with?

  The solution is compatible with Joomla 2.5.x and Joomla 3.x (as of November 24^th, 2014).

• The above solution can’t work for us since we’re using the same URL for the mobile and the desktop version, and Joomla caches content by URL. Right?

  Actually, wrong. There is a myth that Joomla caches content by URL but it’s not true. Joomla caches content by content ID, and since we’re appending -mobile to the mobile version of the content, then you needn’t worry; the above solution will work for you! In fact, the website in question that we fixed the problem for was using the same URL for mobile and desktop traffic.

If you have further questions, or if you want to implement the above solution, but you’re a bit scared of modifying a core Joomla file, then please contact us and we’ll do it for you. Please note that our super affordable fees apply.