The reason behind writing this tutorial is that I was in trouble while setting up one signal Notification service with Ionic 3 app that I was working on. So I thought why not to make a tutorial on “how to setup Ionic 3 with One Signal Push Notification Service for Android Application”

So let’s proceed with collecting prerequisite information before Actually start with setting up Push Notification service for ionic 3 Android.

After firebase acquired by Google, it is little bit confusing that where to get which information. Earlier this is managed as GCM(Google cloud messaging) can be accessed by URL(https://developers.google.com) and nowadays it is known as FCM (https://console.firebase.google.com).

These three things are required:

  1. Google app id/ sender id(From firebase console)
  2. Server key(From firebase console)
  3. One Signal appId (From One Signal Dashboard after creating one signal application)

Let’s start with getting Google app id/ Sender id

  1. Go to google firebase console and login(https://console.firebase.google.com/)
  2. After login into google firebase console, you will see “Add project” tab.
  3. Click on add project tab and fill application details.
  4. After creating your app you will see gear icon, Click on gear icon > Project setting> Cloud Messaging. That’s it you will see server key and sender id below cloud messaging tab.

If you are in trouble while getting these details. Follow this tutorial detailed explanation.

Google App Id/ Sender Key

Let’s proceed with Ionic 3 with One Signal Push Notification Service

  1. Go to One Signal Push notification service website and signup (https://onesignal.com)
  2. After login to One Signal, you will see “Add new app” option to create a new application for push notifications service. So proceed with it and create a new app.
  3. Create new One Signal application.
  4. After successful creation of One signal app, It will showcase in the dashboard. Click on an app for which we want to set up notifications.
  5. Select Android from the list of platforms.(Google Android GCM) and proceed.
  6. In the next step, it will ask for google server key and google project number(sender id or Google app id). If you still didn’t get these details then follow this tutorial Link.
  7. Next step is to select SDK. Select Ionic and proceed.
  8. In this step, you can see below that we got One Signal App Id. This app id is important for us to use in the Ionic app at the time of initializing the ionic app. You can also see “check subscribed users” button, this button is here to check whether our ionic app initialize properly or not(i.e subscribed or not).
  9. Now we have all three things which are necessary for integration of one signal with the ionic-3 app.

Let’s proceed with actual implementation of push notification in ionic 3 application.

  • Register with One signal and create new Application and get appId.
  • Install the OneSignal Cordova plugin using below command.
ionic cordova plugin add onesignal-cordova-plugin

npm install --save @ionic-native/onesignal
  • After installation of plugin import as a provider in app.module.ts as shown below.
import { OneSignal } from '@ionic-native/onesignal';

@NgModule({
    ...
    ...
    providers: [
        ...
        OneSignal
        ...
        ...
    ]
    ...
    ...
})
export class AppModule { }
  • Initialize this plugin at startup on your Application.(In app.ts)
import { OneSignal } from '@ionic-native/onesignal';
import { Platform } from 'ionic-angular';

constructor(private _notification: OneSignal, private _platform: Platform) {
    initializeApp();
}
...
initializeApp() {
    this._platform.ready().then(() => {
        this._notification.startInit(appId, googleProjectId);
        this._notification.inFocusDisplaying(this._notification.OSInFocusDisplayOption.Notification);
        this._notification.setSubscription(true);
        this._notification.handleNotificationReceived().subscribe(() => {
            // your code after Notification received.
        });
        this._notification.handleNotificationOpened().subscribe(() => {
            // your code to handle after Notification opened
        });
        this._notification.endInit();
    })
}
  • That’s it, all set, You can now check your One Signal push plugin is setup successfully or not by running your application and by checking your One Signal dashboard i.e Step 8.

Do Comments if you have any problem or comment email id for Source

!!Happy Hacking!!

6 COMMENTS

  1. i added some code.. this._notification.getIds().then((ids)=>{
    storage.set(‘ids’, JSON.stringify( ids));
    storage.set(‘pushToken’, ids.pushToken);
    });

    this.storage.get(“ids”).then((value) => {
    rt=value;
    console.log(‘Storage value: ‘+ value);
    })

    log display as:
    [19:28:37] console.log: DB opened: _ionicstorage
    [19:28:37] console.log: Storage value: {“__zone_symbol__state”:false,”__zone_symbol__value”:”plugin_not_installed”}

    how to get the specific id

  2. So I initialize everything successfully in my app.component.ts file just like you did above. I am trying to use tags with the setTag() method. So if I make this call in the app.component.ts file it works fine, however I would like to make this call elsewhere in the app however when I do it doesn’t work. Could you give some insight into this?

LEAVE A REPLY

Please enter your comment!
Please enter your name here