How to Build an Offline-First React App

Users won’t always have a great connection, be prepared from the beginning

Photo by Michael Dziedzic on Unsplash

I made a proof of concept for an offline-first React app and have decided to share it with the developer community.

Suppose we’re developing a ReactJS application where we can’t afford any pause in CRUD operations, even if there’s a network issue. Let’s see how we can achieve this. I’ll be using Redux for store management.

Let’s start by installing the necessary libraries:

npm install redux-offline --save

This library is handy for building offline-first apps both for web and React-native.

Then install localforage as we’ll be using indexedDB instead of localStorage.

npm install localforage --save

Other libraries we’ll be using in this example are:

- redux
- redux-thunk
- redux-logger
- react-redux

Read about these libraries by clicking their names.

Redux store will look like this:

Now we will write a React component to interact with the Redux store:

In redux/actions/app.js:

In redux/reducers/app.js:

That’s it!

Now, when we click the “Add” button after inserting an item name in the text field which we created in React component, it dispatches an action by making a POST HTTP request to our local API (/api/sample) using useDispatch hook which we’ve written in our action. Reducer will take the initial state and, based on that action, will return the desired result — our newly added item.

The hook useSelector will get that updated value in our component.

Remember: useSelector is an alternative to connect’s mapStateToProps. You pass it a function that takes the Redux store state and returns the state you need and useDispatch replaces connect’s mapDispatchToProps. All it does is return your store’s dispatch method so you can manually dispatch actions.

If somehow the internet is disconnected or there’s a network issue, then the magic starts!

It will try to hit our API (/api/sample) which, of course, it can’t because of a lack of network connectivity. Instead, it will start interacting with indexedDB, which we’ve already configured in our store and will keep trying to hit API meanwhile after specific intervals (we can also set the interval). All the data which was posted through the POST HTTP request will be saved in indexedDB. As soon as the network is back, it will move the data from indexedDB to our main DB and sync our main DB with the indexedDB.

The end-user will never get the impression that the internet was disconnected and can continue with their normal CRUD operations.

Isn’t that cool?

An efficient offline-first application should consider aspects like:

• An attempt to resend the request when getting an incorrect reply from the server (for example, timeout).
• Sending requests only when we detect an internet connection or when our API is up.
• Action queuing.
• Persisting a queue of actions between the relaunch of the app.

Redux offline is a complete solution, which implements the above functionalities above and also allows you to configure:

• The time period between server requests when resending requests.
• The number of failed requests before rollbacking.
• The library for handling those requests (for example, axios).
• Queue implementations.
• Change the configurations.

However, we need to remember that if the user is not able to open our page somehow, he will not be able to download all the logic and therefore the app will not be loaded. This is not the case in ReactNative where we have access to the application logic right after app opening.

I’m sure you’re now fully ready to get your hands dirty and start developing an offline-first React application!

Fully working example repo: https://github.com/mansern/offline-first-demo

Did you learn something new today? Comments and feedback always make the writer happy!

About the author

With over seven years of professional software development experience in various cutting edge technologies, I’m currently working as a Principal Software Engineer in a silicon valley based company in full-stack capacity using ReactJs and Apollo-GraphQL. I love writing about technology and sharing my professional experience with everyone.