Implementing reactive background data sync
Background data sync in PWAs allows our application to synchronize data in the background, even when the app is not actively being used. This ensures that the app’s data is always up to date and provides a seamless user experience. This feature comes in handy, especially in offline use cases, since it will keep data fresh and we can have access to fresh data in offline mode.
How to do it…
In this recipe, we will simulate the PWA’s background sync of data by leveraging Angular’s interceptors and Dexie.js, a small wrapper around the browser’s IndexedDB database.
Step 1 – Intercepting the recipe request
In services/recipes.service.ts, we have a simple HTTP request to our server:
getRecipes() {
return this.http.get('/api/recipes');}
The way we can intercept each recipe request is by using Angular’s interceptors. In interceptors/background-sync.interceptor...
