Respond with cached page

Hi,

I followed the Cache API example to create a simple Worker (on workers.dev subdomain) that basically checks the cache for a key (URL), responds with its content if key is found, or else fetches the external page/URL, caches its content, and responds with the cached page.

const cacheKey = "https://httpbin.org/html" // works fine
//const cacheKey = "https://8961e70be1ebe6a8.demo.carrd.co" // does not work
const cache = caches.default

let response = await cache.match(cacheKey)

if (!response) {
    response = await fetch(cacheKey)
    response = new Response(response.body, response)
    response.headers.append("Cache-Control", "s-maxage=10")
    event.waitUntil(cache.put(cacheKey, response.clone()))
}

return response

This works fine for most URLs (test ones like https://httpbin.org/html and https://example.org), but it doesn’t work (not cached or matched in cache) for any carrd.co sites (a demo URL commented in example above).

Generally, all carrd.co sites (also hosted on Cloudflare) respond with a HTTP 200 or 304 status, along with the following headers, one or more of which could be causing an issue with caching in the Worker middleware:

cache-control: max-age=0
cf-cache-status: DYNAMIC
cf-ray: 68959d43fd113774-SYD
content-encoding: gzip
content-type: text/html
date: Sat, 04 Sep 2021 07:48:14 GMT
expect-ct: max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct"
expires: Sat, 04 Sep 2021 07:48:14 GMT
last-modified: Fri, 03 Sep 2021 04:31:30 GMT
server: cloudflare
vary: Accept-Encoding

What could be the problem, and how to resolve it so that a carrd.co site is cached/matched as well as other URLs?

Thank you!

Hi @vnick,

From the “how the Cache works” page in the Cloudflare Workers documentation:

First, fetch checks to see if the URL matches a different zone. If it does, it reads through that zone’s cache (or Worker!). Otherwise, it reads through its own zone’s cache, even if the URL is for a non-Cloudflare site.

Therefore, since carrd.co is also using Cloudflare, they control the how responses are cached.

The above paragraph talks about caching when using fetch, but I believe the same applies when using the Cache API. Though. I might be wrong :slightly_smiling_face:

Finally got it to work (using a custom domain), and found the underlying issue.

As per the Cache API docs:

However, any Cache API operations in the Cloudflare Workers dashboard editor, Playground previews, and any *.workers.dev deployments will have no impact. Only Workers deployed to custom domains have access to functional Cache operations.

So, my example above (deployed on workers.dev subdomain) wasn’t working due to no access to the edge cache (although no error as such) for Cloudflare hosted sites (like carrd.co), but strangely it was working for non-Cloudflare hosted sites (like example.org), which I still don’t know why (or maybe it’s not officially documented).

I added a custom domain on Cloudflare, assigned the Worker to it, and the edge cache was fully accessible, so now all sites (Cloudflare hosted and non-Cloudflare hosted) are working fine in terms of programmable access to their edge cache.

Hope it helps someone facing a similar issue in the future.

This topic was automatically closed 3 days after the last reply. New replies are no longer allowed.