Implementing Background Sync In React

In this blog, we will show you how to background sync work with service worker and indexedDB in React.

Creating better offline experiences for web apps. The Service Worker allows us to cache assets for offline use, and gives us an interface to work with data storage through IndexedDB. The concept behind background sync is to handle scenarios where a users Internet connection not stable.

Reference by steemit.com

• What is Service Worker.
• How to Use Service Worker.
• What is Background Sync.
• Background Sync Registration.
• Data Stored in Indexedb.
• Background Sync.
• Get Data From IndexedDB & Sent To Server

Background Sync Flow Diagram

What is Service Worker

A Service worker is JS Script That registered with the browser, stay registered with browser and load content even when there is internet connectivity.
You can use it todo offline experience of application and background sync or related stuff. You can get more information about it here.

How to Use Service Worker

Let’s take a look at the code in the index.js file of our app. change last line of Code to serviceWorker.register();

Now Open serviceWorker.js

Change in register function i.e in 13 line of code.
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; to
const swUrl = `${process.env.PUBLIC_URL}/sw.js`;

Now create sw.js file in public directory.

caching and Intercepting requests

To make page available offline, we need to intercept the fetch() and stored it in cache.
If There is No internet and To make our page available “offline” we need to intercept the fetch() call and fetch the cached contents.
For That we need to add the following code in sw.js file

What is Background Sync

Background Sync is a Web API that provides to delay a process until the Internet connection not stable. Let’s see real example, There is project management application that works on the browser and desktop, we want to create task for project and Internet connection is broken while we are creating task we didn’t realize that internet connection is broken. When Entering task details, and click on “Save” button.
Here is a job for the Background Sync.

Background Sync registration

Call below function when there is no internet connection.
It Background Sync registration request with tag name order.
When we click “Save” button, task details saved into IndexedDB.

Data Stored in IndexedDB

IndexedDB is a large-scale, NoSQL Database. It lets you store anything in the user’s browser. IndexedDB also supports transactions. Click here for more details about IndexedDB.

Background Sync

• If the Internet connection is available
  all Tasks that are stored in indexedDB, will be read and sent it to Server.
• If the Internet connection is not available
  The service worker waits until the connection gets back, even the window is closed. When ever connection is available, task details sent to the Server.

Get Data From IndexedDB And Sent To Server

Here we get data from indexedDB, and sent task create request to server
and delete that record from indexedDB.

Resource

ravikarale/react_app_with_serviceworker

Like, Share or Leave A Comment!

If you enjoyed this post, don’t forget to give it a 👏🏼, share it with a friend you think might benefit from it and leave a comment! Stay tuned for more exciting blogs on Flutter, Javascript, React, Angular, Ruby, etc.

Thanks