logo标签列表

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

javascripthtmlwwan
30

如果客户端通过计量的 WWAN（无线广域网）连接或其他方式连接，我希望将特定网站定制为低带宽版本。

连接类型对于网站来说很重要，以便知道它是否应提供丰富的体验还是带宽效率高的体验。我的桌面电脑使用计量连接，未来更多的台式机将通过计量的移动网络连接（包括 Windows 8 平板电脑），高效的 Web 应用程序应该尊重用户可能不需要按字节付费连接上的高细节资产。

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

注意：我不希望明确检查浏览器标头（这对可以通过多种方法连接到互联网的台式机浏览器并不是真正的解决方案）。

为什么会有人允许其浏览器公开这样的数据？ - Bergi
更新问题以说明公开此类数据的原因。 - Chris
“将来，更多的台式电脑将通过计量的蜂窝网络连接” - 也许在未来，蜂窝网络数据连接不会被计量。但是我的今天还是计量的。 - Paul D. Waite
4个回答
25
6
它确实标注为实验性质，并且不支持IE或Safari :/ - Gerard Sexton
3
不适用于最新版的Chrome和Firefox浏览器（2013年10月）。 - Raul
3
@Raul: 我认为它已经不适用于任何浏览器了。该规范的工作已被放弃( http://www.w3.org/TR/netinfo-api/ )，而且至少在我Mac上的Chrome 4中，'navigator.connection'不存在。 - Paul D. Waite
4
@PaulD.Waite，http://w3c.github.io/netinfo/是规范的最新版本，并且仍在积极维护。至少在Chrome浏览器中，这些API似乎仅限于[移动平台](https://codereview.chromium.org/424823002/)使用。您可以在状态面板上找到更多信息（不特定于Chrome）：https://www.chromestatus.com/features/6338383617982464 - Rob W
3
在Chrome 76上，这个方法对我有效。但它无法在iOS Safari上运行，如果你想要为客户节省手机流量，这就让它几乎毫无用处了。不过，如果客户使用iPhone的话，也许他们并不那么在意省钱。 - jdgregson
显示剩余5条评论
7
您无法获取客户端连接信息（即使用的技术，是否按字节付费或包月）与服务器的连接方式不是公开的。如果有助于您，您可以获取跟踪路线（涉及跟踪的所有问题），但该信息将无法通过JavaScript访问。
JS可以进行简单的带宽测试。通过XHR下载一个已知大小的文件，并测量所需时间。
连接的付款模式是绝对私人数据。它既不会发送到互联网上的服务器，也不会在加载的网站上提供。如果您需要此信息以为客户提供自定义应用程序，请直接询问用户。他会告诉你他是否想要。

然而，请稍等。最新版本的Chrome和Firefox可以设置（用户偏好）以提供实验性navigator.connection对象上的数据。

此外，对于开发Metro应用程序，Windows提供了{{link2：Windows.Networking.Connectivity API}}上的相关信息，请参见本教程。

1
如果这是真的，我没有理由不相信 - 鉴于您的声誉，那么这不是规范中的漏洞吗？Linux/Windows/OSX/Android/Windows Phone 7+/iOS都支持连接类型查询，有很好的理由；它可以节省金钱。如果这个答案是正确的，那么HTML5是唯一不支持连接类型查询的现代平台。 - Chris
4
HTML5不是一个平台，浏览器向服务器发送的信息与HTML无关。 - JJJ
+Bergi，针对您的第二段跟进：通过JavaScript进行带宽测试以确定连接类型并不能真正实现所需的目的。许多WWAN连接速度比宽带连接或较差的WiFi连接点更快。此外，测试带宽只会使用更多的配额。如果没有人能够提供解决方案（我想应该不行），明天我将标记此答案为已接受。 - Chris
好的，我已经向谷歌提出了更具体的问题，结果发现实际上有这样的API。 - Bergi
2020年：我猜navigator.connection不再那么私密了。 - undefined
4
也许你的方式不正确。看看 Gmail 的模式。他们有一个丰富的客户端，如果页面加载时间过长，用户可以选择退出它。标准客户端更轻，使用更“传统”的网页设计。
试图自动检测那些不应该被检测的内容会让你陷入非常深的兔子洞。
2
尊敬的，我理解您的观点，但我不同意。移动平台会检查连接类型并根据连接类型量身定制用户体验。随着WWAN dongles和带有3G连接的超级本的普及，应用程序如果像无限制一样消耗带宽就会失效。GMail模型也有点问题，它首先尝试消耗带宽，然后如果速度慢，它会提供更优化的内容。我的WWAN连接速度为21Mbits。不慢 - 只是如果我超过配额就很昂贵。 - Chris
好的，很酷。因此，为了适应您，可以允许用户选择较低的带宽并坚持使用，这样他们就不会产生额外的费用。另一种方法可能是根据浏览器类型（移动、平板电脑、桌面等）进行一些假设。通常他们说测试用户代理是禁忌，但在这种情况下，您并不寻求特定功能。 - Gerard Sexton
正如最初的问题所述，从浏览器类型标头中不再能够假定特定的连接类型。我的手机一半时间使用不计量的WiFi连接，但我的Windows 7机器始终通过3G连接。在不久的将来，Windows 8和Chrome的未来版本将允许用户查询哪些Web应用程序正在占用计量带宽。客户无需不断考虑他们的连接类型，这不是他们的工作。我认为，一个应用程序的工作是代表用户/客户高效地运行。 - Chris
1

虽然这是一个老问题，但为了满足自己的需求，我找到了这个链接——我还没有尝试过，所以你的结果可能会有所不同：https://github.com/ashanbh/detectClientSpeed。

通过测量下载资产所需的时间来得出带宽信息的基本概念是主观的，并不一定一致，但除了iOS/Android的本地平台API之外，这是一个不错的选择。一个更轻量级的替代方案可能是测量像google.com这样的网站的ping时间。

ashanbh的示例对我不起作用（http://ashanbh.github.io/detectClientSpeed/example1.html）。你有成功吗？ - Ian Steffy
嘿，伙计，你为什么认为ping会给你任何关于网络类型的指示呢？如果你暗示蜂窝数据的响应时间比WiFi低，那就完全不正确了。 - The Onin
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接