Web 应用中离线数据入门 Pt. 1

现代 Web 应用越来越期望能够以某种方式离线运行。事实上，离线可用性是 PWA 的关键要素。如果您的应用依赖于某种形式的数据（大多数应用都如此），那么离线可用性可能会变得很复杂。

在本系列文章中，我想介绍一些离线处理数据的方案。其中关键部分是使用localStorage和IndexedDb之类的工具。然而，决定使用在线还是离线数据的一个重要步骤是了解您的应用程序当前是处于在线状态还是离线状态。在本系列的第一篇文章中，我将介绍一些可以帮助您实现这一点的非常简单的 Web API。

在线导航

Navigator.onLine的目标非常简单——它只是将浏览器的在线状态返回为true或false。它基本上和宣传的一样好用。

此功能适用于除 Opera 之外的移动设备和桌面浏览器。

有两种方法可以利用这一点。第一种方法是简单地使用条件语句，例如：

if (navigator.onLine) {
    \\ call my external API for data
}

第二种方式是通过添加事件监听器来响应用户在线状态的变化。

网络信息API

虽然Navigator.onLine运行良好，但它除了显示用户连接状态是在线还是离线之外，不会提供任何有关用户连接的详细信息。例如，如果用户的连接速度非常慢怎么办？在这种情况下，您可能希望首先依赖某种本地数据，这些数据会在远程数据可用时被刷新，或者，根据远程数据的性质，甚至根本不需要远程调用。

理论上，这就是网络信息 API提供的——不仅仅是连接状态，还包括有关连接的关键细节。那么问题是什么呢？它目前仅适用于 Chrome（桌面版和 Android 版）和 Opera。

为了演示其工作原理，我创建了一个简单的 CodePen。如果您使用的是 Chrome，请打开 Chrome 开发者工具，找到“网络”选项卡，然后将限制下拉菜单（应该显示“无限制”）更改为其他预设，例如“快速 3G”、“慢速 3G”，或将其设置为“离线”。

值得一提的是，在“离线”状态下，我的测试中显示的连接类型仍然是“4G”，但rtt和downlink都为零。你可能会问，这些值到底是什么意思？

• effectiveType- 连接类型是“slow-2g”、“2g”、“3g”或“4g”四个值之一。
• rtt- 这是“往返时间”的缩写。它指的是“数据包从发送端点到接收端点再返回所需的时间”。(来源)
• downlink- 该值是每秒兆比特的带宽估计值。
• saveData- 此值表示用户是否启用了某种减少数据使用量的选项。

如果网络信息 API 得到更广泛的采用，它可能会有助于确定何时依赖远程数据而不是本地数据。

后续步骤

在本文中，我们了解了一些工具，用于确定用户的网络连接是否允许我们可靠地从远程数据源（而非本地数据源）获取数据。在本系列的下一篇文章中，我将开始探讨使用 localStorage 在本地存储数据的一些方法，并在后续文章中介绍 IndexedDb 及其相关工具。