后台同步在连接到internet后花费太多时间，workbox

Question

我正在使用服务工作者来实现后台同步功能。以下是我的代码：

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断开连接时，请求将在索引数据库中排队。但问题是，在获得连接后，后台同步至少要在5-10分钟后进行。有没有办法在重新连接互联网后立即进行后台同步，或者至少减少同步的时间。

提前谢谢。

Answer 1

您可以通过向服务工作线程发送事件，在连接恢复后立即手动触发队列的重播。

在您的服务工作者中：

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

在你的应用中(使用workbox-window)

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

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

Answer 2

不幸的是，看起来现在不可能改变同步的时间。根据Google's Workbox documentation的说法

支持BackgroundSync应用编程接口的

浏览器将以浏览器管理的间隔自动代表您重放失败的请求，可能会在两次重放尝试之间使用指数退避。

如果谷歌的文档是正确的(至少对Chrome来说是这样)，这也意味着用户离线的时间越长，等待同步事件的时间越长的可能性就越大。

@cyril-hanquez的想法是好的，只要用户在重新在线时还在使用你的网站。您可能还希望使用add a "fetchDidFail" callback来处理更多的网络中断边缘情况。按照这些思路:你可能想要避免依赖"navigator.onLine“的状态，因为它是doesn't always do what one would expect的。