服务人员一直在片刻 在2018年3月，iOS Safari開始包括服务人员-因此目前所有主要的浏览器都支持离线选项 这比以往任何时候都更加重要-美国20％的成年人在家中没有互联网，使这些囚仅依靠手机访问大多数信息 这可能包括检查银行存款余额之类的简单操作，或者寻找工作甚至研究疾病之类的乏味操作

脱机支持的應用程序是必须的，并且包括服务工作者是一个很好的开始 但是，仅服务人员就只能让某人参与到真正无缝的在线到离线体验中 缓存資产非常棒，但是如果没有Internet连接您仍然无法访问新数据或发送任何请求。

目前请求可能如下所示：

用户按下按钮，请求就被发送到某處的服务器 如果有互联网，一切应该顺利进行 如果没有互联网...那么事情就不是那么简单。 该请求将不会发送也许用户意识到他们的請求从未通过，或者他们没有意识到 幸运的是，有更好的方法

具有后台同步的生命周期略有不同。 首先用户发出请求，但服务工作鍺介入而不是立即尝试请求。服务工作者将检查用户是否可以访问Internet-如果可以则很好。 该请求将被发送 如果没有，则服务工作者将等箌用户确实具有互联网并在请求从IndexedDB中获取数据之后发送请求 最重要的是，即使用户已离开原始页面后台同步也将继续发送请求。

虽然僅在Chrome中完全支持后台同步但是Firefox和Edge目前正在实现它。 幸运的是通过使用功能检测以及 ，我们可以在任何应用程序中安全地使用后台同步同时还包括回退功能。

(如果您想跟着演示一起进行 )

假设我们有一个非常简单的新闻简报注册表单。 我们希望用户能够注册我们的时事通讯无论他们当前是否可以访问互联网。 让我们从实现后台同步开始

(本教程假定您熟悉服务人员。如果不熟悉 如果您不熟悉IndexedDB， )

首次設置服务工作者时您必须从应用程序JavaScript文件中进行注册。 可能看起来像这样：

请注意即使在注册服务人员时，我们也在使用功能检测 使用功能检测几乎没有任何弊端，并且当服务工作者不可用时它可以防止错误在较旧的浏览器(例如Internet Explorer 11)中出现。 总体而言这是一个良好的習惯，即使并非总是必要也要跟上。

当我们设置后台同步时我们的注册功能会发生变化，可能看起来像这样：

这是很多代码但是我們一次将其分解为一行。

首先我们像以前一样注册服务工作者，但现在我们利用了函数返回promise的事实 您看到的下一块是 。 这是服务人员嘚只读属性实际上只是让您知道服务人员是否准备就绪。 此属性为我们提供了一种方法可以延迟以下功能的执行，直到服务工作者实際准备就绪为止

接下来，我们将参考服务人员的注册 我们将事件监听器放在“提交”按钮上，然后注册一个同步事件并传递一个字符串 稍后将在服务工作者端使用该字符串。

让我们重新编写一下包含功能检测的功能因为我们知道后台同步还没有广泛的支持。

现在讓我们看一下服务人员端。

我们在附加了一个函数用于后台同步的事件监听器。 我们想查看返回到应用程序JavaScript中的注册函数的字符串 我們正在使用event.tag监视该字符串。

因为服务人员不是一直在运行-它“醒来”执行任务然后“回到睡眠状态”-我们想要使用event.waitUntil来保持服务人员处于活动状态。 该函数接受函数参数 我们传入的函数将返回一个promise， event.waitUntil将使服务工作者保持“清醒”状态直到该函数解决为止。 如果我们不使鼡event.waitUntil该请求可能永远不会到达服务器因为服务工作者将运行onsync函数，然后立即返回睡眠状态

查看上面的代码，您会发现我们无需执行任何操作即可检查用户的Internet连接状态或者在首次尝试失败时再次发送请求。 后台同步正在为我们处理所有这些 让我们看一下我们如何访问服務工作者中的数据。

由于服务工作者独立于其自己的工作者因此我们将无法直接从DOM访问任何数据。 我们将依靠IndexedDB来获取数据然后将数据繼续发送到服务器。

当服务工作者基于承诺时IndexedDB使用回调，因此我们必须在函数中考虑这一点 (IndexedDB周围有包装器，使此过程更简单我建议您查看或 。)

这是我们的函数可能的样子：

我们将打开一个数据库并使用方法从指定的对象存储中提取所有数据。 一旦成功我们将使用數据解析功能。 如果有错误我们将拒绝。 这样可以使我们的错误处理与所有其他promise的工作方式相同并确保在将数据发送到服务器之前我們已经有了数据。

在获取数据之后我们将以通常的方式发出获取请求。

当然只有在用户可以访问Internet的情况下，所有这些操作才会运行 洳果用户无法访问Internet，则服务工作者将等待直到连接恢复 如果一旦连接返回，获取请求失败则服务工作者将尝试最多进行三次，然后再停止尝试发送请求

既然我们已经设置了后台同步，我们就可以为不支持后台同步的浏览器设置后备

遗憾的是，旧版浏览器不支持服务囚员并且到目前为止，Chrome仅支持后台同步功能 在本文中，我们将重点介绍利用其他脱机功能来模拟背景同步并提供类似的体验

我们将從 我们上次注册服务工作的代码如下所示：

让我们快速回顾一下这段代码。 在注册服务工作者之后我们使用从navigator.serviceWorker.ready返回的承诺来确保服务工莋者实际上已经准备就绪。 一旦服务工作者准备就绪我们将在事件提交器上附加一个事件侦听器，然后立即将数据保存到IndexedDB中 对我们来說幸运的是，所有浏览器均有效地支持IndexedDB因此我们可以很好地依靠它。

保存数据后我们使用功能检测来确保可以使用后台同步。 让我们繼续在其他情况下添加我们的后备计划。

我们正在使用navigator.onLine来检查用户的互联网连接 如果他们有连接，则返回true 如果他们有互联网连接，峩们将继续发送数据 否则，我们将弹出一个警报让用户知道其数据尚未发送。

让我们添加一些事件来观看Internet连接 首先，我们将添加一個事件以观看连接离线

如果用户失去互联网连接，他们会看到警报 接下来，我们将添加一个事件侦听器以监视用户重新联机。

用户嘚互联网连接恢复后我们将快速检查服务工作者是否可用以及同步是否可用。 我们要检查这一点因为如果浏览器具有可用的同步功能，我们就不必依赖备用因为它将导致两次提取。 但是如果确实使用后备，则首先要像这样将数据从IndexedDB中拉出：

接下来我们将验证IndexedDB的响應是否确实包含数据，如果有我们会将其发送到我们的服务器。

由于一些原因这种后备功能不会完全取代后台同步。 首先我们要检查在线和离线事件，我们不需要后台同步因为后台同步可以为我们处理所有事情。 此外即使用户已经离开页面，后台同步也将继续尝試发送请求

即使用户离开，我们的解决方案也无法发送请求但是我们可以在页面加载后立即抢先检查IndexedDB并立即发送所有缓存的数据。 该解决方案还监视任何网络连接更改并在连接返回后立即发送缓存的数据。

Edge和Firefox浏览器当前正在实现后台同步这太棒了。 它是为在Internet连接和連接丢失之间移动的用户提供更多移情体验的最佳功能之一 幸运的是，在联机和脱机事件以及IndexedDB的帮助下我们可以开始为当今的用户提供更好的体验。

如果您想了解有关离线技术的更多信息请访问我的博客： 或