2

So my question is simple:

Is there background sync when using Angular PWA. For certain reasons, I cannot use WorkBox.

The only info I have found is: https://github.com/angular/angular/issues/22145

Which is currently still open. Are there any alternatives?

I feel like without background sync, making an 'offline app' is impossible. I have found this https://golb.hplar.ch/2018/12/background-sync-ng.html which tells me there is a method unfortunatly I don't have that much experience with PWA in general and I don't get how the above link works/can help me.

Any guides or solutions are welcome!

Bjorn Pijpops
  • 323
  • 3
  • 7
  • 19

2 Answers2

2

First, separate Angular out of this problem, it has nothing to do with the service worker. Totally separate animals.

Workbox is just a library that abstracts a lot of the service worker caching patterns into a more manageable API and adds background sync when it is supported by the browser.

You can do use the background sync API without Workbox. I will warn you it is a very complex API, just like IndexedDB is.

You do not need background sync to make a PWA work offline. It is completely optional. In fact, because only Chrome and Edge support background sync I don't even bother with the API. Instead, if I need offline sync capabilities I build a solution based on the application needs. I use a combination of IndexedDB and Service Worker cache to persist data.

The advantage the background sync API gives you is it will fire the service worker up without the user active in the application or even the device. Just when the device feels the network is available again.

Chris Love
  • 3,740
  • 1
  • 19
  • 16
  • 3
    The whole point of the application is that the user doesn't notice that the API call wasn't made and feels like their was a smooth transition. To achieve this goal, I feel like background sync is a must. Also I disagree with the fact that Angular has nothing todo with the service-worker. The way I currently have a service-worker is by adding PWA to an existing Angular project. This also means it is very difficult for me to edit the service-worker because it gets created on production build by Angular. – Bjorn Pijpops Feb 04 '20 at 08:57
  • I am gong to reiterate there is a clear separation between the UI and the service worker. It does not matter if you use the angular scaffolder or write it by hand. Angular does not have any code in your service worker. You can pass messages back and forth across the boundry and I do that quire often in my applications to trigger activity. You can update in the background. But in the case of a single page application if the app shell is updated you will need to refresh the page for that to load. You can get the other assets silently. – Chris Love Feb 05 '20 at 21:06
  • I honestly don't understand how it does not matter. Following this: https://angular.io/api/service-worker it seems to be clear that angular is indeed creating the service-worker. Yes offcourse I can create it by hand but currently I am using the Angular service-worker package. Adding background-sync to this seems like a hassle with a lot of unreadable. Completly switching to workbox seems to make more sense because you indeed create the service-worker 'from scratch'. – Bjorn Pijpops Feb 06 '20 at 14:07
  • Angular does not create or code or control the service worker. The step you use is a scaffolder. It just creates a starter service worker file. It is basically a null opp shell for you to actually create your application. – Chris Love Feb 06 '20 at 23:02
2

@angular/service-worker does not have Background Sync API support.

The feature request is tracked here

Angular PWA library re-builds the service worker based on the ngsw-config.json file. It is not recommended to modify this generated service worker as it gets rebuilt upon build, so therefore you're at the mercy of the library vendor, which doesn't yet have support for the background sync API.

Ian
  • 2,898
  • 1
  • 27
  • 29