Page rules to cache webpages by device type in Pro Plan

Hi,

I’ve CF Pro Plan with a website which modifies a pair of elements depending on the device of the visitor (Mobile or Desktop). I’ve tried to create a Page Rule for ‘www.mydomain.com/page/*’, but I’ve found that CF creates the same cached copy for all the devices.

If I first-visit ‘www.mydomain.com/page/foo1’ with Desktop browser, CF creates a Desktop-version cached copy for that URL. If a mobile user visits such URL, they find the Desktop elements.

I’ve read that CF offers a specific setting to “cache by device type” (https://support.cloudflare.com/hc/en-us/articles/229373388-Understand-Cache-by-Device-Type-Enterprise-plans-only-), but only for Enterprise plans. I wondered if there was a workaround (e.g. by modifiying the configuration in the origin server/code) in order to cache webpages in CF by detecting the device of the visitor.

Thank you very much in advance.

The default cache-key is:

${header:origin}::${scheme}://${host_header}${uri}

So there is nothing that you can do in the response from your origin that will enable a different asset to be served depending on the device type.

You could do a mobile redirect, but I suspect that is not really relevant these days.

You could also use Workers to modify the request URI before doing a cache fetch. For example, append Device-Type to the URI before fetch using similar logic to the Cache by Device Type feature.

2 Likes