后台同步 API

安全上下文:此功能仅在安全上下文(HTTPS)中可用,在某些或所有支持的浏览器中可用。

注意:此功能在Web Workers中可用。

后台同步 API使 Web 应用程序能够延迟任务,以便在用户拥有稳定的网络连接后,可以在服务工作线程中运行这些任务。

概念和用法

后台同步 API 允许 Web 应用程序将其服务器同步工作延迟到其服务工作线程,以便在稍后处理,如果设备处于脱机状态。用途可能包括在后台发送请求,如果在应用程序使用时无法发送请求。

例如,电子邮件客户端应用程序可以让其用户随时撰写和发送邮件,即使设备没有网络连接。应用程序前端只需注册一个同步请求,当网络再次可用时,服务工作线程就会收到警报并处理同步。

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

由于此 API 依赖于服务工作线程,因此此 API 提供的功能仅在安全上下文中可用。

接口

SyncManager 实验性

注册在稍后时间使用网络连接在服务工作线程中运行的任务。这些任务称为后台同步请求

SyncEvent 实验性

表示同步事件,发送到ServiceWorker全局范围。它提供了一种在设备拥有网络连接后在服务工作线程中运行任务的方法。

其他接口的扩展

以下对服务工作线程 API的添加提供了设置后台同步的入口点。

ServiceWorkerRegistration.sync 只读

返回对SyncManager接口的引用,用于注册在设备拥有网络连接后运行的任务。

sync 事件

每当发生sync事件时触发的事件处理程序。这会在网络变得可用后立即发生。

示例

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

请求后台同步

以下异步函数从浏览上下文注册后台同步

js
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!");
  }
}

按标签验证后台同步

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

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

在服务工作线程中侦听后台同步

以下示例显示了如何在服务工作线程中响应后台同步事件。

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

规范

规范
Web 后台同步

浏览器兼容性

api.SyncManager

BCD 表格仅在浏览器中加载

api.ServiceWorkerGlobalScope.sync_event

BCD 表格仅在浏览器中加载

另请参阅