Using with Cloudflare?

[John]

Hello,
We noticed that if using Mobile Theme Switcher with Cloudflare then Cloudflare seems to get confused and mess up when deciding whether to show Desktop or Mobile version of website. Do you know if there is any fix for this? Cloudflare can detect mobile devices but I don’t know if there is a way to make Mobile Theme Switcher make it obvious that it needs to show the mobile theme only when mobile device. It seems to randomly work sometimes but not always.

I do see that Cloudflare has a mobile redirection service but it must go to a subdomain like m.domain.com, I’m thinking maybe as worst case scenario I could somehow set that subdomain up but just have it redirect to domain.com/https://www.elimidrol.com/?am_force_theme_layout=mobile but I’m assuming there has to be a better way.

Any help is greatly appreciated!

[John]

As a quick follow-up to this, we noticed that Cloudflare now has something called “workers” in beta which lets you execute javascript on the Cloudflare edge. I’m assuming this should allow more compatibility with Mobile Theme Switcher since the script could be made to execute Mobile Theme Switcher. Unfortunately, I’m completely new to javascript. Does anyone know how this could be done?

[Dinesh]

John,

Any Mobile Theme swticher is completely PHP based useragent switcher. So it can’t be done anything with javascript.

Thanks

[John]

Do you know if there is anything that can be done to make this work with Cloudflare? Does it make sense that Cloudflare is having issues with it and mixing up when to show Mobile vs Desktop theme?

Cloudflare does have built-in mobile detection but it seems like it can only redirect to a mobile subdomain like “m.domain.com”.

[John]

With the Cloudflare workers, I know Any Mobile Theme Switcher is all php but wouldn’t this help to make sure the mobile is served similar to something like:

addEventListener(‘fetch’, event => {
event.respondWith(fetchAndApply(event.request))
})

async function fetchAndApply(request) {
let uaSuffix = ”

const ua = request.headers.get(‘user-agent’)
if (ua.match(‘/iphone/i’) || ua.match(‘/ipod/i’)) {
uaSuffix = ‘/mobile’
} else if (ua.match(‘/ipad/i’)) {
uaSuffix = ‘/tablet’
}

return fetch(request.url + uaSuffix, request)
}

That’s just an example that Cloudflare gave but they said to ask the developer of this plugin for the correct way.

Basically Workers with Cloudflare is: Cloudflare Workers™ let developers run JavaScript Service Workers in Cloudflare’s 122 data centers around the world. Using a Service Worker, developers can modify a site’s HTTP requests and responses, make parallel requests, or generate responses from the edge. Since Cloudflare Workers run in Cloudflare’s data centers, not in the user’s browser, they can include sensitive business logic and will work with any browser or API client.

[Author]

Posts