Angular6 Service Worker and background sync

Question

it seems that angular6 does not support background syncing with service worker. What are the steps required to do this without any library in an angular service?

https://developers.google.com/web/updates/2015/12/background-sync

How and where can I access WorkerGlobalScope in an angular6 application directly so that background sync can be done.:

self.addEventListener('sync', function(event) {
  if (event.tag == 'myFirstSync') {
    event.waitUntil(doSomeStuff());
  }
});

The problem is that the angular CLI generates the servicworker file (ngsw-worker.js). Is there a way to inject / modify / extend this file? Yes, i can edit the file ngsw-worker.js by hand or with another fancy trick. Is there an official way to do this?

Answer 1

Yes you can use your custom script to extend the capabilities of Angular's service worker.

Just follow below steps:

1. Create a js file with your custom script let's say sw-custom.js under src directory of your project.
2. Add "importScripts('./ngsw-worker.js')" at top of sw-custom.js file.
3. Add sw-custom.js file to angular.json file under scripts section.
4. Now register your sw-custom.js file in app module instead of

ngsw-worker.js

That's it now you can write your script here as per your need.

Maybe it is not correct approach but it works.

Here is the blog for same.