Background Synchronization API

概念与用法

后台同步 API 允许 Web 应用程序将服务器同步工作延迟到其 Service Worker，以便在设备离线时稍后处理。用途可能包括在应用程序使用期间无法发送的请求，在后台发送。

例如，电子邮件客户端应用程序可以允许用户随时撰写和发送消息，即使设备没有网络连接。应用程序前端只需注册一个同步请求，当网络再次可用时，Service Worker 就会收到通知并处理同步。

通过 ServiceWorkerRegistration.sync 可以访问 SyncManager 接口。设置唯一的标签标识符来“命名”同步事件，然后可以在 ServiceWorker 脚本中监听该事件。收到事件后，就可以运行任何可用功能，例如向服务器发送请求。

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

接口

SyncManager 实验性

在有网络连接的 Service Worker 中注册要在稍后时间运行的任务。这些任务被称为后台同步请求。

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 could not be registered!");
  }
}

通过标签验证后台同步

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

navigator.serviceWorker.ready.then((registration) => {
  registration.sync.getTags().then((tags) => {
    if (tags.includes("sync-messages")) {
      console.log("Messages sync already requested");
    }
  });
});

在 Service Worker 中监听后台同步

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

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

规范

浏览器兼容性

api.SyncManager

api.ServiceWorkerGlobalScope.sync_event

另见

• 介绍后台同步