Push notifications are a communication channel between users and apps. It allows the apps to reach out to users with short messages in order to trigger some actions or interests from them. For this reason, push notifications are used by nearly every major apps for transaction and re-engagement.
There are many push notification services available out there. However, we are going to use OneSignal service in this article. You will learn how to add push notifications feature in a Cordova app using OneSignal service and Monaca Cloud IDE. We will demonstrate how to send push notifications and create a handler when the user opens a received push notification.
Tested Environments: Android 7.0 & iOS 10.1
What is OneSignal?
OneSignal is a multi-platform push notification service and it is totally FREE to use.
OneSignal has become the most widely used push notification service for both web and mobile developers due to various reasons such as:
- Free: supports unlimited devices and notifications without any charges.
- Easy to use: setup push notification in OneSignal is simple and easy to follow.
- Multi-platform support: provides a single UI and API to deliver messages across various platforms such as iOS, Android, Amazon Fire, Windows Phone, Chrome Apps, and so on.
- Multi-SDK support: provides SDKs for nearly every major cross-platform mobile development environment, including Unity, PhoneGap, Cordova, React Native, Intel XDK and so on.
What is Monaca?
Monaca is a Cross-platform hybrid mobile app development platform which has various cloud services and tools such as Cloud IDE (browser-based IDE), Localkit and CLI.
Monaca is a very simple development tool for Cordova apps. Even for people with less experience in app development can start using Monaca right away. Monaca has a flexible development environment. You can either develop on the cloud or locally. Without any installation, you can build your app and include any Cordova plugins easily within a few clicks.
Monaca also comes with Monaca Debugger app which is used to test your app on the fly in real-time without building it every time.
Step 1: Getting Started with OneSignal
App Registration with OneSignal
In order to integrate OneSignal service with Monaca app, OneSignal’s App ID is required to initialize with OneSignal-Cordova-SDK plugin which is used in the demo app later.
In order to get the OneSignal’s App ID, please do as follows:
- Register an account at OneSignal.
- Click on Add a new app. Fill in the name of the app and click Create.
- Then, the platform configuration dialog will appear. Close the dialog for now. We will configure the platform later.
- Go to App Settings and select Keys & IDs. You can find OneSignal’s App ID here. We will use this in the application later.
Push Notification Settings for Android
After successfully created the application in OneSignal, we are ready to configure the push notification settings for Android. In order to do so, please follow the instruction below:
- Go to App Settings and click on CONFIGURE button of Google Android.
2. Fill in the Google Server API Key & Google Project Number and click SAVE. For more information on how to obtain these key and number, please refer to Getting API Key from Firebase Console.
Push Notification Settings for iOS
In order to configure the push notification settings for iOS, please do as follows:
- Go to App Settings and click on CONFIGURE button of Apple iOS.
2. Upload the Production Push Certificate (.p12 file) and input its password (if available). Then, click SAVE. You may want to refer to Generate an iOS Push Certificate.
Step 2: Importing Push Notification Demo Project into Monaca Cloud IDE
- Click on the link below to directly import the Push Notification Demo project into your Monaca account. If you don’t have a Monaca account, please register here.
2. Open the project and replace your OneSignal’s App ID in the following snippet within
index.html file and save the change.
Step 3: Building & Installing the App
In order to test the application, build the application and install it on your device:
- From Monaca Cloud IDE, build the project for iOS or Android. You may want to refer to:
2. Install it on your device.
3. Run the app. By default, the Page 1 tab is the default tab.
9. If you click on Page 2 tab, you will see the following content. By default, the data from push notification is set to
NONE. It will change if the received push notification has any data.
Step 4: Sending Notifications from OneSignal
Until this step, we assume that you already have configured the push notification with OneSignal and installed the Push Notification Demo app on your device. Therefore, we are ready to start sending the notification from OneSignal:
- From OneSignal Dashboard, go to New Message.
2. Select Send to Everyone option and click NEXT.
3. Fill in Title, Subtitle & Message. Then, click NEXT.
4. Scroll down to ADDITIONAL DATA section and add two custom key values pairs as shown in the screen below. Then, click NEXT.
5. Schedule the time to send the push notification. For now, just keep the default setting and click CONFIRM.
6. Review the configuration for the message. Then, click SEND MESSAGE.
7. It may take several seconds for the device to receive the push notification. In iOS, the push notification looks like this:
8. Once the push notification arrives, click on it. This should open the app and automatically open Page 2 tab and the data from the push notification is shown as well:
NOTE: For a complete guide on how to configure a message in OneSignal, please refer to Sending Notifications.
Step 5: Understanding the Application
This is a very simple single-page app using Onsen UI v2 and Angular 1. The app has has two tabs: Page 1 & Page 2 tabs created by a tabbar component using <ons-tabbar>. Page 1 & Page 2 tabs point to
page2.html, respectively. Each page is created by using <template>.
The app has one simple controller called
AppController. Within the controller, the
data variable (used in Page 2 representing the data from a push notification)is initialized to be
NONE. If the push notification is sent with any data, this variable will be updated by using a function called
notificationOpenedCallback. This function is triggered when a user open a notification. Within this function, the
data variable is assigned to the JSON data found in the received push notification. After that, change the app to Page 2 tab using setActiveTab() function.
startInit and endInit starts and ends the initialization of the OneSignal plugin, respectively. In between the start and end of the plugin, there are various handlers/methods you can use such as handleNotificationReceived, handleNotificationOpened, inFocusDisplaying, iOSSettings, and so on. For more information, please refer to Cordova SDK for OneSignal.
As push notification has become such an important feature for mobile apps to interact with users, we are demonstrating how to integrate and use OneSignal, most popular and free multi-platform push notification service, with Monaca (Cordova/hybrid) apps.
We hope that you find this article useful in order to add a push notification feature to your own apps. If you have any questions or suggestions, please do not hesitate to comment here. Thank you very much!