BackgroundSync - Unable to do anything in "onSync" (workbox 4.1.1.)

[bligny]

I've the following code (mostly a huge copy/paste from WB web site):

const bgSyncPlugin = new workbox.backgroundSync.Plugin('my-queue', {
  maxRetentionTime: 24 * 60,
  onSync: async (queue) => {
      console.log('...Synchronizing '+ queue.name);    
      let entry;
      while (entry = await queue.shiftRequest()) {
        try {
          console.log('...Replaying: '+entry.request.url);
          await fetch(entry.request);
          console.log('...Replayed: '+entry.request.url);
        } catch (error) {
          console.error('Replay failed for request', entry.request, error);
          await queue.unshiftRequest(entry);
          return;
        }
      }
      console.log('Replay complete!');         
    }
});

Which is giving the following error:

Uncaught (in promise) TypeError: queue.shiftRequest is not a function
    at Queue.onSync [as _onSync] (service-worker.js:64)
    at syncComplete (workbox-background-sync.dev.js:620)
    at workbox-background-sync.dev.js:643

Furthermore the first console.log() is printing:
"...Synchronizing undefined"

It seems I cannot do anything with the queue argument ? Not print its name property, nor invoke any method (like shiftRequest)
What am I doing wrong ???

[jeffposnick]

Hello @bligny—Apologies for the frustration this may have caused.

It requires a close reading of the docs, but when it says the following:

The function is invoked with an object containing the queue property (referencing this instance)...

what it means is that the onSync function is called with an object as a parameter, and that object has a property named queue. So in order to get the Queue instance, you need to look at the queue property of the parameter, via one of the following approaches:

// Explicitly:
onSync: async (obj) => {
  const queue = obj.queue;
  // Do something with queue...
}

// Via desctructuring:
onSync: async ({queue}) => {
  // Do something with queue...
}

I hope that helps!

[bligny]

Thanks a lot for your quick response @jeffposnick !
Apologies also for not having fully read the documentation :-(
The fact is that the numerous examples I found on the net were all showing something slightly different, for example:
https://developers.google.com/web/tools/workbox/guides/migrations/migrate-from-v3
#1710 (comment)

Anyway, thx again !

[jeffposnick]

Thanks for pointing out that issue with the migration guide—we'll get that fixed! (I think the actual code example works, since it's using this rather than queue, but it's definitely misleading.)