Web Periodic Background Synchronization API

安全上下文: 此功能仅在安全上下文(HTTPS)中可用,且支持此功能的浏览器数量有限。

实验性: 这是一项实验性技术
在生产中使用此技术之前,请仔细检查浏览器兼容性表格

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

Web Periodic Background Synchronization API 提供了一种方法,可以在网络连接时,在 service worker 中注册以定期间隔运行的任务。这些任务被称为周期性后台同步请求。

概念与用法

Periodic Background Sync API 允许 Web 应用程序通知其 service worker,在固定的时间间隔内进行任何更新。用例包括在设备连接到 Wi-Fi 时获取最新内容,或允许应用程序进行后台更新。

最小时间间隔在调用 API 时设置;然而,用户代理也可能考虑其他影响 service worker 接收事件时间的因素。例如,之前的网站互动情况,或连接到已知网络。

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

由于此 API 依赖于 service worker,因此此 API 提供功能仅在安全上下文中可用。

接口

PeriodicSyncManager Experimental

在网络连接时,在 service worker 中注册以定期间隔运行的任务。这些任务被称为周期性后台同步请求。

PeriodicSyncEvent Experimental

表示一个同步事件,该事件发送到 ServiceWorker全局作用域。它提供了一种在网络连接时在 service worker 中运行任务的方法。

其他接口的扩展

Periodic Background Sync 规范中指定了对 Service Worker API 的以下补充,为使用 Periodic Background Sync 提供了入口点。

ServiceWorkerRegistration.periodicSync Read only Experimental

返回一个指向 PeriodicSyncManager 接口的引用,用于注册将在特定间隔运行的任务。

periodicsync 事件 Experimental

在注册 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");
});

在 Service Worker 中监听周期性后台同步

以下示例展示了如何在 service worker 中响应周期性同步事件。

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

规范

规范
Web 周期性后台同步

浏览器兼容性

api.PeriodicSyncManager

api.ServiceWorkerGlobalScope.periodicsync_event

另见