Angular Workbox PWA sync data

Question

I want to provide my existing Angular application as PWA so user can use the app offline.

If user is offline, I want to provide some functions, and as soon as the user is online, I want to push the data. For caching and saving POST requests I've found Workbox. I've impemented Workbox so far and everything is even stored in the indexeddb. I'm using BackgroundSyncPlugin to store requests.

But Workbox is synchronizing data when the user is opening the application the next time. So in background nothing happens and data stays in the db.

I've read that workbox doesn't support this feature yet. So I've tried to solve this using the native api. This is my code so far:

  await navigator.permissions.query({
    name: 'periodic-background-sync' as any,
  });

  navigator.serviceWorker.ready.then(async (registration: any) => {
    try {
      await registration.periodicSync.register('get-cats', { minInterval: 10 * 1000 });
      console.log('Periodic background sync registered.');
    } catch (err) {
      console.error('blablablabla', err);
    }
  });

and in my service worker script:

self.addEventListener('periodicsync', (event: any) => {
  console.log('Event', event);
});

So I want to build a job that runs every 10 seconds to check if anything is in the queue. If yes, I want to send these requests to the server. But this even doesn't work for once. If I'm triggering it manually in the browser (developer console -> application -> manifest -> sync button) then it gets triggered. So the registration is fine so far.

Do you have any ideas for my problem? I've also tried to solve this problem using ionic, but ionic has problems at loading my service worker. Installing PWA directly would be the best solution if it's possible.

Thank you so much in advance for taking your time.

Kind regards