Question

我正在使用Service Worker实现后台同步功能。以下是我的代码：

importScripts(   'https://storage.googleapis.com/workbox-cdn/releases/3.6.3/workbox-sw.js' )

const queue = new workbox.backgroundSync.Queue('registerQueue', {   callbacks: {
    queueDidReplay: function(requestArray) {
      let requestSynced = 0
      requestArray.forEach(item => {
        if (!item.error) {
          requestSynced++
        }
      })

      if (requestSynced > 0) {
        new BroadcastChannel('backgroundSynBroadCastChannel').postMessage(
          requestSynced
        )
      }
    }   } }) const GraphQLMatch = /graphql(\S+)?/

self.addEventListener('fetch', event => {   if (
    null !== event.request.url.match(GraphQLMatch) &&
    navigator.onLine === false   ) {
    const promiseChain = fetch(event.request.clone()).catch(err => {
      return queue.addRequest(event.request)
    })

    event.waitUntil(promiseChain)   } })

self.addEventListener('message', event => {   if (!event.data) {
    return   }

  switch (event.data) {
    case 'skipWaiting':
      self.skipWaiting()
      break
    default:
      break   } })

workbox.precaching.precacheAndRoute([])

/*  *   Alternate for navigateFallback & navigateFallbackBlacklist  */ workbox.routing.registerNavigationRoute('/index.html', {   blacklist: [/^\/__.*$/] })

在Internet断开连接时，请求将在索引DB上排队。但是问题是在恢复连接后，至少要在5-10分钟后进行后台同步。重新连接互联网后，有什么方法可以立即进行后台同步，或者至少可以减少同步时间。

谢谢。

Answer 1

一旦连接恢复，您可以通过向服务人员发送事件来手动触发队列重播。

在您的服务人员中：

self.addEventListener('message', (event) => {
  if (event.data.type === 'replayQueue') {
    queue.replayRequests();
  }
});

在您的应用程序（使用工作箱窗口）中：

if ('serviceWorker' in navigator) this.wb = new Workbox('/service-worker.js');

window.addEventListener(‘online’, function(event){
     this.wb.messageSW({type: 'replayQueue'});
});

Answer 2

很遗憾，目前看来无法更改同步时间。根据{{3}}：

支持BackgroundSync API的浏览器将自动重播在由浏览器管理的间隔中代表您的请求失败，可能在重播尝试之间使用指数补偿。

如果Google的文档是正确的（至少对于Chrome来说是正确的），这也意味着用户离线的时间越长，则等待同步事件的时间就越长。

@ cyril-hanquez的主意很好，只要用户重新上网时仍在使用您的网站即可。您可能还想Google's Workbox documentation处理更多的网络中断边缘情况。遵循这些原则：您可能希望避免依赖“ navigator.onLine”的状态，因为它add a "fetchDidFail" callback。

建立网络连接后，后台同步需要太多时间，工作箱

2 个答案: