Template Gallery
Cache TTL and Custom Keys
Determine how/if Cloudflare’s Classic CDN and Browsers will cache a resource by setting TTLs, cache keys, and cache settings.
async function handleRequest(request) {
let url = new URL(request.url)
// Only use the path for the cache key, removing query strings
// and always storing HTTPS e.g. https://www.example.com/file-uri-here
let someCustomKey = `https://${url.hostname}${url.pathname}`
let response = await fetch(request, {
cf: {
// Tell Cloudflare's Global CDN to always cache this fetch regardless of content type
// for a max of 5 seconds before revalidating the resource
cacheTtl: 5, // sets TTL to 5 and cacheEverything setting
//Enterprise only feature, see Cache API for other plans
cacheKey: someCustomKey,
},
})
// must use Response constructor to inherit all of response's fields
response = new Response(response.body, response)
//Set cache control headers to cache on browser for 25 minutes
response.headers.set('Cache-Control', 'max-age=1500')
return response
}
addEventListener('fetch', event => {
return event.respondWith(handleRequest(event.request))
})
