I want to determine use bo or not by the environment support http2 or not. But, I cannot find the method to check if a browser supports http2 or not in browser.

Thank you in advance.

I want to determine use bo or not by the environment support http2 or not. But, I cannot find the method to check if a browser supports http2 or not in browser.

Thank you in advance.

• javascript
• browser
• http2

• 1 Excuse an ignorant's ment, but why do you need to know it ? In my mind, this check should be done between the server and the browser at negotiation time. On the front end, you should not care at all. And the only way I can think of to know it on the front-end is to set up your server to return this info in case of success, or chrome only, chrome.loadTimes().connectionInfo. Also related if not dupe, but can't be marked as dupe because no answers : stackoverflow./questions/44842659/… – Kaiido Commented Aug 3, 2017 at 6:33
• @Kaiido If the browser does not support http2, I hope to load js assets in the format: <script src="??/a.js,/b.js"></script>, else this should be done in the format: <script src="/a.js" async defer></script><script src="/b.js" async defer></script>. – acrazing Commented Aug 3, 2017 at 7:21
• 2 This should be done on the server. When requested to serve the page, if there is no ALPN in the request, and the server knows it will have to talk HTTP/1.1, then it can serve an other version of the page/resource, instead of the one reserved for HTTP/2 enabled clients. – Kaiido Commented Aug 3, 2017 at 7:25
• The case is I need to use js load js/css dynamically, just like <script>const script = document.createElement('script'); script.src = '/a.js'; document.head.appendChild(script);</script>. – acrazing Commented Aug 3, 2017 at 7:27
• Yes, well configure your server so that when accessing '/a.js' through HTTP/1.1, it actually serves the content of '/b.js'. – Kaiido Commented Aug 3, 2017 at 7:33

4 Answers 4

Navigation Timing 2 API provides this information:

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

The above should return 'h2' on a page that got fetched using HTTP 2

A note on limited patibility of nextHopProtocol:

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).

According to HTTP/2 Frequently Asked Questions HTTP/2 and caniuse is supported at IE11, Edge14+, Firefox 52+, Chrome 49+, Safari 10.1+, Opera 45+, iOS Safari 9.3+, Android Browser 56, and Chrome for Android 59.

Can I use HTTP/2 now?

In browsers, HTTP/2 is supported by the most current releases of Edge, Safari, Firefox and Chrome. Other browsers based upon Blink will also support HTTP/2 (e.g., Opera and Yandex Browser). See the caniuse for more details.

The easiest solution could be to find the User Browser version and user agent. Sample javascript code to find User Agent :

function myFunction() {
var x = "User-agent header sent: " + navigator.userAgent;
document.getElementById("demo").innerHTML = x;

}

We can make a Map with browser name and version and after splitting user agent we can know if the Browser version support or not.

With the server side language like Java, it's easy to get Request agent which can tell HTTP version, but with Javascript without Ajax, it's bit more code needs to write.

To find a number of Browser and which version of browser follows HTTP2 please refer to :

https://www.smashingmagazine./wp-content/uploads/2016/01/01-caniuse-spdy-opt.png

I could not find another way.
I think there is only way to check the browser and operating system by looking at the following items.
https://en.wikipedia/wiki/HTTP/2
http://caniuse./#search=http2