How to detect if the visitor is using HTTP/2 or SPDY?

Theoretically, once nextHopProtocol lands in ResourceTiming and NavigationTiming, you should be able to detect h2 support for the root page and other resources.

As of 2016-06-06, nextHopProtocol is only available in Firefox's ResourceTiming implementation. It is not available in their NavigationTiming, or in either NavigationTiming nor ResourceTiming for Chrome, FF, and Safari.

So for Firefox visitors today, you could see if nextHopProtocol is h2 for other resources on the same domain as the HTML page, and infer that the HTML page is h2 as well.

I didn't find a straightforward test. i think a workaround would be to write your own test :)You can get a list of browsers that support HTTP/2 (can be found on caniuse.com) then loop through the list of supporting browsers, if the current browser serving you is in the list then you are good to go.

It is July, 2018 and I see both Firefox and Chrome exposing this through Navigation Timing 2 API:

performance.getEntriesByType('navigation')[0].nextHopProtocol

That being said, Navigation Timing Level 2 API is currently in working draft status so support for the nextHopProtocol (which is being introduced with Level 2 API) will be limited (unsure of exact browsers supporting it since caniuse currently doesn't include Navigation Timing Level 2 API).