Determine Network Availability In An Ionic 2 Mobile App

Continuing to freshen up my popular Ionic Framework tutorials in preparation for the release of Ionic 2, I figured it was time to revisit how to determine network availability in an application.  Previously I showed how to check for a network connection using Ionic Framework 1, but this time it makes sense to do the same using Ionic 2.

We’ll use the same Apache Cordova Network Information plugin from the previous tutorial, but this time we’ll evaluate how to use it with Angular 2.

Let’s first start by creating a new Ionic 2 project.  Using your Terminal (Mac and Linux) or Command Prompt (Windows), execute the following commands:

Two important things to note.  If you’re not using a Mac, you cannot add and build for the iOS platform.  You must also be using the Ionic CLI that supports building Ionic Framework 2 applications.

With our project created, we need to add the Apache Cordova plugin for determining the network status.  This can be done by executing the following in your Command Prompt or Terminal:

We’re now ready to look at some code!

To keep the project simple we’re only going to look at two files.  First, open your project’s app/pages/home/home.ts file and change it too look like the following:

Much of this was taken from the plugin documentation, but let’s go over it anyways.

In the first line we include the Platform and Alert dependencies because with Platform we can check the readiness of an Apache Cordova plugin and with Alert we can use slick alerts.  In the constructor we define those two dependencies to be used through the particular page.

Before we look at the constructor method, notice the following two lines:

For the first part of this guide we’re using vanilla Apache Cordova in our application.  It does not have TypeScript type definitions.  To eliminate the compiler errors we must first tell the compiler to ignore these two variables.

Now for where the magic happens.

In the checkNetwork function we first make sure the application is ready to use plugins.  When it is, we determine the connection type and check what it means using our states map.  The final step is showing an alert with the human readable status.

This brings us to the UI for our page.  Open your project’s app/pages/home/home.html file and change the code to the following:

Nothing fancy here.  We are just showing a button and when it is clicked it launches the checkNetwork function from our HomePage class.

Now let’s say you wanted to use Ionic Native instead of the vanilla Apache Cordova way of doing plugins.  Going back to the TypeScript file, add the following to the list of imports:

With Ionic Native, we no longer need to declare the two Apache Cordova variables.  To use this, check out the new checkNetwork function:

Notice we are using Network to determine things.  We are also casting the connection value to a string to prevent TypeScript compiler errors.

Conclusion

Determining the status of our network is not too difficult of a task.  We saw how to do it in Ionic Framework 1, and it isn’t much different in Ionic 2 because it uses the same plugin.  The plugin itself offers much more than what I demonstrated so if you need to work with listeners and other cool stuff, check out the official documentation on the subject.

A video version of this article can be seen below.

Nic Raboy

Nic is a skilled application developer who has released several native and hybrid mobile applications to iTunes and Google Play. He writes about his development experiences related to making web and mobile app development easier to understand and has experience in Android, Node.js, Apache Cordova, Java, NoSQL, SQL, GoLang, NativeScript, and Unity3D.

  • J5

    Thanks for the article. My problem is with Typescript. If you use TS (ionic start NewProj –v2 –ts), Cordova plugins are not working, so I get that navigator.connection is undefined… Ever tried that?

  • Dipak Mahapurkar

    Thanks for this grate tutorial. But i got error after running android device: my logcat is

    TypeError: Cannot read property ‘annotations’ of undefined

    • I’m not sure what this is:

      TypeError: Cannot read property ‘annotations’ of undefined

      My guess is you have other issues in your code that are unrelated to what I posted.

      Best,

  • Duncan Underwood

    hiya Nic. this is really great but i have a question. I followed your video step but when i got to open the project in Atom i dont seem to have the home.js and home.html. Looking on your video in the www folder you have only the index.html and an app folder? but it my blank template i have alot more folders from the template but do not have those home.html or .js file? any ideas?

    • Duncan Underwood

      doh..i think i just figured it out. 🙂

      • Yea the terrible thing about working with an alpha product (specially an Ionic alpha product) is that it changes almost daily.

        This post changed two times since making the video. The first change was with the file paths and the second was the deprecation of the Popup component.

        The video should still be valuable to you none-the-less as the core code is what counts. Nothing major was introduced.

        Best,

  • HoangLVQ

    Could you help me to determine GPS availability in IONIC 2 ? Thanks you

  • Victor Carvalho

    How I can do to verify changes in the internet connection automatically?

  • ravensnowbird

    This is an amazing article. Why aren’t you helping ionic 2 guys to write better documentation ? This is what they have. http://ionicframework.com/docs/v2/native/connection/ Can’t understand one bit.

    • Thanks for the compliment. I’ve offered the Ionic guys a lot of feedback and have been ignored. They are not interested in my help.

      Just use my blog as your documentation source and you’ll be good 🙂

    • Cesco Ferraro

      The ionic team should work on documenting ionic itself.
      This blog post is about the cordova-plugin-network-information you can alway find more info at https://github.com/apache/cordova-plugin-network-information .
      Great tutorial Nic!

      • I just now updated the tutorial to use the latest version of Ionic. I also list Ionic Native as an option if you don’t want to use the vanilla Apache Cordova way to do things.

        Best,

  • Chente

    what is the difference between
    ionic plugin add
    or
    cordova plugin add

    • ionic/cordova plugin add will accomplish the same task, but if you use ionic rather than cordova, you can restore your plugins from a GitHub repo. SQLite is persisted native storage. Information will not be deleted unless you delete it.

      Best,

  • james

    Do you have a full sample where you use Ionic Native instead of the vanilla Apache Cordova way of doing plugins?