Network Detection with Capacitor in Ionic project

There are a lot of situations when the internet connection is not stable in your app and for good user experience we need to show some messages like “Connection is not stable ” or “Connection restored”. In these cases, we need to handle network connection.
In this tutorial, I want to show you how to handle network connection in Ionic App using the Capacitor.

Getting started

To follow this tutorial you should have the basic fundamentals of the command line, installed Node, Ionic, Capacitor
All the following was done with the next requirements: Node v9.10.0, Ionic v3.20.0, Capacitor 1.0.0-alpha.x

Important: In this tutorial, we used Capacitor version Alpha, so it’s not production ready. 

1. Setup a new Ionic project

Let’s create an Ionic example using the following command:

Then choose the blank type of starter and when you will be asked for integrating Cordova into the app, you need to enter “No”, because we will use the Capacitor in this project.

You need to enter “No”

After installation of dependencies, you will be asked for using Ionic Pro SDK. You can read more about it and decide to include this SDK or not into your project.

Go to your newly created project:

2. Adding Capacitor to the Project

Just follow all steps described in the official Capacitor Documentation.

On the step of giving name for your project, you can type your appName and appId. Keep in mind that appId should look like this – com.example.app.
For this tutorial, I used capacitor-network-example as appName and com.roma.capacitorNetworkExample as appId.

After initialization, you will see the message about all is ready.

Capacitor is Ready

Now you can add platforms to your Ionic project. In this tutorial, I will show all on IOS platform. So, we need to use the next command in this project:

3. Adding Capacitor Network API to the Project

The integration of Capacitor Network API into the project is quite simple. We will make all our work in the default HomePage component. It should look like this:

4. Showing Network Status

Let’s add a new method to the HomePage component. You can call it simply – getStatus and this function will update the status variable with the data about the current state of the network. Also, for the status variable, we should import the NetworkStatus interface.

Then, you need to invoke the getStatus method inside the ionViewDidEnter lifecycle event to show actual network status when the view is entered.

Change the src/pages/home/home.ts in this way:

Change the src/pages/home/home.html in this way:

Now we need to make a new build of the project using the next command:

After this operation, we should copy all changes to the IOS native project. You need to run the next in terminal:

To open our IOS project in Xcode, we should use this way:

The XCode IDE will open and you should see the generated project:

XCode Project

You can run this project in the emulator or directly on your IOS-device. I attached the screenshot from emulator:

Screenshot from emulator

As you can see, the status object contains two variables – connected and connectionType. They are showing the boolean info about connection and the type of internet connection accordingly.

5. Subscribe to Network Changes

In this section, we will handle an internet connection. When something will going wrong with the connection, we can show a Toast message at the bottom of the page with the text about problems with internet. It should look like this:

Your internet connection appears to be offline. Data integrity is not guaranteed.
Your internet connection appears to be offline. Data integrity is not guaranteed.

First of all, we need to integrate Network listener to our app and create two methods-wrappers to start and finish listening changes related to an internet connection. It should be startListenNetwork and stopListenNetwork methods.

We will start listening all changes to the connection at once ionViewDidEnter event will fire and similarly stop listening when ionViewWillLeave event will fire. We need to check the connected property of status object inside networkStatusChange listener .

If this value will be false, we will invoke the presentToast method with the next sentence: “Your internet connection appears to be offline. Data integrity is not guaranteed.”

The full code of HomePage will look like this:

P.s. don’t forget to run the following after all changes in the code:

Then you can open your project in the XCode:

Conclusion

We can simply handle a state of connection in Ionic project using Capacitor Network API. Don’t forget to make additional changes, if you create a build for Android.

The full code related to this tutorial you can find here.

If you liked this, please help spread the word by hitting the recommend button below. Thanks!