HTTP2 Server Push in Apache2

Server Push is one of the most significant features in the HTTP/2 protocol. In this post, We will see a very simple demo of the Server Push feature using HTTP/2. Below is the list of tools and tech used in the demo.

Ubuntu 16.04
Chrome 60.0.3112.101
Apache2

Some browsers require TLS 1.2 to support HTTP/2. So We need to configure https on Apache server. Try to open the URL https://localhost in your browser.
If the above URL not responding, It means you need to configure HTTPS on your Apache server. Please refer to the digital ocean page.
https://www.digitalocean.com/community/tutorials/how-to-create-a-ssl-certificate-on-apache-for-ubuntu-14-04
I hope the URL https://localhost is working now and We can proceed further. We will do it into 2 parts.
Part-I: We will just enable the HTTP/2 protocol
Part-II: We will configure server push feature

Part-I: Enable HTTP/2

First, check the below points.

Make sure you have the http2 module in your apache. Navigate to the directory /etc/apache2/mods-available and look for the file http2.load. If there is no such file, Execute the below commands to upgrade your apache.
```
  add-apt-repository ppa:ondrej/apache2
  apt-get update
  apt-get dist-upgrade
```
Now you must have got the http2 module, You need to enable it by the following command.
```
    a2enmod http2
   
```

After enabling the http2 module We need to add h2 protocol. Create an http2.conf file in the /etc/apache2/conf-enabled directory. Now put the below line in the created file.

      Protocols h2 h2c http/1.1

We have done all the configuration for Part-I. Just restart the apache.

   service apache2 restart

If your apache server restarted successfully. It means all the configurations are correct and We can verify the changes. By Default the content directory is /var/www/html/ . Add the following files in the content directory.

h2demo.html

     <!DOCTYPE html>
     <html>

     <head >
             <title>HTTP/2.0 DEMO</title>
       <link href='h2demo.css' rel='stylesheet' type='text/css'>
     </head>

     <body>
       <h1>It's Working</h1>
     </body>
     </html>

h2demo.css

     h1{
       color:red;
     }

Now open the URL https://localhost/h2demo.html in chrome with developer tool. In the Developer tool, you can see the Protocol is h2 instead of HTTP/1.1 . If there is no Protocol label in your browser, You can add it by right click on the strip of labels with Name and Status.

Part-II: Server Push

We have done a lot in part-1 and enabled the h2 protocol. To configure the server push We just need to set the Link Header. Append the below lines in http2.conf file.

  <Location /h2demo.html>
          Header add Link "</h2demo.css>;rel=preload;as=style"
  </Location>

What we are trying to do is push the resource h2demo.css instead of sending over the client's request. Now restart the Apache and open the URL https://localhost/h2demo.html In the Developer tool look for the label Initiator and You will see the Push or Push/Other which means the server pushed the resource without getting the request from the client. There is one more way to verify, You can check Waterfall column, There will be no request only response.

You need to be careful with the browser's cache If the resource served from browser's cache you may not be able to see the Push as Initiator.

FunZONE-4-Geeks

Search This Blog