Different Full Page Cache for mobile and desktop

Question

Note: Don't want to use multiple store views.

I have setup 2 different home pages for my website by detecting mobile agent and desktop agent.

Now the problem is, when page cache (Magento default) is generated from mobile, then it is showing mobile home page on desktop.

Is there anything I can do to make different page cache for mobile and desktop for home page?

• Raul Sanchez: I can't believe this is the only question I have found about this, a very common problem... all people out there with M2 are using varnish?
• Shoaib Munir: But I am not using varnish, I am using redis cache, I heard varnish is good but it has some issues, so I just used redis for cache
• Raul Sanchez: Sure... that's because I think it is strange there are no more questions like this. I bet most M2 are using just built-in FPC

Answer 1

Nice question, i think you could use the magento vary cookie, read here the relative paragraph to understand how it works.

Like it says, it is used to allow a cache to distinguish between different types of content (e.g. same category pages with different currency are cached from magento as different page versions), so it could be your scenario if you append to the vary string different value depending on $_SERVER['HTTP_USER_AGENT'] (also only for the homepage).

Instead, if you want to not cache the different content, you could get it with an ajax call (that are not cached by default) or avoid to cache entirely the page with the cacheable="false" in xml layout file.

• Shoaib Munir: I recently solved my problem using http vary header. devdocs.magento.com/guides/v2.3/extension-dev-guide/cache/… Though your answer is correct so I am marking it. Thanks mate :)
• LucScu: great works, i think is a cool feature, not easy to do, i would be curious to see the code and the frontend! :)
• Shoaib Munir: sure I can share the code
• Shoaib Munir: posted my answer. Hope it will also help others :)

Answer 2

After so much digging, I found This on devdocs

I have implemented this using plugin.

I created di.xml in my custom module

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
 <type name="Magento\Framework\App\Http\Context">
 <plugin name="vendor_plugin_magento_framework_app_http_context" type="Vendor\Module\Plugin\Magento\Framework\App\Http\Context"/>
 </type>
</config>

Created a new file for plugin app/code/Vendor/Module/Plugin/Magento/Framework/App/Http/Context.php

<?php
namespace Vendor\Module\Plugin\Magento\Framework\App\Http;
use Magento\Framework\App\Http\Context as HttpContext;
use Vendor\Module\Helper\Data as MyHelper;
class Context
{
 protected $_myHelper;
 public function __construct(MyHelper $myHelper)
 {
 $this->_myHelper = $myHelper;
 }
 public function beforeGetVaryString(HttpContext $subject)
 {
 $default = "default";
 if($this->_myHelper->isMobile()){
 $device = "mobile";
 }
 else{
 $device = "desktop";
 }
 $subject->setValue('user_device', $device, $default);
 }
}

create helper app/code/Vendor/Module/Helper/Data.php

<?php
namespace Vendor\Module\Helper;
use \Magento\Framework\App\Helper\AbstractHelper;
class Data extends AbstractHelper
{
 public function isMobile(){
 //return true;
 $regex_match = "/(nokia|iphone|ipad|motorola|^mot\-|softbank|foma|docomo|kddi|up\.browser|up\.link|"
 . "htc|dopod|blazer|netfront|helio|hosin|huawei|novarra|CoolPad|webos|techfaith|palmsource|"
 . "blackberry|alcatel|amoi|ktouch|nexian|samsung|^sam\-|s[cg]h|^lge|ericsson|philips|sagem|wellcom|bunjalloo|maui|"
 . "symbian|smartphone|mmp|midp|wap|phone|windows ce|iemobile|^spice|^bird|^zte\-|longcos|pantech|gionee|^sie\-|portalmmm|"
 . "jig\s browser|hiptop|^ucweb|^benq|haier|^lct|opera\s*mobi|opera\*mini|320x320|240x320|176x220"
 . ")/i";
 //DISPLAY DESKTOP THEME ON HAUWEI TAB
 if(preg_match("/(huaweimediapad)/i", strtolower($_SERVER['HTTP_USER_AGENT']))){
 return false;
 }
 if (preg_match($regex_match, strtolower($_SERVER['HTTP_USER_AGENT']))) {
 return TRUE;
 }
 if ((strpos(strtolower($_SERVER['HTTP_ACCEPT']),'application/vnd.wap.xhtml+xml') > 0) or ((isset($_SERVER['HTTP_X_WAP_PROFILE']) or isset($_SERVER['HTTP_PROFILE'])))) {
 return TRUE;
 }
 if(stripos($_SERVER['HTTP_USER_AGENT'],"Android") && stripos($_SERVER['HTTP_USER_AGENT'],"mobile")){
 return true;
 }
 if(stripos($_SERVER['HTTP_USER_AGENT'],"Android")){
 return false;
 }
 $mobile_ua = strtolower(substr($_SERVER['HTTP_USER_AGENT'], 0, 4));
 $mobile_agents = array(
 'w3c ','acs-','alav','alca','amoi','audi','avan','benq','bird','blac',
 'blaz','brew','cell','cldc','cmd-','dang','doco','eric','hipt','inno',
 'ipaq','java','jigs','kddi','keji','leno','lg-c','lg-d','lg-g','lge-',
 'maui','maxo','midp','mits','mmef','mobi','mot-','moto','mwbp','nec-',
 'newt','noki','oper','palm','pana','pant','phil','play','port','prox',
 'qwap','sage','sams','sany','sch-','sec-','send','seri','sgh-','shar',
 'sie-','siem','smal','smar','sony','sph-','symb','t-mo','teli','tim-',
 'tosh','tsm-','upg1','upsi','vk-v','voda','wap-','wapa','wapi','wapp',
 'wapr','webc','winw','winw','xda ','xda-');
 if (in_array($mobile_ua,$mobile_agents)) {
 return TRUE;
 }
 if (isset($_SERVER['ALL_HTTP']) && strpos(strtolower($_SERVER['ALL_HTTP']),'OperaMini') > 0) {
 return TRUE;
 }
 return FALSE;
 }
}

• LucScu: great, very helpful!
• Raul Sanchez: I am implementing this, but using "mobiledetect/mobiledetectlib" package, instead of having our own php code to do that
• user3512810: Does this solution work with full page cache enabled? @Shoaib Munir
• Shoaib Munir: Yes, I have applied this solution on multiple projects. it works