Background sync in Service Worker is not working in chrome on android

Question

I have added PWA to an angular application.

Below is the code inside the service worker, which listen to the sync event. Once service worker detects internet connection it triggers this sync event.

self.addEventListener('sync', function (event) {
 console.log('syncing started.');
event.waitUntil(getAllrecordsAndPost());
});

In component:

Sync event registration:

navigator.serviceWorker.ready.then(function(swRegistration) {
      return swRegistration.sync.register('myFirstSync');
    });

This is working fine in the chrome at the desktop, but on the android chrome, background sync event is not working.

FYI: I am using latest chrome version (79).

EDIT:

After further investigation, I have found that sync event is getting triggered but inside that sync event a code for fetch is written, which is giving the error and that's why background sync is not working. below is the code which listens to sync event and hit the API.

 (function () {
        'use strict';

        self.addEventListener('sync', function (event) {
        event.waitUntil(postUrl());
        });

        function postUrl() {
            let url = 'http://mytesturl.com/testAPI';
            let data = {name:'test',age:10};
            fetch(url, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: data
            }).then((result)=>{
                console.log('successful');
            }).catch((x)=>{
                console.log('error ' + x);
            })
        }
     }());

In the console, i am getting error: error TypeError: Failed to fetch

Answer 1

https://web.dev/periodic-background-sync/ indicates that background sync only works from a PWA "installed" and launch as a separate app (rather than as a tab in the browser) - can you clarify whether you attempted to launch it in these conditions?