Check Internet Connection For NativeScript Angular 2 App

Share on FacebookTweet about this on TwitterShare on Google+Share on RedditShare on StumbleUponDigg thisFlattr the authorPin on PinterestShare on TumblrShare on LinkedInPrint this pageBuffer this page

In this post, I will show you how you can check internet connection using in your NativeScript app. There are a lot of cases where you would want to check if the device is connected to the internet or not and if it is then which type of connection it is. We will see all of that in this post using NativeScript with Angular 2.

Step 1)

We will start off by creating a new project in NativeScript by issuing the following command in the command prompt

the --ng option will create a NativeSript Angular 2 project.

While we are in the command prompt let’s add platforms to our project as well by doing the following

Note that you can add and build for iOS platform using only a MAC .

Step 2)

As we will need permission to access the network state, we will need to add the nativescript-permission-plugin. The plugin will help seek permission from the user. Install the plugin by issuing the following command

 

Step 3)

All of the app code is inside the app  folder, we will be making changes to the app.component.html file inside the app folder. Open up app.component.html and put the following code in it.

Here we have a button that will execute the checkConnection() function  on the tap event. We also have a label that will display the type of connection using the {{connectWith}} variable.

 

Step 4)

Now it’s time to code the meat of our app. Open up app.component.ts and put the following code in it.

Here on line 2 we are importing  the  connectivity module which comes with the nativescript code modules. On line 3 we are importing  nativescript-permissions which we get from the plugin that we installed.

Starting from line 27 we are coding the checkConnection() function. We are using the permissions.requestPermission() method that the nativescript-permissions plugin gives us to request for the android.Manifest.permission.ACCESS_NETWORK_STATE permission. Here if the permission is granted I am using switch case to detect the type of connection i.e, none , wifi or mobile.

 

Step 5)

In addition to seeking permissions which is the new way of doing things from Android API 23+/Android 6+ we will still need to add required permissions to the AndroidManifest.xml. So open up app\App_Resources\Android\AndroidManifest.xml and add the following permissions to it

 

Here is a full list of permissions that you can add for Android.

For iOS as it is mentioned in the documentation of the plugin that “Has a dummy library for iOS so that if ask it for any android permissions; it will resolve every one of them as true.”

 

 

Conclusion

Here we are checking the internet connection at the tap of a button but we can also accomplish this on view load, on navigation or on app-load, it really depends on what you are trying to do. Checking internet connection is just a matter of adding the permissions and using the connectivity module. Keep in mind that you will have to handle the case where permission is denied by the user.

 

Download Code:


Code Will Be Sent Via Email

 

Leave Me Your Questions And Feedback

Getting your feedback inspires me the most so hit me up in the comments here or on the comments section on my YouTube Channel or on twitter @pointDeveloper

 

Consider Subscribing / Donating
Subscribe To Mailing List
Donate
If my site was helpful to you, then please consider donating via paypal:

Prantik Vaghela (pointdeveloper)

Hi my name is Prantik Vaghela. I have done my Bachelors and Masters in Computer Science and am a web developer and now a Tutor through my blog. :-)

  • Роман Любимов

    Thanks! And what about iOS? You named the article wrong.
    Also, you may use as any let networkPermission = (android as any).Manifest.permission.ACCESS_NETWORK_STATE;

    • For iOS, it is mentioned in the docs as follows

      “iOS has a dummy library for iOS so that if ask it for any android permissions, it will resolve every one of them as true”

%d bloggers like this: