cf2.js

(() => {
  addEventListener("fetch", (event) => {
    if (event.request.url.match(/\.(jpe?g|png|gif|svg|webp|avif|jxl)/i) && event.request.method === "GET") {
      event.respondWith(handleRequest(event));
    } else {
      event.respondWith(fetch(event.request));
    }
  });
  async function handleRequest(event) {
    const request = event.request;
    const url = new URL(request.url);
    const path = url.pathname + url.search;
    const imageEngineURL = `https://${IMAGEENGINE_DELIVERY_ADDRESS}${path}`;
    
    const acceptHeader = request.headers.get('Accept');
    let format = null;
  
    //customize in preferred order.
    if (acceptHeader.includes('image/avif')) {
      format = '/f_avif';
    } else if (acceptHeader.includes('image/webp')) {
      format = '/f_webp';
    }else if(acceptHeader.includes('image/jxl')){
      format = '/f_jxl';
    }
  
    const cacheKey = url + format + request.headers.get("sec-ch-width") + request.headers.get("sec-ch-dpr") + request.headers.get("sec-ch-viewport-width") + request.headers.get("ect") + request.headers.get("save-data") + request.headers.get("sec-ch-form-factor");
    const cache = caches.default;
    let response = await cache.match(cacheKey);
    if (!response) {
      const missurl= new URL(imageEngineURL);
      missurl.searchParams.set('cfbust', new Date().getTime().toString());
      if (missurl.searchParams.has('imgeng')) {
        let currentValue = missurl.searchParams.get('imgeng');
        missurl.searchParams.set('imgeng', `${currentValue},${format}`);
      } else {
        // Create the 'imgeng' parameter if it does not exist
        missurl.searchParams.set('imgeng', format);
      }
      console.log("cache miss "+missurl);
      let originRequest = new Request(missurl, request);
      originRequest.headers.set("imgeng-inputcdn", "cloudflare,x");
      //below line only applicable if  fetch() and tiered cache is used. 
      //originRequest.headers.set("cf", { cacheTtl: 86400, cacheKey, cacheEverything: false, polish: false, cacheTags: ["ImageEngine"] });
      response = await fetch(originRequest);
      event.waitUntil(cache.put(cacheKey, response.clone()));
    }
    return response;
  }
})();