Workers Sites: Changes not reflected in browser until hard refresh

Developers Workers
1

I have a CF Workers Site site and I notice that the first load after a content change, the browser displays stale content until a hard refresh.

The site is generated by a static site generator (11ty), deployed to CF with GH actions. I notice the behavior in both Safari and Chrome.

I’m thinking the solution for this might be to use a different browser caching strategy. Instead of having the browser cache the page, like etags, but I since CF is hosting their Workers site via Workers, there might be a better strategy.

Also, any examples of manipulating headers in a CF Workers site would be appreciated!

2

I bet it’s due to caching headers. What’s the URL?

Scott Helme has a Workers script that manipulates headers:

3

Oh, nice. Thanks for that.

The URL is https://www.budparr.com/

The cache is cache-control: max-age=8640000

I was thinking Netlify’s strategy might be good here. They set 0 cache/must revalidate and use etags to signal to the browser.

4

So I solved this at the suggestion of a friend by adding a few lines to the end of kv-assset-handler.js (link, though mine my be from an outdated version)

//UPDATE TO ADD Etag
    if (pathKey) {
        response.headers.set("ETag", `W/"${pathKey.split(".")[1]}"`);
    }

    if (shouldSetBrowserCache) {
        //UPDATE TO ADD Cach-Control
        response.headers.set(
            "Cache-Control",
            `${options.cacheControl.public ? "public, " : ""}max-age=${
                options.cacheControl.browserTTL
            }${options.cacheControl.mustRevalidate ? ", must-revalidate" : ""}${
                options.cacheControl.immutable ? ", immutable" : ""
            }`
        );
    } else {
        response.headers.delete("Cache-Control");
    }
    return response;

And, I found an open issue about this topic in the repo: Implement cache revalidation · Issue #62 · cloudflare/kv-asset-handler · GitHub so hopefully something like this will make its way into the core.

And, @sdayman Thank you for the referral to the security headers script. I’ve added that into my build as well. https://github.com/budparr/budparr.com/tree/master/workers-site