Handling Apache Cordova Events With IonicFramework

There will often come a scenario where you need to determine when your application enters the device background and comes back into the foreground.  For example, let’s say we wanted to require a password every time the application is shown.  We would need to listen for when the application enters the foreground.

Lucky for us, we can make use of the Apache Cordova event listeners to accomplish this task.

Apache Cordova events require no additional plugin installation for IonicFramework.  To register an event we must do so in our $ionicPlatform.ready() method.  For example, we might have register something that looks like this:

In the above example, a resume listener is registered.  Every time the application regains focus, the callback function will run printing information to the log.

There are many different listeners that can be registered, but according to the Cordova documentation only the following work for Android and iOS.  At the time of writing this article, IonicFramework 1.0.0 beta 11 only supports Android and iOS.


ListenerDescription
resumeThe resume event fires when the native platform pulls the application out from the background.
pauseThe event fires when an application is put into the background.
onlineThis event fires when an application goes online, and the device becomes connected to the Internet.
offlineThe event fires when an application goes offline, and the device is not connected to the Internet.

It is important to note that this can only be tested from a device or simulator.  The web browser will not recognize these listeners.

A video version of this article can be seen below.

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in Java, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Apache Cordova. Nic writes about his development experiences related to making web and mobile development easier to understand.

  • Ariel

    very useful, thanks.

  • gioy

    Hi, thank you for sharing this. It was very helpful.
    One more question: is there an event for the app closure, or at least some workaround to know when the app is closing ? Thanks.

    • Without doing something hackish, I don’t think it is possible to listen for the app being closed. Maybe do your logic in the pause event instead? Or listening for the backbutton event and then checking to see if the history stack is empty.

      Regards,

      • gioy

        I’ll try that! Thank you!!

  • Its crazy, but I have the feeling you are covering the same subjects as I do (am still beginner though), but somehow I always end up on your blog…. 🙂

  • Its guide compatible with exit app or close app case, isn’t it?

    • I don’t believe there is a close or exit listener. Pause might accomplish what you need, but I think that is it.

      Regards,

  • Afrim A.

    Hi, thanks for the wonderful tutorial… I am working on an app which streams online radio through html5 audio player. I implemented online/offline events so if the network goes off and when it be back again to replay the audio player but how can I make use of this events while the device is locked or the app is running in the background will it still check for the network connection? If not do you know another way to resolve this?

    • You’ll have to find a plugin that will allow you to run things in the background. Without one, once your application goes into the background, it won’t function until it enters the foreground.

      Regards,

      • Afrim A.

        https://build.phonegap.com/plugins/2056
        I found this one and when I click the home button in the simulator one notification is shown that the app is working in background but I’m not sure if the online/offline events are working on that time since the alert is visible only if the app is in foreground.

        • I don’t know anything about that plugin, sorry.

  • Vitor Boccio

    I dont think it works on iOS 🙁

    • The documentation says it does. What are your errors?

  • Rajeshwar Reddy

    I have used this code. I have written some alerts in side the function. But when i switch the app between foreground and background, i am not getting alerts.

    • What do your logs say?

      • Rajeshwar Reddy

        I am testing in the device without connecting to the system. But after u[pdating to iOS9 i am unable to see the live logs.

        • How are you checking for logs?

          • Rajeshwar Reddy

            I added alerts, so it should work in real device right? but its not working..

          • Well if you’re getting errors elsewhere in your code or if the listeners themselves are throwing some sort of error, then no your alerts won’t work.

            I need to see your logs or I need to know how you’re checking your logs. Without this information I cannot help you further.

            Regards,

  • what about to add background listener to run some code

    • You’d need a plugin for that. Even with a plugin, Apache Cordova apps don’t handle background tasks well.

      • Do you know a plugin that do that, or any workaround .
        I try to call function once the device is connect to internet . and need it working in background

        • This one might work:

          https://github.com/katzer/cordova-plugin-background-mode

          Like I said though, Cordova was not designed to handle this properly. You will probably end up with excessive battery drain, a low performing app, and it may not even be accepted to the App Store.

          Regards,

          • Thank you for quick reply,
            I used the above plugin, i told to my customer that but he have a requirement and it’s more important for him.
            thank you very much and you blog saved me a lot

          • Glad I could help.

            Best,

  • Anil Kumar

    Hi Nic,
    Can you tell me the event to fire when we are killing the app , I tried with ‘destroy’ event it is not working when I killed the app but when I exit the app it is worked..

  • 文壮 刘

    Hi Nic, thank u for this post, I wonder whether listening ‘resume’ and ‘pause’ event for every single page is possible or not? Can I add add listener in every single controller?

    • Can you give me a reason why you would want to?

      • 文壮 刘

        Oh, that’s just a small requirement for my app because I want to reconnect to server whenever any page become visible and disconnect whenever any page become invisible. And I have sovled this through ‘$rootScope.$broadcast’ and ‘$scope.$on’. Thank you for replying.