如何使用HTML5/JavaScript检查连接类型(WiFi/LAN/WWAN)？

Question

如果客户端通过WWAN(计量)连接或其他方式连接,我希望将特定网站定制为低带宽版本.

连接类型对于站点了解它是否应提供丰富的体验或带宽有效的体验非常重要.我的桌面在计量连接上运行,将来会有更多桌面通过计量蜂窝网络(包括Windows 8平板电脑)连接,高效的网络应用程序应该尊重用户可能不需要付费的高细节资产字节连接.

如何使用HTML5/JavaScript检查客户端是否通过WiFi/LAN/WWAN连接？

注意:我不希望明确检查浏览器标头(这对于可以通过多种方法连接到互联网的桌面浏览器来说并不是真正的解决方案).

Answer 1

见navigator.connection(前缀).此API公开有关客户端带宽的信息.

它确实说它是实验性的,在IE或Safari中不受支持:/ (4认同)
@PaperD.Waite http://w3c.github.io/netinfo/是该规范的有效版本,并且仍在积极维护.至少在Chrome中,API似乎仅限于[仅限移动平台](https://codereview.chromium.org/424823002/).您可以在状态仪表板上找到更多信息(不是特定于Chrome):https://www.chromestatus.com/features/6338383617982464 (3认同)
这对我在 Chrome 76 上有效。但事实上，它在 iOS Safari 上不起作用，如果您想为客户节省一些移动数据费用，那么它实际上毫无用处。但话又说回来，如果客户无论如何都使用 iPhone，他们可能不会对省钱感兴趣。 (3认同)
不适用于最新的chrome和firefox浏览器(oct '13) (2认同)
@Raul:我认为它不再适用于任何浏览器.关于规范的工作被放弃了(http://www.w3.org/TR/netinfo-api/),至少在Mac上的Chrome 4中,"navigator.connection"不存在. (2认同)

Answer 2

你不能.有关客户端如何连接的信息(即,它使用哪种技术,如果它是按字节付费或扁平化)到服务器的信息不公开.您可能能够获得跟踪路由(包含与跟踪相关的所有问题),如果这对您有帮助,但该信息将无法访问JavaScript.

可以用JS做什么是简单的带宽测试.通过XHR下载已知大小的文件,并测量所需的时间.

连接的付费模型是绝对私有数据.它既不会被发送到互联网上的服务器,也不会被加载到网站上.如果您需要此信息为客户提供自定义应用程序,请直接询问用户.他会告诉你他是否愿意.

然而,等等.可以设置最新的Chrome和Firefox(用户首选项)以在实验navigator.connection对象上提供该数据.

此外,对于开发Metro应用程序,Windows提供有关Windows.Networking.ConnectivityAPI的此类信息,请参阅本教程.