پرش به مطلب اصلی

کد Early Hints 103

این نمونه‌کد کمک می‌کند تا کلاینت‌ها (مثلن مرورگر) زمانی‌که منتظر دریافت پاسخ HTML هستند، درخواست دریافت اجزای استاتیک صفحه را ارسال کنند.

کد وضعیت 103 Early Hints برای افزایش سرعت توزیع محتوا طراحی شده است.

const CSS = "body { color: red; }";
const HTML = `
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Early Hints test</title>
    <link rel="stylesheet" href="/test.css">
</head>
<body>
    <h1>Early Hints test page</h1>
</body>
</html>
`;

addEventListener("fetch", (event) => {
    event.respondWith(handleRequest(event.request));
});


async function handleRequest(request) {
  // If request is for test.css, serve the raw CSS
  if (/test\.css$/.test(request.url)) {
    return new Response(CSS, {
      headers: {
        "content-type": "text/css",
      },
    });
  } else {
    // Serve raw HTML using Early Hints for the CSS file
    return new Response(HTML, {
      headers: {
        "content-type": "text/html",
        link: "</test.css>; rel=preload; as=style",
      },
    });
  }
}