Back

Technologies:

javascriptjavascript
node.jsnode.js
avatar
Tolerim
12 days ago

What does the error message 'Uncaught reference error: sync() not defined' in Service Worker mean?

As a senior JavaScript developer, I have created a sync event for the service worker and defined a sync() function within the public/javascripts directory of the NodeJS application. Although the function is callable from the browser's console, the service worker was unable to identify it. The directory structure is arranged like this: 
public
|- javascripts
   |- ... other non-relevant js files ...
   |- index.js (contains the sync() definition)
|- ... other non-relevant directories ...
|- sw.js
To cache the files within the service worker, I have used javascripts/index.js.
Answers(2)
avatar
Vogi
11 days ago
Verified Answer
It seems that the sync event is not working as expected. According to the Mozilla Developer Network, the sync event of the ServiceWorkerGlobalScope interface is fired when the page (or worker) that registered the event with the SyncManager is running and as soon as network connectivity is available. This event is not cancelable and does not bubble. It's possible that the service worker is unable to identify the function because it's not being registered properly. You can try registering the service worker in your HTML file like this: 
<script>
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/sw.js')
    .then(function(registration) {
      console.log('Registration successful, scope is:', registration.scope);
    })
    .catch(function(error) {
      console.log('Service worker registration failed, error:', error);
    });
  }
</script>
You can also try using a relative path for your JavaScript file like this: 
navigator.serviceWorker.register('/sw.js').then(function(registration) {
  return registration.sync.register('myFirstSync');
}).catch(function() {
  console.log('Sync registration failed');
});
I hope this helps! Let me know if you have any other questions.

Sources

Synchronize and update a PWA in the background - Microsoft Edge ...ServiceWorkerGlobalScope: sync event - Web APIs | MDN - Mozilla Developerangular - Background sync in Service Worker is not working in chrome on ...
avatar
Tolerim
12 days ago
It sounds like there may be an issue with how the sync event and the sync() function are being registered and called within your service worker and client-side code. Here are a few things to check: 1. Make sure that the service worker and client-side code are both registering the sync event using the same event name. For example, a client-side file may register the sync event like this: 
navigator.serviceWorker.ready
     .then(swRegistration => {
       return swRegistration.sync.register('mySync');
     })
     .catch(err => console.log('Error registering sync', err));
And the service worker itself should be listening for the sync event like this: 
self.addEventListener('sync', event => {
     if (event.tag === 'mySync') {
       event.waitUntil(doSyncStuff());
     }
   });
Make sure that the event tag matches in both places. 2. Check to make sure that the sync() function is being called correctly from within the service worker. Within the sync event listener, you should be able to call the function like this: 
self.addEventListener('sync', event => {
     if (event.tag === 'mySync') {
       event.waitUntil(sync());
     }
   });
Note that you shouldn't include the public/javascripts/ part of the path when calling the function - the service worker should be able to access javascripts/index.js since you have cached it. 3. Make sure that the javascripts/index.js file is actually being cached by the service worker. You can check this by looking at the browser's developer tools and looking at the service worker cache storage. If the file is not cached, make sure that your service worker's fetch event is set up to cache it correctly. I hope this helps! Let me know if you have any further questions.
;