Cloudflare Cache Issues with Mobile Theme – Seeking Help for a Clean Solution

Hi everyone,

We’ve been facing an issue with caching on our website, specifically with Cloudflare. We are using the mobile theme exclusively (no mixing of mobile with Google’s AMP version or desktop version). The problem we’re encountering is that Cloudflare caching seems to conflict with our mobile theme, sometimes breaking it while the desktop theme works fine.

We’ve tried multiple solutions, including using Cloudflare’s caching settings such as Cache Everything and Standard Cache Level, along with Bypass Cache on Cookie and other strategies for mobile-specific caching, but we haven’t been able to successfully get the mobile theme to function properly without issues. Here’s the specific code we used in an attempt to address this problem:

// Cloudflare Worker code to bypass cache for mobile devices
export default {
async fetch(request, env, ctx) {
let userAgent = request.headers.get(‘User-Agent’);
if (userAgent && /Mobile|Android|iPhone/i.test(userAgent)) {
// Mobile logic – Bypass cache for mobile users
return fetch(request, { cache: ‘no-store’ }); // Ensures the cache is bypassed
} else {
// Desktop logic – Allow caching for desktop users
return fetch(request);
}
},
};

We’ve applied this code to bypass cache for mobile devices, and tried several approaches using Cloudflare’s Bypass Cache on Cookie option, but the problem persists. The mobile theme works intermittently, sometimes caching properly and sometimes breaking.

Additionally, we’ve been wondering if there is a distinct mobile theme other than the one we’ve been using that might be causing this issue. If anyone knows about a different mobile theme or specific settings for mobile theme caching that we might have missed, we would appreciate any guidance.

What we are looking for:

We are seeking advice from anyone who has faced a similar problem or knows how to properly configure Cloudflare for caching mobile themes while ensuring they load properly for users. Specifically, we are trying to:

Cache the mobile version correctly without affecting the desktop theme.
Ensure that the mobile theme doesn’t break due to cache conflicts.
Identify any additional configuration steps or tools that might help in fixing this issue.
Any help or insights on this issue would be greatly appreciated. Thank you in advance!