基于网络质量的自适应服务

Milica Mihajlija

加载网站的体验会因网络状况而异。当您使用快速网络时，一切通常都很流畅，但是当您使用有限的数据套餐和不稳定的连接在旅途中，或者使用连接缓慢的咖啡店 Wi-Fi 的笔记本电脑时，情况就大不相同了。

解决此问题的一种方法是根据用户连接的质量调整您为用户提供的资源。现在可以通过 网络信息 API 实现这一点，该 API 使 Web 应用程序能够访问有关用户网络的信息。

浏览器支持

  • Chrome: 61.
  • Edge: 79.
  • Firefox：不支持。
  • Safari：不支持。

来源

用法

您可以通过多种方式使用此网络信息来改善用户体验

  • 根据用户的网络在高清晰度和低清晰度内容之间切换服务。
  • 决定是否预加载资源。
  • 当用户连接速度较慢时，推迟上传和下载。
  • 如果网络质量不足以加载应用和使用功能，则启用离线模式。
  • 警告用户，通过蜂窝网络执行某些操作（例如，观看视频）可能会花费他们的资金。
  • 在您的分析中使用它来收集有关用户网络质量的数据。

许多应用程序已经在做类似的事情。例如，YouTube、Netflix 和大多数其他视频（或视频通话）服务会在流式传输期间自动调整分辨率。当 Gmail 加载时，它会为用户提供一个链接，以“加载基本 HTML（用于慢速连接）”。

A link to load basic HTML version of Gmail when users are on slow connections

工作原理

navigator.connection 对象包含有关客户端连接的信息。其属性在下表中进行了解释。

属性 说明
downlink 带宽估计值，单位为兆比特/秒。
effectiveType 连接的有效类型，可能的值为 'slow-2g'、'2g'、'3g' 或 '4g'（涵盖 4g 及更高版本）。根据往返时间和下行速度的组合确定。例如，快速下行链路与高延迟相结合将由于延迟而具有较低的 effectiveType。
onchange 连接信息更改时触发的事件处理程序。
rtt 连接的估计往返延迟，单位为毫秒。
saveData 一个布尔值，用于定义用户是否已请求减少数据使用模式。

以下是在浏览器控制台中运行时的外观

Chrome DevTools console displaying the values of navigator.connection object's properties

effectiveType 值也可通过 客户端提示 获得，并允许您将浏览器的连接类型传达给服务器。

onchange 事件侦听器使您能够动态适应网络质量的变化。如果您由于网络条件不佳而推迟了上传或下载，则可以依靠事件侦听器在检测到更好的网络条件时重新启动传输。您还可以使用它在网络质量发生变化时通知用户。例如，如果他们丢失了 Wi-Fi 信号并切换到蜂窝网络，这可以防止意外的数据传输（和费用 💸）。

像使用任何其他事件侦听器一样使用 onchange 事件侦听器

navigator.connection.addEventListener('change', doSomethingOnChange);

结论

网络信息 API 的潜在好处是巨大的，尤其对于网络速度较慢的用户和需要大量带宽的应用程序而言。最重要的是，它可以作为一种渐进增强技术使用。