如何使用 Background Sync API 实现后台同步？

推荐答案

// www.javascriptcn.com code example
// 注册 Service Worker
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
    .then(function(registration) {
      console.log('Service Worker 注册成功');
    })
    .catch(function(error) {
      console.log('Service Worker 注册失败:', error);
    });
}

// 在 Service Worker 中监听 sync 事件
self.addEventListener('sync', function(event) {
  if (event.tag === 'my-sync-tag') {
    event.waitUntil(doBackgroundSync());
  }
});

// 后台同步逻辑
function doBackgroundSync() {
  return fetch('/api/sync-data')
    .then(function(response) {
      if (!response.ok) {
        throw new Error('同步失败');
      }
      return response.json();
    })
    .then(function(data) {
      console.log('后台同步成功:', data);
    })
    .catch(function(error) {
      console.error('后台同步失败:', error);
    });
}

// 触发后台同步
function triggerBackgroundSync() {
  navigator.serviceWorker.ready.then(function(registration) {
    registration.sync.register('my-sync-tag')
      .then(function() {
        console.log('后台同步已触发');
      })
      .catch(function(error) {
        console.error('后台同步触发失败:', error);
      });
  });
}

本题详细解读

1. 注册 Service Worker

首先，我们需要在页面中注册一个 Service Worker。Service Worker 是一个运行在浏览器后台的脚本，它可以拦截网络请求、缓存资源以及处理后台同步等任务。

// www.javascriptcn.com code example
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
    .then(function(registration) {
      console.log('Service Worker 注册成功');
    })
    .catch(function(error) {
      console.log('Service Worker 注册失败:', error);
    });
}

2. 监听 sync 事件

在 Service Worker 中，我们需要监听 sync 事件。当浏览器检测到网络连接恢复时，会触发这个事件。我们可以通过 event.tag 来区分不同的同步任务。

self.addEventListener('sync', function(event) {
  if (event.tag === 'my-sync-tag') {
    event.waitUntil(doBackgroundSync());
  }
});

3. 实现后台同步逻辑

在 doBackgroundSync 函数中，我们可以编写具体的同步逻辑。通常，我们会发起一个网络请求来获取或提交数据。如果请求成功，同步任务完成；如果失败，同步任务会重试。

// www.javascriptcn.com code example
function doBackgroundSync() {
  return fetch('/api/sync-data')
    .then(function(response) {
      if (!response.ok) {
        throw new Error('同步失败');
      }
      return response.json();
    })
    .then(function(data) {
      console.log('后台同步成功:', data);
    })
    .catch(function(error) {
      console.error('后台同步失败:', error);
    });
}

4. 触发后台同步

最后，我们可以通过调用 registration.sync.register 方法来触发后台同步。这个方法会通知浏览器在合适的时机执行同步任务。

// www.javascriptcn.com code example
function triggerBackgroundSync() {
  navigator.serviceWorker.ready.then(function(registration) {
    registration.sync.register('my-sync-tag')
      .then(function() {
        console.log('后台同步已触发');
      })
      .catch(function(error) {
        console.error('后台同步触发失败:', error);
      });
  });
}

通过以上步骤，我们可以使用 Background Sync API 实现后台同步功能，确保在网络连接恢复时自动完成数据同步。