Background sync and React

[NistrumCain]

Library Affected: workbox-background-sync.

Browser & Platform: Chrome

Issue or Feature Request Description: Hey, im having a really hard time getting this set up..

Im running a simple POC against using the background sync function in my react app im currently using an abb i spun up using Create React App using the next.js image, im running the whole thing as a client side app and i have everything set up... what i need to do is get the background-sync part up and running.

Ive hit a number of issues but at the moment i seem to have hit all the "errors" but I am unsure of how to actually get the background sync to start adding items to the IndexedDB queue.

I currently have this code in me worker.js file and the way the docs are worded this seems to be the "wimple" plug and play style version of using this code.. but nothing happens when an API call fails on me /players page. Is there something specific I am missing?

import {BackgroundSyncPlugin} from 'workbox-background-sync';
import {registerRoute} from 'workbox-routing';
import {NetworkOnly} from 'workbox-strategies';

const bgSyncPlugin = new BackgroundSyncPlugin('myQueueNameDefault', {
    maxRetentionTime: 24 * 60, // Retry for max of 24 Hours (specified in minutes)
  });

registerRoute(
    /\/player/,
    new NetworkOnly({
      plugins: [bgSyncPlugin],
    }),
    'POST'
  );```

[deshaXii]

i can fix iit

[NistrumCain]

OK so i have managed to push though and get workbox set up at its core but now i am to the meat of the issue!

I need to use the backgroud sync function and i have used the example code used in the docs (see below)

My issue now is i get "Queue.js:341 Uncaught TypeError: Cannot use 'in' operator to search for 'sync' in undefined" as an error, am i missing a step?

/* eslint-disable no-undef */
import {precacheAndRoute} from 'workbox-precaching';
import {BackgroundSyncPlugin} from 'workbox-background-sync';
import {registerRoute} from 'workbox-routing';
import {NetworkOnly} from 'workbox-strategies';

const bgSyncPlugin = new BackgroundSyncPlugin('myQueueName', {
    maxRetentionTime: 24 * 60, // Retry for max of 24 Hours (specified in minutes)
  });

  registerRoute(
    /\/user/,
    new NetworkOnly({
      plugins: [bgSyncPlugin],
    }),
    'POST'
  );

precacheAndRoute(self.__WB_MANIFEST || [])  /* eslint-disable-line no-restricted-globals */;

// eslint-disable-next-line
self.addEventListener('install', event => event.waitUntil(self.skipWaiting()));
// eslint-disable-next-line
self.addEventListener('activate', event => event.waitUntil(self.clients.claim()));

[NistrumCain]

It very specifically seems to be when creating the Queue its self, the issue seems to be that self.registration doesn't seem to contain the sync prop... i can see it within the registration its self

at the moment i an trying to enforce it running after the registration, which while it prevents a breaking error still isnt working

you can see below how i am enforcing the check

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js').then(registration => {
      console.log('SW registered: ', registration);
    }).then(() => {
      if(navigator.serviceWorker.ready) {
        const queue = new Queue('myQueueName');
    console.log("queue", queue)
      }

    })
    .catch(registrationError => {
      console.log('SW registration failed: ', registrationError);
    });
  });

}```

[tomayac]

Hi there,

Workbox is moving to a new engineering team within Google. As part of this move, we're declaring a partial bug bankruptcy to allow the new team to start fresh. We realize this isn't optimal, but realistically, this is the only way we see it working. For transparency, here're the criteria we applied:

• For PRs, we closed everything that doesn't target the current v7 branch.
• For Issues, we closed everything that was created before 2024.

Thanks, and we hope for your understanding! The Workbox team