How to use 103 Early Hints in ApiPlatform?

Question

I don't understand how to use HTTP/2 Push or 103 Early Hints in Api Platform.

I found information in the Api Platform documentation about Pushing related resources with HTTP/2 and Vulcain protocol.

I decided to use them in my project but didn't see any difference. Link headers have been added to responses from the server but nothing changed.

Response info from Chrome Dev Tools

I started looking for information on the Internet and found out that this protocol is no longer supported by browsers - link.

Then I found out that there are still 103 Early Hints. And it’s also written about him in the Vulcain protocol.

Schema from vulcain website

But as I see from the dev console, the API Platform does not send such responses as 103 Early Hints.

So I have a couple of questions:

1. Is it possible to use 103 Early hints in Api Platform?
2. Should I use HTTP Push in Api Platform?
3. Is it valuable to use such these technologies and is it possible to implement it in Symfony + Api Platform?

Thank you!

Answer 1

HTTP/2 Push has been deprecated and removed in top browsers including Chrome.

103 Early Hints is a good choice for preloading critical resources early. You need to set up your 103 Early Hints in your application with ApiPlatform. Create an event listener for early hints and a service to add 103 early hints headers to the response. src/EventListener/EarlyHintsListener.php:

namespace App\EventListener;

use Symfony\Component\HttpKernel\Event\ResponseEvent;
use Symfony\Component\HttpFoundation\Response;

class EarlyHintsListener
{
    public function onKernelResponse(ResponseEvent $event)
    {
        $response = $event->getResponse();
        $request = $event->getRequest();

        // Only add Early Hints for specific routes or conditions
        if ($request->isMethod('GET') && $request->headers->get('Accept') === 'text/html') {
            $earlyHintsHeaders = [
                '</css/app.css>; rel=preload; as=style',
                '</js/app.js>; rel=preload; as=script',
                // Add more resources as needed
            ];

            foreach ($earlyHintsHeaders as $header) {
                $response->headers->set('Link', $header, false);
            }

            // Send 103 Early Hints response before the actual response
            $earlyHintsResponse = new Response('', 103);
            foreach ($earlyHintsHeaders as $header) {
                $earlyHintsResponse->headers->set('Link', $header, false);
            }

            $event->setResponse($earlyHintsResponse);
        }
    }
}

Make sure your server supports 103 early Hhints. Not all web servers or CDN providers might support this status code.

NEW ANSWER

namespace App\EventListener;

use Symfony\Component\HttpKernel\Event\RequestEvent;
use Symfony\Component\HttpKernel\Event\ResponseEvent;
use Symfony\Component\HttpKernel\KernelEvents;
use Symfony\Component\EventDispatcher\EventSubscriberInterface;
use Symfony\Component\HttpFoundation\Response;

class EarlyHintsListener implements EventSubscriberInterface
{
    public function onKernelRequest(RequestEvent $event)
    {
        // Determine resources to hint based on the request
        $hints = [
            '</path/to/resource.css>; rel=preload; as=style',
            '</path/to/resource.js>; rel=preload; as=script',
        ];

        // Create and send the 103 Early Hints response
        $earlyHintsResponse = new Response('', 103, ['Link' => implode(', ', $hints)]);
        $event->getRequest()->attributes->set('_early_hints', $earlyHintsResponse);
    }

    public function onKernelResponse(ResponseEvent $event)
    {
        $request = $event->getRequest();
        if ($earlyHintsResponse = $request->attributes->get('_early_hints')) {
            $event->getResponse()->headers->set('Link', $earlyHintsResponse->headers->get('Link'));
        }
    }

    public static function getSubscribedEvents()
    {
        return [
            KernelEvents::REQUEST => 'onKernelRequest',
            KernelEvents::RESPONSE => 'onKernelResponse',
        ];
    }
}