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

Question

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

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

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

注意：我不希望明确检查浏览器标题（对于可以通过多种方法连接到互联网的桌面浏览器来说，这不是真正的解决方案）。

Answer 1

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

Answer 2

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

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

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

---

然而，等等。可以设置最新的Chrome和Firefox（用户首选项），以便在experimental navigator.connection object上提供该数据。

此外，对于开发Metro应用程序，Windows会在Windows.Networking.Connectivity API上提供此类信息，请参阅this tutorial。

Answer 3

也许你正在以错误的方式接近它。看看Gmail模型。他们有一个富客户端，如果页面需要很长时间才能加载，用户可以选择退出。标准客户端更轻，使用更“传统”的网页设计 试图自动检测不合适的东西会让你陷入非常深的兔子洞。

Answer 4

老问题，但在寻找我自己的目的时，我发现了 - 我还没有尝试过，所以YMMV：https://github.com/ashanbh/detectClientSpeed。

测量下载资产以获取带宽信息的时间的基本概念是主观的，并不一定是一致的，但缺少iOS / Android的原生平台API，这不是一个糟糕的选择。更轻松的替代方案可能是测量google.com之类的ping时间。