此页面由 Cloud Translation API 翻译。

通过 Periodic Background Sync API 获得更丰富的离线体验

在后台同步 Web 应用的数据，以获得更像应用的体验

Jeff Posnick

Joe Medley

您是否曾遇到以下任一情况？

乘坐火车或地铁时网络连接不稳定或无法连接
由于观看了太多视频，运营商对您施加了流量限制
居住在带宽难以满足需求的国家/地区

如果您有过这样的经历，那么一定会对在 Web 上完成某些事情感到沮丧，并会想知道为什么在这些情况下专用平台应用的表现往往更好。特定于平台的应用可以提前提取新鲜内容，例如新闻报道或天气信息。即使在地下铁没有网络，您也仍然可以阅读新闻。

借助定期后台同步，Web 应用可以在后台定期同步数据，从而使 Web 应用的行为更接近平台专用应用的行为。

试试看

您可以尝试使用实时演示版应用进行定期后台同步。在使用该应用之前，请确保：

您使用的是 Chrome 80 或更高版本。
您需要先安装 Web 应用，然后才能启用定期后台同步。

概念和用法

借助定期后台同步，您可以在启动渐进式 Web 应用或由服务工头支持的网页时显示新内容。它会在用户未使用应用或网页时在后台下载数据。这样可以防止应用的内容在启动后在用户查看时刷新。更重要的是，它可以防止应用在刷新之前显示内容旋转图标。

如果不进行定期后台同步，Web 应用必须使用其他方法下载数据。一个常见示例是使用推送通知唤醒服务 worker。系统会显示“有新数据可用”等消息来中断用户。更新数据本质上是一种副作用。您仍然可以选择使用推送通知来接收真正重要的更新，例如重大突发新闻。

定期后台同步可能会与后台同步混淆。虽然它们的名称相似，但用例不同。除此之外，后台同步最常用于在之前的请求失败时将数据重新发送到服务器。

提升用户互动度

如果执行不当，定期后台同步可能会浪费用户资源。在发布之前，Chrome 会先对其进行试用，以确保其正确无误。本部分介绍了 Chrome 为使此功能尽可能实用而采取的一些设计决策。

Chrome 做出的第一个设计决策是，只有在用户将 Web 应用安装到其设备上并将其作为单独的应用启动后，该应用才能使用定期后台同步。在 Chrome 的常规标签页情境中，无法使用定期后台同步。

此外，由于 Chrome 不希望未使用的或很少使用的 Web 应用无端消耗电池电量或流量，因此 Chrome 设计了定期后台同步功能，以便开发者必须通过为用户提供价值来赢得同步机会。具体而言，Chrome 使用网站互动度得分 (about://site-engagement/) 来确定是否可以为给定 Web 应用进行定期后台同步以及同步的频率。换句话说，除非互动度得分大于零，否则系统根本不会触发 periodicsync 事件，并且其值会影响 periodicsync 事件的触发频率。这样可以确保后台同步的应用仅限您正在使用的应用。

定期后台同步与热门平台上的现有 API 和做法有一些相似之处。例如，借助一次性后台同步和推送通知，在用户关闭网页后，Web 应用的逻辑（通过其服务工件）可以再保留一段时间。在大多数平台上，用户安装的应用通常会定期在后台访问网络，以便在执行重要更新、预加载内容和同步数据等操作时提供更好的用户体验。同样，定期后台同步还会延长 Web 应用逻辑的生命周期，使其按固定时间运行（每次可能几分钟）。

如果浏览器允许这种情况频繁发生且不受限制，可能会导致一些隐私问题。Chrome 针对定期后台同步解决了此风险，具体如下：

后台同步活动仅在设备之前连接过的网络上发生。Chrome 建议仅连接到由可信方运营的网络。
与所有互联网通信一样，定期进行的后台同步会显示客户端的 IP 地址、其所连接的服务器以及服务器的名称。为了将此类情况的暴露程度大致降低到应用仅在前台运行时同步的情况，浏览器会限制应用的后台同步频率，使其与用户使用该应用的频率保持一致。如果用户停止频繁与应用互动，定期后台同步将停止触发。与平台专用应用的现状相比，这是一个明显的改进。

何时可以使用？

使用规则因浏览器而异。总结上述内容，Chrome 对定期后台同步提出了以下要求：

特定的用户互动度得分。
存在之前使用的网络。

同步时间由系统控制，开发者无法控制。同步频率将与应用的使用频率保持一致。（请注意，平台专用应用目前不会执行此操作。）它还会考虑设备的电源和连接状态。

何时应使用此功能？

当您的服务工件唤醒以处理 periodicsync 事件时，您有机会请求数据，但没有义务这样做。在处理该事件时，您应考虑网络状况和可用存储空间，并相应地下载不同数量的数据。您可以使用以下资源：

权限

安装服务工件后，请使用 Permissions API 查询 periodic-background-sync。您可以通过窗口或服务工件上下文执行此操作。

const status = await navigator.permissions.query({
  name: 'periodic-background-sync',
});
if (status.state === 'granted') {
  // Periodic background sync can be used.
} else {
  // Periodic background sync cannot be used.
}

注册定期同步

如前所述，定期后台同步需要使用服务工件。使用 ServiceWorkerRegistration.periodicSync 检索 PeriodicSyncManager，然后对其调用 register()。注册时需要提供标记和最小同步间隔 (minInterval)。标记用于标识已注册的同步，以便注册多个同步。在以下示例中，代码名称为 'content-sync'，minInterval 为 1 天。

const registration = await navigator.serviceWorker.ready;
if ('periodicSync' in registration) {
  try {
    await registration.periodicSync.register('content-sync', {
      // An interval of one day.
      minInterval: 24 * 60 * 60 * 1000,
    });
  } catch (error) {
    // Periodic background sync cannot be used.
  }
}

验证注册

调用 periodicSync.getTags() 可检索注册标记数组。以下示例使用代码名称来确认缓存更新处于活动状态，以免再次更新。

const registration = await navigator.serviceWorker.ready;
if ('periodicSync' in registration) {
  const tags = await registration.periodicSync.getTags();
  // Only update content if sync isn't set up.
  if (!tags.includes('content-sync')) {
    updateContentOnPageLoad();
  }
} else {
  // If periodic background sync isn't supported, always update.
  updateContentOnPageLoad();
}

您还可以使用 getTags() 在 Web 应用的设置页面中显示有效注册的列表，以便用户启用或停用特定类型的更新。

响应定期后台同步事件

如需响应定期的后台同步事件，请向您的服务工件添加 periodicsync 事件处理脚本。传递给它的 event 对象将包含与注册期间使用的值匹配的 tag 参数。例如，如果定期后台同步已注册为名称为 'content-sync' 的任务，则 event.tag 将为 'content-sync'。

self.addEventListener('periodicsync', (event) => {
  if (event.tag === 'content-sync') {
    // See the "Think before you sync" section for
    // checks you could perform before syncing.
    event.waitUntil(syncContent());
  }
  // Other logic for different tags as needed.
});

取消注册同步

如需结束已注册的同步，请使用要取消注册的同步的名称调用 periodicSync.unregister()。

const registration = await navigator.serviceWorker.ready;
if ('periodicSync' in registration) {
  await registration.periodicSync.unregister('content-sync');
}

接口

下面简要介绍了 Periodic Background Sync API 提供的接口。

PeriodicSyncEvent。在浏览器选择的时间传递给 ServiceWorkerGlobalScope.onperiodicsync 事件处理脚本。
PeriodicSyncManager。注册和取消注册定期同步，并为已注册的同步提供标记。从 ServiceWorkerRegistration.periodicSync` 属性检索此类的实例。
ServiceWorkerGlobalScope.onperiodicsync。注册处理脚本以接收 PeriodicSyncEvent。
ServiceWorkerRegistration.periodicSync。返回对 PeriodicSyncManager 的引用。

示例

以下部分展示了使用定期后台同步 API 的一些示例。

更新内容

以下示例使用定期后台同步来下载和缓存新闻网站或博客的最新文章。请注意标记名称，它表示这是哪种类型的同步 ('update-articles')。对 updateArticles() 的调用封装在 event.waitUntil() 中，以便在下载和存储文章之前服务工件不会终止。

async function updateArticles() {
  const articlesCache = await caches.open('articles');
  await articlesCache.add('/api/articles');
}

self.addEventListener('periodicsync', (event) => {
  if (event.tag === 'update-articles') {
    event.waitUntil(updateArticles());
  }
});