Purge Cloudflare Cache While On A Page

Using Cloudflare Workers To Purge Cache

For clients utilizing Cloudflare to cache websites, vastly improving their performance, is almost a no-brainer. You can lower hosting costs, improve responsiveness, and reduce downtime. Who doesn't want that?

When it comes to purging the cache after posting an update, it can sometimes be cumbersome. You'd have to login to the platform, navigate to the purge section and then purge based upon a set of criteria.

What if I told you, we could simplify it to just clicking a Bookmark? And what if I said we could do nearly entirely from within the Cloudflare platform itself?

Let's do this.

Setting Up Cloudflare Workers

If you're using Cloudflare the money is that you're utilizing Workers in some fashion.

Within Cloudflare, let's navigate to Workers and click Manage Workers.

Once in you can either create a worker or utilize one you already have setup. For the purposes here we're utilizing a fresh, newly minted worker.

Purging Function

Now the Cloudflare API supports purging content in a variety of ways. You can perform based on tags, domains, urls, etc. The way we're doing it is by the URL of the page you're on.

The purge function we'll be utilizing can be broken down into three main parts.

• Obtain and validate the zone Id
• Create the header and data information for purging
• Perform the purge call

async function purgeCache(request) {

    const url = new URL(request.url)
    const { host, pathname, searchParams } = new URL(url)

    // 1. Validate the zone id, and return an error if invalid
    let zoneIdValidated = (new RegExp("^([a-z0-9]{32})$")).test(url.searchParams.get('zone'));

    if (!zoneIdValidated) {
        return new Response('Invalid Zone ID', {
            status: 500
        });
    }

    // 2. Create header information and Json content
    let content = '{"files":["https://' + host + pathname + '"]}'
    let headers = {
        'Content-Type': 'application/json',
        'X-Auth-Email': '[email protected]',
        'X-Auth-Key': 'API Key'
    }

    const init = {
        method: 'POST',
        headers: headers,
        body: content
    }
    
    // 3. Fetch Purge 
    const response = await fetch('https://api.cloudflare.com/client/v4/zones/'+url.searchParams.get('zone')+'/purge_cache', init)

    return response
}

That's the purge itself. We also need to update the primary listener such that it only runs when we want it to.

Update Listener

addEventListener('fetch', function(event) {
    const { request } = event
    const url = new URL(event.request.url)
    if (url.searchParams.get('__purge_page_cache')) {
        event.respondWith(purgeCache(event.request))
    } else{
        event.respondWith(handleRequest(request).catch(handleError))
    }
  })

With this now in place, if we were to go to the following url we could purge the corresponding URL: https://www.ourwebsite.com?__purge_page_cache=1&zone=1234567890987654321. Give it a test using the Worker debug panel before you Save & Deploy to ensure everything is correct.

The Bookmark

Now with the code in place, saved, deployed we can create a bookmark in the browser of our choice. Go on and create a new bookmark, and then Edit it.

In the path portion, you'll want to update it with the following code:

javascript:(function() {s = window.location.toString(); s = s.substring(0,s.indexOf('?'));window.location=s + '?__purge_cache=1&zone=YOUR_ZONE_ID_GOES_HERE';})()

Now, if you're browsing your site that is cached in Cloudflare, you can just hit this bookmark button and it will cause the worker to push a purge request on the page that you're browsing.

When it does, you'll get a response that resembles the following:

{
    "result": {
        "id": "89951414b5da082717fc508ed83f5e8c"
    },
    "success": true,
    "errors": [],
    "messages": []
}

Now, clearing the cache of any of the pages you're on, including CSS, JS, or images that you want to open in a separate browser tab. Couldn't be easier.