Unlimited Free Push Notifications with OneSignal and Cordova

Khemry Khourn
Oct 30, 2017 · 7 min read

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

Image for post

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:

  1. Register an account at OneSignal.
  2. Click on Add a new app. Fill in the name of the app and click Create.
  3. Then, the platform configuration dialog will appear. Close the dialog for now. We will configure the platform later.
  4. Go to App Settings and select Keys & IDs. You can find OneSignal’s App ID here. We will use this in the application later.
Image for post

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:

  1. Go to App Settings and click on CONFIGURE button of Google Android.
Image for post

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.

Image for post

Push Notification Settings for iOS

In order to configure the push notification settings for iOS, please do as follows:

  1. Go to App Settings and click on CONFIGURE button of Apple iOS.
Image for post

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.

Image for post

Step 2: Importing Push Notification Demo Project into Monaca Cloud IDE

  1. 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.
Image for post

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:

  1. 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.

Image for post

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.

Image for post

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:

  1. From OneSignal Dashboard, go to New Message.
Image for post

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.

Image for post

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:

Image for post

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:

Image for post

NOTE: For a complete guide on how to configure a message in OneSignal, please refer to Sending Notifications.

Step 5: Understanding the Application

Image for post
Project Files in Monaca Cloud IDE

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 page1.html and 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.

Conclusion

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!

The Web Tub

Pushing the web current through hybrid mobile and PWA…

Thanks to Naoki Matagawa

Khemry Khourn

Written by

Was a technical support engineer at Asial Corporation in Tokyo, who loves rice, coffee and meat! Sheldon (TBBT) is her spirit animal!

The Web Tub

Pushing the web current through hybrid mobile and PWA technology. Presented by the Monaca and Onsen UI team.

Khemry Khourn

Written by

Was a technical support engineer at Asial Corporation in Tokyo, who loves rice, coffee and meat! Sheldon (TBBT) is her spirit animal!

The Web Tub

Pushing the web current through hybrid mobile and PWA technology. Presented by the Monaca and Onsen UI team.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store