Template Gallery

Cache API


Cache using Cloudflare’s Cache API. This example can cache POST requests as well as change what hostname to store a response in cache. Note the previewer is not avalible for using Cache API.

async function handleRequest(event) { let request = event.request let cacheUrl = new URL(request.url) // hostname for a different zone cacheUrl.hostname = someOtherHostname let cacheKey = new Request(cacheUrl, request) let cache = caches.default // Get this request from this zone's cache let response = await cache.match(cacheKey) if (!response) { //if not in cache, grab it from the origin response = await fetch(request) // must use Response constructor to inherit all of response's fields response = new Response(response.body, response) // Cache API respects Cache-Control headers, so by setting max-age to 10 // the response will only live in cache for max of 10 seconds response.headers.append('Cache-Control', 'max-age=10') // store the fetched response as cacheKey // use waitUntil so computational expensive tasks don't delay the response event.waitUntil(cache.put(cacheKey, response.clone())) } return response } async function handlePostRequest(event) { let request = event.request let body = await request.clone().text() let hash = await sha256(body) let cacheUrl = new URL(request.url) // get/store the URL in cache by prepending the body's hash cacheUrl.pathname = '/posts' + cacheUrl.pathname + hash // Convert to a GET to be able to cache let cacheKey = new Request(cacheUrl, { headers: request.headers, method: 'GET', }) let cache = caches.default //try to find the cache key in the cache let response = await cache.match(cacheKey) // otherwise, fetch response to POST request from origin if (!response) { response = await fetch(request) event.waitUntil(cache.put(cacheKey, response)) } return response } addEventListener('fetch', event => { try { let request = event.request if (request.method.toUpperCase() === 'POST') return event.respondWith(handlePostRequest(event)) return event.respondWith(handleRequest(event)) } catch (e) { return event.respondWith(new Response('Error thrown ' + e.message)) } }) async function sha256(message) { // encode as UTF-8 const msgBuffer = new TextEncoder().encode(message) // hash the message const hashBuffer = await crypto.subtle.digest('SHA-256', msgBuffer) // convert ArrayBuffer to Array const hashArray = Array.from(new Uint8Array(hashBuffer)) // convert bytes to hex string const hashHex = hashArray.map(b => ('00' + b.toString(16)).slice(-2)).join('') return hashHex } const someOtherHostname = 'my.herokuapp.com'