How to implement HTTP/2 stream connection in browser?

Question

Nowadays HTTP/2 is rising as of its performance.

The recent version of Node.js supports HTTP/2 very well.

https://nodejs.org/api/http2.html

But I have no idea how to implement HTTP/2 client in the browser environment.

https://nodejs.org/api/http2.html#http2_client_side_example

The above link shows how to use it in Node.js client.

How can I implement the same client in the browser?

Answer 1

You can’t currently do this. In general HTTP/2 should be transparent in its use to web pages and web applications and so there is no need to implement low level HTTP/2 streams and connection details. That’s part of the beauty of the way it was implemented - the browser takes care of all this and the web page and web application has no need to know whether HTTP/1.1 or HTTP/2 was used.

A possible exception to that is, is HTTP/2 push and there was a proposal to expose HTTP/2 Push programmatically as part of the Web Hypertext Application Technology Working Group (WHATWG): https://github.com/whatwg/fetch/issues/51. Though activity on that seems to have dropped off completely. As there are a few complications in implementing a Push notification api. All in all HTTP/2 push is complicated, especially because of different browser implementations and bugs, so trying to expose push messages to a web application is going to be complicated. There are also many who feel HTTP/2 push has limited use and there are better technologies for most use cases, such as resource hints (for requesting HTTP resources) or web sockets (for two way comms). Chrome are even experimenting with switching it off completely.

Other than push, prioritization might be another use case for exposing low level HTTP/2 details to web applications and perhaps priority hints will provide a mapping for that eventually, without tying it to HTTP/2 (so it can be used under HTTP/1.1, QUIC or whatever comes in the future).

So IMHO, I don’t see a pressing need to allow creating or managing of an HTTP/2 connection from a web application in the same way that there is not a simple way (AFAIK) of creating a TCP or UDP connection from JavaScript. While that remains the case I don’t think we’ll see much effort to create such a implementation. Even the HTTP/2 client you link to is very basic and just makes a HTTP request - which the browser already allows you to do (though I appreciate that node exposes more details should you want to go lower level than this while the browser does not). For the most part, HTTP/2 stream handling and other low-level details of the protocol probably are best handled transparently by the browser itself - as they are now.

Answer 2

In the Client side:

You don't need to do anything in the browser, just use one that already supports the HTTP 2.0 protocol https://caniuse.com/#search=http2

In the Server side:

Depends on the server you are using you need to activate some modules and configurate some files, here you can see some links to server configurations: https://github.com/http2/http2-spec/wiki/Implementations

Regarding the Server Push functionality:

The same, It depends on the server but is important to note that you can configure a: Manual Push or an Automatic Push (Auto Push)

Examples:

Manual Push

server {    
    # whenever a client requests demo.html, also push
    # /style.css, /image1.jpg and /image2.jpg
    location = /demo.html {
        http2_push /style.css;
        http2_push /image1.jpg;
        http2_push /image2.jpg;
    }
}

Auto Push

server { 
    # Intercept Link header and initiate requested Pushes
    location = /myapp {
        proxy_pass http://upstream;
        http2_push_preload on;
    }
}

//httpd.conf or .htaccess (cuando se cargue un html)
<FilesMatch "\.html$">
    Header set Link "</css/styles.css>; rel=preload; as=style"
<FilesMatch>