Mobile
Article

Push Notifications in Your Ionic App with OneSignal

By Charles Muzonzini

Using Android Studio? Download our Handy Cheat Sheet of Keyboard Shortcuts!

Introduction to push notifications, what they are, how they work

Push notifications are messages sent directly to your app’s users. They notify users of new content, even when the user is not using your application. They increase user engagement and retention in your app. An example is the WhatsApp “whistle” that notifies you of new messages received. In this tutorial, we’ll dive into integrating push notifications into your Ionic app using OneSignal.

How push notifications work

A push notification is sent from the Push notification platform of the mobile OS: Apple’s Push Notification Service for iOS and Google Cloud Messaging for Android. These push notification services relay the message to the devices that have subscribed to them.

This means that you need to keep track of all the devices that have subscribed for push notifications. But there are some great services out there to simplify the process. One such service is OneSignal.

Step 1: Install Ionic

To start off with, you need to have Ionic installed on your machine. You install it using the node package manager npm;

$ npm install -g ionic

If you do not have npm installed, follow the instructions in the References section to install it.

Step 2: Start a new project

Next, start a new ionic project by running;

$ ionic start PushDemo sidemenu

The above command creates a new project in the current directory. The project folder will be called ‘PushDemo’ and it will use the sidemenu template.

$ cd PushApp && ionic serve --lab

The code above navigates into your project folder and opens up your app for testing in a browser window.

Browser preview of your ionic app

Step 3: Register on Google Cloud Messaging (GCM)

Visit the Firebase Console and log into your Google account:

https://firebase.google.com/

Firebase Console Home page

Create a new project, give it a name and enter your country.

Create New Firebase Project

Click the Gear icon in the top left and select Project settings -> CLOUD MESSAGING

API Keys

Take note of the two values highlighted in the image. The Server key, also known as the Google Server API key and the Sender ID, also known as the Google Project Number.

Step 4: Create OneSignal Account

Browse to https://www.onesignal.com and create an account.

OneSignal.com

Confirm your email address and login

OneSignal Dashboard

Click on Add new app and name it whatever you want. I would recommend that you give it the same name as you did your Ionic project.

Select your platform

Next, select the platform that you want to configure with OneSignal push notifications. In this tutorial, I will be configuring push notifications for Android.

Enter your Google Server API Key and Google Project Number. These are the details you got from the Firebase console in step 3.

Next, select the target SDK for your app. In our case, we are making an Ionic app so you select, “PhoneGap, Cordova, Ionic, Intel XDK”

OneSignal App ID

Take note of your OneSignal App ID. You will need this when integrating OneSignal into your app code.

Step 5: Integrating OneSignal into your ionic project

Go back to the command line window and from within your project directory run;

$ ionic plugin add onesignal-cordova-plugin

This will add the OneSignal plugin to your ionic project. This plugin gives our Ionic app an API to access Push notifications. Otherwise, they would be unavailable to hybrid apps.

Next, navigate to your main app.js file /www/js/app.js (app.ts for Ionic 2)

Add the following code to your $ionicPlatform.ready() function as above

// One Signal Push Notification Setup
// Enable to debug issues.
// window.plugins.OneSignal.setLogLevel({logLevel: 4, visualLevel: 4});
var notificationOpenedCallback = function(jsonData) {
  console.log('didReceiveRemoteNotificationCallBack: ' + JSON.stringify(jsonData));
};

window.plugins.OneSignal.init("<App ID>",
                               {googleProjectNumber: "<Sender ID>"},
                               notificationOpenedCallback);

// Show an alert box if a notification comes in when the user is in your app.
window.plugins.OneSignal.enableInAppAlertNotification(true);

Make sure you enter your App ID and Google Project Number. Save the file.

Connect your Android testing device to your computer via USB cable.

Then compile and install the PushDemo app with the following command:

$ ionic build android && adb install -r <path to project-dir>/platforms/android/build/outputs/apk/android-debug.apk

Check Subscribed Users

Next, run the app on your device so that it registers with the OneSignal servers. Then click Check Subscribed Users.

Step 6: Testing

Click on the pushdemo app

Click new push notification

Create a test notification then click preview. Next, click send.

You will immediately receive the push notification on your device.

Push Notification sent from OneSignal

OneSignal extra features

OneSignal has lots of other great features that you should explore further;

  • Emojis in notifications
  • Scheduled notifications
  • Notification templates
  • Realtime analytics
  • User segments
  • Automatic Messages

OneSignal Analytics

OneSignal Analytics

Code

You can find a demo of the above article on GitHub: https://github.com/sitepoint-editors/pushDemo/

References

  • Great to read this great post from an African. This tells me I can also do something great. Will stay in contact with you

    • Charles Muzonzini

      Indeed you can Oliver! Thanks for the positive comment. Please do connect on LinkedIn

  • Finalweb Tecnico Pc-not La Ser

    excellent and works…. how send push notification from app? example, make a button and click and send message !?

  • Delroy Finesse

    Great post. Any updates for ionic 2?

    • Charles Muzonzini

      Thank you. Yes, I’m working on something for ionic 2. Stay tuned.

      • Delroy Finesse

        Nice. Awaiting with patience, also, do add me on facebook or linkedin, also a fellow African.

    • Charles Muzonzini

      The code is exactly the same for Ionic 2. The only difference is that you add it to your app.ts file instead of app.js.

Recommended
Sponsors
Get the latest in Mobile, once a week, for free.