This chapter demonstrates about the HTTP/2 Server Push which allows communication initiated by the server and briefly look some of the benefits, following are the concepts covered in this chapter.

• Server Push

HTTP/2 enables the server to send the multiple responses for a single request. Server Push is mandatory because if one page requires dozens of additional assets such as JavaScript, CSS, images, and references are embedded in HTML page which server producing! Hence, instead of waiting for the client to discover the resources which are sended previously and Server push eliminates the the unnecessary latancy and entire round trips The image below demonstrates the Server Push is as shown below. If user have the inline resources which simulate the server push i.e inline resource are pushed as part of the parent document the only difference is pattern is pattern is more efficient in HTTP/2.

Inline document should not cached independently because inline document is the part of the parent document and which need to be duplicated across many different pages which is in efficient. Browser can cached the contrast, pushed resources individually and these are refused in many pages the code is as shown below. [c] spdy.createServer(options, function(req, res) { // push JavaScript asset (/main.js) to the client res.push('/main.js', {'content-type': 'application/javascript'}, function(err, stream) { stream.end('alert("hello from push stream!")'); }); // write main response body and terminate stream res.end('Hello World! <script src="/main.js"></script>'); }).listen(443); [/c] The above code implemented with the help of the SPDY server and which respond all the inbound requests by writing a "Hello World!" string and which can be followed by the script tag. Here pushing the main.js file to the client then the body of the file triggers the Java script alert. The Additional Files which can be pushed The inline resources are replaced with the server push. Client can also get the response by sending the additional files and which is a simple task and is explained by the below code as shown. [c] spdy.createServer(options, function(req, res) { //push JavaScript asset (/newasset.js) to the client res.push('/newasset.js', {'content-type': 'application/javascript'}, function(err, stream) { stream.end('alert("hello from (redirected) push stream!")'); }); // push 301 redirect: /asset.js -> /newasset.js res.push('/asset.js', {':status': 301, 'Location': '/newasset.js'}, function(err, stream) { stream.end('301 Redirect'); }); // write main response body and terminate stream res.end('<script src="/asset.js"></script>'); }).listen(443); [/c] Which is the same as above example but the only change is asset.js resource to be a 301 redirect to the newasset.js file then the browser caches both the redirect file and as well as asset files and executes without any extra round trips. If server pushing invalidation's or re validations to the client then user can mark the clients cache resources as stable or conversely and user can update its life time by pushing the 304 with a figure time stamp. Simply it states that server could actively manage the clients cache. If the server is aggressive then client can push the minimum number of streams or cancel some individual streams. server push is a not an easy task because finding the right strategy and balance the both side is not that much easy if user maintain those then that could yields high returns.

The resource which are pushed by the HTTP2.0 server are processed by the browser but do not bubble up to the application code if there is no JavaScript API to get the notification for the events. When the SSE channel is combined with the server push then user can get the solution is very simple. [c] spdy.createServer(options, function(req, res) { // set content type for SSE stream res.setHeader('Content-Type', 'text/event-stream'); messageId = 1; setInterval(function(){ // push a simple JSON message into client's cache var msg = JSON.stringify({'msg': messageId}); var resourcePath = '/resource/'+messageId; res.push(resourcePath, {}, function(err, stream) { stream.end(msg) }); // notify client that resource is available in cache res.write('data:'+resourcePath+'\n\n'); messageId+=1; }, 2000); }).listen(443); [/c] In the above example server can generates a message on periodic two second intervals and which can push into the clients cache and then sends SSE notification to the client. Now client should subscribe the those events in application code and execute its own logic to process the event. [c] <script> var source = new EventSource('/'); source.onmessage = function(e) { document.body.innerHTML += "SSE notification: " + e.data + ' '; // fetch resource via XHR... from cache! var xhr = new XMLHttpRequest(); xhr.open('GET', e.data); xhr.onload = function() { document.body.innerHTML += "Message: " + this.response + ' '; }; xhr.send(); }; </script> [/c] Now SSE stream pushed all the resources and all other HTTP/2 streams and which are efficiently multiplexed over a single TCP connection. By combining the both server push and SSE user can delivery the arbitrary resources to the client, and get the benefit of leveraging the browser cache and execute appropriate application logic.

• Server Push opens up entire world of new optimization opportunities.
• Combination of SSE and Server Push will do the great things.
• Inline resources are part of the parent document.