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.
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:
ionic start capacitor-network-example
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.
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.
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.
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:
npx cap add ios
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.
Now we need to make a new build of the project using the next command:
npm run build
After this operation, we should copy all changes to the IOS native project. You need to run the next in terminal:
npx cap copy
To open our IOS project in Xcode, we should use this way:
npx cap openios
The XCode IDE will open and you should see the generated project:
You can run this project in the emulator or directly on your IOS-device. I attached the 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:
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.”