Add Cache Response using Web Cache API

[kresnasatya]

Background

I create a tools called Laravel Diff, a utility to compare what files changed when upgrade your Laravel framework. Previously, I use two repositories: SvelteKit for frontend and Worker (Cloudflare Workers) for backend. Now, I merge it into one repository thanks to Cloudflare Pages support (functions) in SvelteKit. Because SvelteKit and Cloudflare Pages communicate using Web API standards, it makes more easier to implement a Cache Response.

Btw, I'm almost keep it in two repositories and replace the Worker (plain) with Hono because it supports Cache Middleware. But, I think it makes more complicated if I do this way.

Problem

Now, here's the problem: the Cache Response is only available on Cloudflare not in SvelteKit itself. Let's say I use adapter/node in SvelteKit then I lose the Cache Response feature offered by Cloudflare. Hmm, I understand it must be the runtime environment responsible like NodeJS, Deno, or Bun. But, if it's possible to shipped it in SvelteKit first without waiting the runtime environment, I think it's a great movement.

Psst.. Deno support the Web Cache API.

https://deno.com/blog/deploy-cache-api#using-the-cache-api

Syntax

From senkulabs/laraveldiff.org/src/routes/api/tags/+server.js

import { allTags } from '$lib/github';

export async function GET({ request, url }) {
    const isCloudflare = typeof caches !== 'undefined';
    
    if (isCloudflare) {
        const cacheKey = new Request(url.toString(), request);
        const cache = caches.default;
        let response = await cache.match(cacheKey);
        if (response) return response;
    }

    let json = await allTags('laravel/laravel');

    let response = new Response(JSON.stringify(json));

    response.headers.set('Cache-Control', 'public, max-age=3600');
    response.headers.set('Content-Type', 'application/json');
    response.headers.set('Access-Control-Allow-Origin', '*');
    response.headers.set('Access-Control-Allow-Methods', 'GET');

    // Put the response in the cache
    if (isCloudflare) {
        const cache = caches.default;
        const cacheKey = new Request(url.toString(), request);
        cache.put(cacheKey, response.clone());
    }

    return response;
}