Express http 2 server push

Question

I've made a small server to try http2 on node, however I can't tell if the push mechanism is working or not. My style is loaded over http2 but that does not mean that push is working as intended...

const port = 3000
const spdy = require('spdy')
const express = require('express')
const path = require('path')
const fs = require('fs')
const app = express()

app.get('*', (req, res) => {
    res.set('Link', '</css/styles.css>; rel=preload; as=style');
  res.sendFile(__dirname + '/index.html')
})

const options = {
    key: fs.readFileSync(__dirname + '/keys/server.key'),
    cert:  fs.readFileSync(__dirname + '/keys/server.crt')
}

spdy.createServer(options, app).listen(3000);

In the devtools, the initiator says : "other".

Answer 1

You need to explicitly tell your express server which resources to push. Look here for a decent run through of it:

https://webapplog.com/http2-server-push-node-express/

An example route from that page:

app.get('/pushy', (req, res) => {
  var stream = res.push('/main.js', {
    status: 200, // optional
    method: 'GET', // optional
    request: {
      accept: '*/*'
    },
    response: {
      'content-type': 'application/javascript'
    }
  })
  stream.on('error', function() {
  })
  stream.end('alert("hello from push stream!");')
  res.end('<script src="/main.js"></script>')
})

Calling res.push() is the key here with the file you want to serve.

He also documents a way to write some middleware to handle pushing as well of assets:

https://webapplog.com/http2-server-push-express-middleware/

Once you have this implemented you can see the pushed items in Chrome devtools as in the answer from BazzaDP.