Detect HTTP2/SPDY Support in Browser

Question

Detect HTTP2/SPDY Support in Browser

1.3k views Asked by anthumchris At 30 November 2014 at 07:40

Is it possible to detect a browser's support for HTTP2/SPDY client-side from within the browser?

I am attempting to show users whether their browser supports HTTP2/SPDY or would use the traditional, non-HTTP2/SPDY HTTPs protocol.

Original Q&A

There are 2 answers

Patrick On 30 November 2014 at 07:45

No, not really. At least in a way that is meaningful or actionable.

Frontend javascript would be running after the server has already served all of the assets. Everything you want to be doing will be done on the server side. A SPDY compliant browser should negotiate with a SPDY server automagically.

All you need to do is configure it to do so (nginx, and apache). You can also send the Alternate-Protocol header with your https responses. That would have the browser respond with SPDY requests in the future if possible (I can't find that in the updated SPDY spec, so that may be outdated information. Take with salt).

If you wanted to know if a site has been served with SPDY, in chrome there is chrome.loadTimes().wasFetchedViaSpdy (obviously only works in chrome). For firefox and safari you would have to inspect the headers (as far as I know there is not a similar api, though plugins exist to do this for you). SPDYCheck is another great resource to test if the server has been setup correctly.

**anthumchris** · Accepted Answer · 2014-11-30 10:24:21

Thanks, Patrick. I took your advice and leveraged nginx's $http2 variable and used PHP to return a dynamic JS variable for the browser's detection. (Passing a cookie or adding a response header for AJAX detection are also options if other readers prefer).

NGINX config additions

server {
    ...

    if ($http2) { 
        rewrite ^/detect-http2.js /detect-http2.js.php?http2=$http2 last;
    }
    # fallback to non-HTTP2 rewrite
    rewrite ^/detect-http2.js /detect-http2.js.php last;

    # add response header if needed in the future
    add_header x-http2 $http2;
}

detect-http2.js.php

<?
    header('content-type: application/javascript');
    if (isset($_REQUEST['http2'])) {
        echo "var h2Version='". $_REQUEST['http2'] . "';\n";
    }
?>

detect-http2.html

<html>
    <body>
        <script src="https://DOMAIN_NAME/detect-http2.js"></script>
        <script>
            document.write('HTTP2-Supported Browser: '+ (typeof h2Version !== 'undefined'));
        </script>
    </body>
</html>

TechQA.

Detect HTTP2/SPDY Support in Browser

There are 2 answers

Related Questions in NGINX

Related Questions in HTTP2

Related Questions in SPDY

Popular Questions

Popular Tags

Trending Questions