Handling Internet Connectivity in React

Most of us in today’s world rely on the internet for shopping, entertainment, searching for any information, etc. But what if we are travelling somewhere and we want to do all that stuff on the go? There might be areas where the internet connectivity is poor or there might be no connectivity at all. Let’s take the example of a music app. Let’s just say we are streaming music online via an app and all of a sudden, the network drops and the music stops playing, we will have to wait for the app to connect to the internet and play the rest of the song. But what if the app was able to cache the songs from the playlist and play the songs from the cache?

We can achieve something similar to this in react by making the use of browser cache and service worker. In order to make this work, we need to make this an “offline first” app. An offline first app is an app whose core functionality works even in the absence of a network connection.

When we create a react app using create-react-app command (assuming we have all the requirements to run react app on our system), the app will contain a file called “service-worker.js”. We need to enable this service worker in order to cache the necessary files. This can be done just by editing a line of code. All we need to do is open a file named “index.js” from the “src” directory, search for “serviceWorker.unregister()” and change it to “serviceWorker.register()”. Once we are done with that, all we need to do is create a build of the app by typing the command “npm run build” in the cmd terminal. The next command that we need to type is “serve ./build”. But In order to use the serve command, we need to install the serve package for our app. We can simply do that by running “npm i serve” in our terminal. After installing that package we can run “serve ./build”. What serve command does is it runs the app in a production environment whereas the normal command that is npm start runs the app in a development environment. And the default service worker works in the production environment.

Once we run the “serve ./build” command, the app will be served cache first by the service worker and the app will be able to work offline. However, there might be cases wherein the app needs to get data from the user, for example, filling up a form. In cases like these we can make use of another package called “react-detect-offline”. It has a component called “Detector” which detects if your app is connected to the internet. With the help of this component, we can check if the app is offline and make the use of local storage or indexed db to store the form data locally. The detector component will automatically detect if the app is connected back to the internet, and once the detector detects internet connectivity, we can immediately send the local data to the server. The “react-detect-offline” package can also be used to display content or style your content based on your network connectivity (connected/disconnected).

If an app is likely to be used in poor network areas or while travelling then it’s probably best to go with an “Offline first” approach. It will make the app more reliable and responsive and the contents can be updated whenever required.

Archie Fernandes