When building mobile applications, there are times when you need to notify users about upcoming events or appointments. If your application is running in the foreground, this can be easily achieved. However, when it's running in the background, local notifications become a crucial aspect of keeping users informed.
In this article, we'll explore how to create an Ionic application that utilizes the ngCordova local notification plugin, ensuring seamless communication with users without relying on push notifications.
Environment Setup
Before diving into the world of local notifications, it's essential to ensure your development environment is properly configured. This includes:
- Android environment set up
- Java 7+
- Android SDK
- Android Studio
- Either emulator, genymotion, or physical device
- iOS environment set up (for Mac users)
- XCode
- Either iOS Simulator or Device
- XCode Command Line Tools
- nodejs
- ionic
- cordova
- gulp
- bower
If you're new to setting up your development environment, refer to the following articles for guidance.
Creating a New Project
To start building your Ionic application that utilizes local notifications, create a new project using the following command:
ionic start swift-app-development blank
Navigate into the project directory and add the platforms required for deployment:
cd swift-app-development
ionic platform add android
(for Mac users only) ionic platform add ios
Installing ngCordova
ngCordova is a powerful collection of AngularJS extensions that simplify building, testing, and deploying Cordova mobile apps. To install ngCordova, run the following command:
bower install ngCordova --save
Include ng-cordova.js or ng-cordova.min.js in your www/index.html file before cordova.js and after your AngularJS/Ionic files.
Installing the Local Notification Plugin
To install the local notification plugin, run the following command:
ionic plugin add https://github.com/katzer/cordova-plugin-local-notifications.git
Adding ngCordova as a Dependency
Open up the www/js/app.js file and inject ngCordova into your module:
angular.module('starter', ['ionic', 'ngCordova'])
Creating a New Controller
To create an Angular controller that interacts with the UI, add the following code to the bottom of the www/js/app.js file:
.controller('SampleController', function($scope, $cordovaLocalNotification) {
})
Adding Functions for Creating Notifications
Within your SampleController, you'll need to add functions for scheduling notifications. These should be contained within an ionic platform ready function and inside a check that ensures you're running in a WebView on a device.
$ionicPlatform.ready(function () {
if (ionic.Platform.isWebView()) {
}
})
Make sure to inject $ionicPlatform into your SampleController:
.controller('SampleController', function($scope, $cordovaLocalNotification, $ionicPlatform) {
})
Instant Notification
To schedule an immediate notification, add the following function within your ionic platform ready function:
$scope.scheduleInstantNotification = function () {
$cordovaLocalNotification.schedule({
id: 1,
text: 'Instant Notification',
title: 'Instant'
}).then(function () {
alert("Instant Notification set");
});
};
Notification X Seconds from Now
To schedule a notification 5 seconds from now, add the following function within your ionic platform ready function:
$scope.scheduleNotificationFiveSecondsFromNow = function () {
var now = new Date().getTime();
var _5SecondsFromNow = new Date(now + 5000);
$cordovaLocalNotification.schedule({
id: 2,
published: _5SecondsFromNow,
text: 'Notification After 5 Seconds Has Been Triggered',
title: 'After 5 Seconds'
}).then(function () {
alert("Notification After 5 seconds set");
});
};
Notification Every Minute
To schedule a notification every minute, add the following function within your ionic platform ready function:
// Add code here
By incorporating these functions and plugins into your Ionic application, you'll be able to leverage local notifications to keep users informed about upcoming events or appointments.