如何通过javascript在浏览器环境中检测浏览器是否支持http2？答案

【问题标题】：How to detect the browser support http2 or not in browser environment by javascript?如何通过javascript在浏览器环境中检测浏览器是否支持http2？
【发布时间】：2018-01-10 13:05:45
【问题描述】：

我想通过环境是否支持http2来判断是否使用combo。但是，我找不到在浏览器中检查浏览器是否支持 http2 的方法。

提前谢谢你。

【问题讨论】：

原谅一个无知的评论，但为什么你需要知道呢？在我看来，这个检查应该在服务器和浏览器之间在协商时完成。在前端，您根本不应该关心。我能想到的在前端知道它的唯一方法是设置您的服务器以在成功的情况下返回此信息，或者仅在 chrome 上返回此信息，chrome.loadTimes().connectionInfo。如果不是欺骗也相关，但不能被标记为欺骗，因为没有答案：stackoverflow.com/questions/44842659/…
@Kaiido 如果浏览器不支持http2，我希望加载格式为：<script src="??/a.js,/b.js"></script>的js资产，否则应采用格式：<script src="/a.js" async defer></script><script src="/b.js" async defer></script>。
这应该在服务器上完成。当请求为页面提供服务时，如果请求中没有ALPN，并且服务器知道它必须与 HTTP/1.1 通信，那么它可以提供其他版本的页面/资源，而不是为启用 HTTP/2 的客户端。
情况是我需要使用js动态加载js/css，就像<script>const script = document.createElement('script'); script.src = '/a.js'; document.head.appendChild(script);</script>一样。
是的，配置好你的服务器，当通过HTTP/1.1访问'/a.js'时，它实际上服务于'/b.js'的内容。

标签： javascript browser http2

【解决方案1】：

Navigation Timing 2 API 提供以下信息：

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

以上内容应在使用 HTTP 2 获取的页面上返回“h2”

关于 nextHopProtocol 有限兼容性的说明：

Navigation Timing Level 2 API 目前处于工作草案状态，因此对 nextHopProtocol（与 Level 2 API 一起引入）的支持将受到限制（不确定支持它的确切浏览器，因为 caniuse 目前不包括 Navigation Timing Level 2 API）。

【讨论】：

【解决方案2】：

根据HTTP/2 Frequently Asked QuestionsHTTP/2和caniuse支持IE11、Edge14+、Firefox 52+、Chrome 49+、Safari 10.1+、Opera 45+、iOS Safari 9.3+、Android Browser 56和Chrome for安卓 59。

Can I use HTTP/2 now?

在浏览器中，最新版本的 Edge 支持 HTTP/2， Safari、火狐和 Chrome。其他基于 Blink 的浏览器也会支持 HTTP/2（例如，Opera 和 Yandex 浏览器）。见caniuse 了解更多详情。

【讨论】：

我想在浏览器中自己检测，因为有些浏览器使用不同的内核。
@kcats 见HTTP/2: the Future of the Internet, Under the covers of the HTTP/2 Performance Demo on http2.akamai.com/demo

【解决方案3】：

最简单的解决方案是查找用户浏览器版本和用户代理。用于查找用户代理的示例 javascript 代码：

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

}

我们可以制作一个带有浏览器名称和版本的地图，拆分用户代理后我们可以知道浏览器版本是否支持。

使用像Java这样的服务器端语言，很容易得到可以告诉HTTP版本的请求代理，但是使用没有Ajax的Javascript，需要编写更多的代码。

要查找多个浏览器以及哪个版本的浏览器遵循HTTP2请参考：

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

【讨论】：

【解决方案4】：

我找不到其他方法。
我认为只有通过查看以下项目来检查浏览器和操作系统。
https://en.wikipedia.org/wiki/HTTP/2
http://caniuse.com/#search=http2

【讨论】：