Embrace Offline First Approach to Make Your React Apps Offline Sync Compatible

Last Updated on: July 10, 2020

When we don’t embrace offline sync for web and mobile application development, we do nothing but let our users down. It’s frustrating when one’s favourite applications become futile when disconnected or while operating under terrible network conditions. But much of the pain caused by unreliable Internet connectivity can be alleviated by adopting the Offline first approach.

There are many use cases where the essence of Offline functionality is required. When it comes to web-based applications, one expects this for:

• A web app with some user registration form or any other form.
• Social media app that has to write post and comment options.
• A shopping app.

 

The missing key to this problem is to provide the APIs to be somehow synced with the server. APIs are kind of the brains for any front-end application, more specifically for the use cases mentioned above. With the emergence of modern day libraries like React and frameworks like Redux, an organised mechanism can be devised for the development of a full-fledged offline sync mechanism. Let’s discuss one such approach which can be devised using React and Redux.

Approach

The tagline for this approach can be-

Your data should be stored locally first and synced remotely second.

Working on this ideology, we decided to store the data locally in Redux which acts as a single source of truth.

When a user gets offline and performs some actions, definitely some APIs are expected to be involved in that, but in absence of the Internet, they fail to do so. To make this happen, we stored these API calls in the Redux store.

We developed a higherOrderComponent which when placed over any React Component makes it Offline Sync Compatible. This component listens to all the API actions when the browser goes offline and then waits until the network is restored. Meanwhile, all the API actions get filled up in the Redux store. The way the APIs are stored in Redux store is quite similar to Queue Data Structure, this is done to ensure the data integrity. As that is of utmost importance.  

Links to the Package:

Github: https://github.com/SystangoTechnologies/react-offline-sync.git

Npm: https://www.npmjs.com/package/react-offline-sync

Demo: https://react-offline-sync.firebaseapp.com/#/

One can use the package in any react, react-application- one simply needs to wrap the components with withPendingRequest HOC to enable offline-sync.

Let’s take an example of a web application that has some form and on submission, it will call API to store data on the server. In a general scenario, the user will lose their Form data when offline. For Seamless User experience, web apps must provide offline sync capability. So when a user is offline, they won’t have to worry about data loss.

Workflow

A simple workflow explanation for Offline Sync HOC.

Solution

One can use this by following these steps:-

Step 1 : Install

Npm install ‘react-offline-sync’

Step 2 : Import

Import withPendingRequest from ‘react-offline-sync’;

Step 3 : Use with your component

export default connect(mapStateToProps, mapDispatchToProps)(withPendingRequest(component_name));

Hope this helps!

We at Systango make it point to craft top-quality React apps that are scalable and efficient beyond compare. Our talented pool of coders understand full stack JavaScript libraries and deliver dynamic applications to meet diverse business requirements.

Let’s connect and discuss your next project!