Using Local Notifications In Your Ionic Framework App

Using Local Notifications In Your Ionic Framework App

 

Using Local Notifications In Your Ionic Framework App

Maybe you’re making an app that distributes reminders or requires some kind of notification.  You don’t necessarily need push notifications, but you would still like notifications. This could be a challenging task in native Android and iOS development.

Lucky for us, we can make use of the Apache Cordova local notifications plugin created by Sebastian Katzer in our Ionic Framework project.

[alert_box title=”iOS Push Notifications” button_text=”Go to the tutorial” button_link=”http://devdactic.com/ios-push-notifications-ionic/” icon=”e63f”]Learn to implement real iOS Push Notifications with the Ionic Push Service[/alert_box]

We’re going to start by creating a fresh Ionic project for Android and iOS:

Remember, if you’re not using a Mac, you cannot add and build for the iOS platform.

The next thing we want to do is install the Apache Cordova local notifications plugin.  In your Terminal or command prompt, enter the following:

At this point you can technically start using local notifications in your application, but since we’re using Ionic Framework, we want to keep things Angular.  Go ahead and download thelatest ngCordova release and include the ng-cordova.min.js file in your project’s www/jsdirectory.

Now the ngCordova JavaScript library must be added to your index.html file like the following:

It is very important that the above line appears above the cordova.js script, otherwise you’re going to experience strange results.

The final step in including ngCordova into your project is to add it to the list of directives in the angular.module portion of your app.js file like so:

It’s time to start using local notifications in our project by making use of the $cordovaLocalNotification command.

Take the following controller for example:

Here we have two functions, add() and isScheduled().  When we add a notification, it will trigger based on an alarm, which in this case will fire one minute from adding.

By making use of the isScheduled() method, we can check to see if our notification is already scheduled.

For iOS 8 only, it is a requirement to request for notification permissions first.  This can be accomplished by adding the following in our controller:

The first time you run your app on iOS you will be prompted.

To make use of these methods, open your index.html file and include the following somewhere in your <body> tag:

As of right now, the official ngCordova documentation mentions the following broadcast listeners:

Don’t take these too seriously, because they don’t work out of the box and I’ll explain why.

In the ngCordova source code you’ll find functions like the following which match Sebastian Katzer’s documentation:

Nothing wrong with the above code.  However, in the source code file, these functions are wrapped in the following condition:

The problem is that the plugin will never be ready in time for the above condition to be true, thus making our listeners never run.

A work around would be something like this in your app.js file:

The above works because we defined our listener function inside the $ionicPlatform.ready()method.

Now with this broadcasting, you can listen for the broadcasts in your AngularJS controllers:

There are a lot of different features you can make use of with this plugin, but I’ve only listed a few.  The base Apache Cordova plugin is a little buggy, but for the most part it works.

View a video version of this article below.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s