Web 定期后台同步 API

安全上下文：此功能仅在安全上下文（HTTPS）中可用，在某些或所有支持的浏览器中。

实验性：这是一个实验性技术
在生产环境中使用之前，请仔细查看浏览器兼容性表。

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

Web 定期后台同步 API提供了一种方法来注册在具有网络连接的服务工作线程中以定期间隔运行的任务。这些任务称为定期后台同步请求。

概念和用法

定期后台同步 API 允许 Web 应用程序在定期时间间隔提醒其服务工作线程进行任何更新。用途可能包括在设备连接到 Wi-Fi 时获取最新内容，或允许应用程序进行后台更新。

当调用 API 时会设置最短时间间隔；但是，用户代理也可能考虑影响服务工作线程何时接收事件的其他因素。例如，以前的网站参与度或连接到已知网络。

可以通过ServiceWorkerRegistration.periodicSync使用PeriodicSyncManager接口。设置一个唯一的标签标识符来“命名”同步事件，然后可以在ServiceWorker脚本中侦听该事件。收到事件后，您就可以运行任何可用的功能，例如更新缓存或获取新资源。

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

接口

PeriodicSyncManager

注册在具有网络连接的服务工作线程中以定期间隔运行的任务。这些任务称为定期后台同步请求。

PeriodicSyncEvent

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

其他接口的扩展

定期后台同步规范中指定了对服务工作线程 API的以下添加，以提供使用定期后台同步的入口点。

ServiceWorkerRegistration.periodicSync 只读

返回对PeriodicSyncManager接口的引用，用于注册在特定间隔运行的任务。

periodicsync 事件

在注册PeriodicSyncManager时指定的定期间隔发生。

示例

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

请求定期后台同步

以下异步函数从浏览上下文注册一个至少间隔一天的定期后台同步

js
async function registerPeriodicNewsCheck() {
  const registration = await navigator.serviceWorker.ready;
  try {
    await registration.periodicSync.register("get-latest-news", {
      minInterval: 24 * 60 * 60 * 1000,
    });
  } catch {
    console.log("Periodic Sync could not be registered!");
  }
}

通过标签验证后台定期同步

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

js
navigator.serviceWorker.ready.then((registration) => {
  registration.periodicSync.getTags().then((tags) => {
    if (tags.includes("get-latest-news")) skipDownloadingLatestNewsOnPageLoad();
  });
});

删除定期后台同步任务

以下代码删除定期后台同步任务以停止在后台同步文章。

js
navigator.serviceWorker.ready.then((registration) => {
  registration.periodicSync.unregister("get-latest-news");
});

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

以下示例演示了如何在服务工作线程中响应定期同步事件。

js
self.addEventListener("periodicsync", (event) => {
  if (event.tag === "get-latest-news") {
    event.waitUntil(fetchAndCacheLatestNews());
  }
});

规范

规范
Web 定期后台同步

浏览器兼容性

api.PeriodicSyncManager

BCD 表仅在启用 JavaScript 的浏览器中加载。

api.ServiceWorkerGlobalScope.periodicsync_event

BCD 表仅在启用 JavaScript 的浏览器中加载。

另请参阅