I am trying to implement Early Hint Headers (Status Code 103) for my next js application at cloudflare worker. And I want to add some static assets like 'https://int2-www.my-domain.com/assets/icons/cart-light.svg', 'https://int2-www.my-domain.com/assets/fonts/Circular-Bold.woff2' to my Early link headers which i will emit from my cloudlfare worker, as 103 response code.
I have implemented this solution at my handler at worker:
const url = new URL(originalRequest.url);
const origin = url?.origin || '';
const earlyHintLinks = [
<${origin}/assets/fonts/Circular-Ultra.otf>; rel=preload; as=font; type=font/otf; crossorigin,
<https://assets.my-domain.com/image/upload/c_pad,dpr_1.0,f_auto,q_auto,h_636,w_636/full-path.jpg&g… rel=preload; as=image,
<${origin}/assets/icons/star-golden-full.svg>; rel=preload; as=image,
<${origin}/assets/styles/smart-banner-styles.css>; rel=preload; as=style,
];;
// Build the headers for Early Hints
const earlyHints = new Headers();
earlyHints.set('link', earlyHintLinks.join(', '));
// Try Early Hints if available
if ((originalRequest.cf as any)?.early_hints) {
event.waitUntil((originalRequest.cf as any).early_hints.send(earlyHints));
} else {
// Fallback: set Link header on the *real response*
response.headers.set('link', earlyHintLinks.join(', '));
}
return response;
I am not able to get a seperate 103 Status Code with these response headers, and I am getting only a 200 status reponse on that page call in my network tab, where I have one more section of EarlyHints Headers, just before the Response header, which contains the headers i have appended earlier from worker.
I am not getting much help from worker.
How can i get a seperate 103 status repsonse with these link headers, and implement early hints properly. Am i following some wrong documentation here?
Can anyone please help?