基于网络质量的自适应投放

Milica Mihajlija

根据网络条件，加载网站的过程可能截然不同。在网络速度快的情况下，一切通常都很顺畅，但当您在外出时，使用的是流量有限且连接不稳定的移动网络，或者在咖啡店使用速度缓慢的 Wi-Fi 连接笔记本电脑时，情况就不同了。

解决此问题的一种方法是，根据用户的连接质量来调整要向用户提供哪些资源。现在，借助 Network Information API，Web 应用可以访问有关用户网络的信息。

浏览器支持

• 61
• 79
• x
• x

来源

用法

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

• 根据用户的网络，在提供高清内容和标清内容之间切换。
• 决定是否预加载资源。
• 在用户网速较慢时推迟上传和下载。
• 如果网络质量不佳，无法加载应用和使用功能，请启用离线模式。
• 警告用户，通过移动网络执行某些操作（例如观看视频）可能需要付费。
• 您可以在分析中使用它，以收集有关用户的网络质量的数据。

许多应用已经在执行类似的操作。例如，YouTube、Netflix 和大多数其他视频（或视频通话）服务会在在线播放期间自动调整分辨率。加载 Gmail 时，它会为用户提供“加载基本 HTML（适用于慢速连接）”链接。

工作原理

navigator.connection 对象包含有关客户端连接的信息。下表介绍了其属性。

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

当您在浏览器的控制台中运行此命令时，将如下所示：

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

注意：您可以在服务工件中访问 Network Information API，以适应用户离线的情况。

借助 onchange 事件监听器，您可以动态适应网络质量的变化。如果您因网络状况不佳而推迟了上传或下载，则可以在事件监听器检测到网络状况较好时，让其重启传输。您还可以使用它在网络质量发生变化时通知用户。例如，如果他们的 Wi-Fi 信号丢失并掉入移动网络，可以防止意外传输数据（和产生 💸? 费用）。

使用 onchange 事件监听器的方式与使用任何其他事件监听器的方式一样：

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

注意：从 62 版开始，基于 Chromium 的浏览器支持 Network Information API。

总结

Network Information API 的潜在优势很大，尤其是对于网络速度缓慢的用户和需要大量带宽的应用。最重要的是，它可以用作渐进式增强技术。