大家好，很高兴又见面了，我是"高级前端?进阶?"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发！

1.什么是Background Synchronization？

如果设备处于离线状态，Background Synchronization API 允许 Web 应用程序将服务器同步工作推迟由service worker 稍后处理。 如果在使用应用程序时无法发送请求，则延迟到后台发送。

例如，邮件客户端可以让其用户随时撰写和发送消息，即使设备断网。 应用程序前端只注册一个同步请求，当网络重连后在处理请求同时service worker 会收到警报。

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

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

if (window.isSecureContext) {
  // 页面是一个安全的上下文，serviceWorker可用
  navigator.serviceWorker.register("/offline-worker.js").then(() => {});
}

2.Background Synchronization能做什么？

可以使用Background Synchronization来处理超出页面生命周期的任何数据发送，包括但不限于：聊天消息、电子邮件、文档更新、设置更改、照片上传等等，即使用户导航离开或关闭选项卡。

页面甚至可以将数据存储在 indexedDB 中的“发件箱”中，然后使用 service worker检索并发送。

3.兼容性

3.1 浏览器兼容现状

根据caniuse的数据，目前整体浏览器支持率为75.26%。Chrome从49版本已经支持，Edge从79版本也已经支持，Firefox和Safari浏览器在最新版中都尚未支持。

3.2 前端兼容代码示例

浏览器都支持Background Synchronization还需要一段时间，因此在代码层面需要做一些兼容。

if ('serviceWorker' in navigator && 'SyncManager' in window) {
  navigator.serviceWorker.ready.then(function(reg) {
    return reg.sync.register('tag-name');
  }).catch(function() {
    // system was unable to register for a sync,
    // this could be an OS-level restriction
    postDataFromThePage();
  });
} else {
  // serviceworker/sync不支持
  postDataFromThePage();
}

请注意：即使用户网络连接良好，也值得使用Background Synchronization，因为它可以确保在数据发送期间免受导航和选项卡关闭的影响！

4.Background Synchronization示例

4.1 请求后台同步

以下异步函数从浏览器上下文注册Background Synchronization：

async function syncMessagesLater() {
  const registration = await navigator.serviceWorker.ready;
  // registration
  try {
    await registration.sync.register("sync-messages");
  } catch {
    console.log("Background Sync could not be registered!");
  }
}

4.2 标签验证Background Synchronization

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

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

4.3 在 Service Worker 中监听Background Synchronization

以下示例显示了如何响应service worker的后台同步事件。

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

5.本文总结

本文主要和大家介绍浏览器的新特性Background Synchronization，因为Background Synchronization本身的复杂性，文章没有过多的展开。但是文末的参考资料提供了大量优秀文档以供学习，如果有兴趣可以自行阅读。如果大家有什么疑问欢迎在评论区留言。

参考资料

https://developer.mozilla.org/en-US/docs/Web/API/Background_Synchronization_API

https://caniuse.com/?search=Background%20Synchronization

https://developer.chrome.com/blog/background-sync/

https://www.megethosdigital.com/blog-post/what-does-ppc-stand-for/