Background Synchronization API

如果设备离线，Background Synchronization API 允许 Web 应用程序将服务器同步工作交给 Service Worker 延迟处理。其用途可能包括在应用程序使用期间无法发送请求的情况下在后台发送请求。

例如，电子邮件客户端应用程序可以允许其用户在任意时间撰写和发送消息，即使设备没有网络连接也是如此。应用程序前端仅需注册一个同步请求，并且当网络条件再次允许时，Service Worker 会收到警报并处理同步。

SyncManager 接口允许通过 ServiceWorkerRegistration.sync 使用。使用唯一的标识符来设置同步事件的“名称”, 然后可以在 ServiceWorker 脚本中监听。一旦收到事件，你可以运行任何可用的功能，比如向服务器发送请求。

由于此 API 依赖于 Service Worker，因此此 API 提供的功能仅在安全上下文（HTTPS）中可用。

SyncManager 实验性

注册网络恢复后需要在 Service Worker 中运行的任务。这些任务称为后台同步请求（background sync requests）。

SyncEvent 实验性

代表同步事件，发送到 ServiceWorker 的全局作用域。提供了一种在设备具有网络连接后在 Service Worker 中运行任务的方式。

Service Worker API 的以下新增内容提供了用于设置后台同步的入口点。

ServiceWorkerRegistration.sync 只读

返回 SyncManager 的引用，用于注册在设备具有网络连接后运行的任务。

sync 事件

一旦网络可用，会立刻触发 sync 的处理器执行工作。

以下示例展示了如何使用该接口。

以下异步函数在浏览器的上下文注册后台同步任务：

async function syncMessagesLater() {
  const registration = await navigator.serviceWorker.ready;
  try {
    await registration.sync.register("sync-messages");
  } catch {
    console.log("Background Sync 无法被注册！");
  }
}

此代码检查是否注册了给定标签的后台同步任务。

navigator.serviceWorker.ready.then((registration) => {
  registration.sync.getTags().then((tags) => {
    if (tags.includes("sync-messages")) {
      console.log("已请求同步消息");
    }
  });
});

以下示例显示了如何在 Service Worker 中响应后台同步事件。

self.addEventListener("sync", (event) => {
  if (event.tag === "sync-messages") {
    event.waitUntil(sendOutboxMessages());
  }
});

• 介绍 Background Sync