How to create Push Notification System for your Cordova app with OneSignal and Firebase

Hello Everyone, today i'm going to show you how to add push notification system for your Cordova mobile app with OneSignal.

First let's talk little bit about OneSignal.

OneSignal is a multi-platform push notification service, which gives you variety of features. It lets you to send push notifications to almost all current mobile Operating Systems. You can check out their documentation if you want or start straightly this tutorial.

If you need to see the project structure  and stuff  go to github repo

Lets begin our tutorial 😎😎😎

1. First lets create a Cordova project. type following command in your CMD.
   
     C:\Users\acer>cordova create push
2. There will be a structure like this,
   
       
3. Now run android emulator, if you don't know how to run emulator from your CMD see this tutorial and do it exactly like that.
4. Go to your project folder and then type the following command in your CMD
   
    C:\Users\acer\push>cordova platform add android
5. You will get a project just like this.
6. Now go to OneSignal and make an account if you don't have one. Now click "Add a new app" square.
7. Now name your app what ever you want. We will name it as "PushFirebase".
8. Next you have to go to "App Settings " tab in your left side of the screen. In Native App Platform section you will find "Google Android" tab and click the Configure button under the Options column.
   
   
   
9. Now you have to go to Firebase and go to it's console which is in right hand corner button.
10. Click Add new project and pick a name and your region. 😇 Create your project.
    
    
    
    
    
    
11. Now click project settings which is inside wheel icon, then go to "Cloud Messaging" tab. Copy both Server key and Sender ID items.
    
    
    
12. Now go back to OneSignal and paste Sender Key inside Google Server API Key text box. And paste Sender ID inside Google Project Number text box .
    
    
    
    
13. Now select your SDK platform what ever you want, for this tutorial pick Phonegap, Cordova, Ionic, Intel XDK option and Click Next which is the final step.
    
    
    
14. Now make sure to copy Your App ID which is what we need for our Cordova mobile application.
    
    
    
15. Now let's go to OneSignal documentation for Cordova SDK   and copy the following code which is related to Cordova App.
    
    
    

    // Add to index.js or the first page that loads with your app.
    // For Intel XDK and please add this to your app.js.
    
    document.addEventListener('deviceready', function () {
      // Enable to debug issues.
      // window.plugins.OneSignal.setLogLevel({logLevel: 4, visualLevel: 4});
      
      var notificationOpenedCallback = function(jsonData) {
        console.log('notificationOpenedCallback: ' + JSON.stringify(jsonData));
      };
    
      window.plugins.OneSignal
        .startInit("YOUR_APPID")
        .handleNotificationOpened(notificationOpenedCallback)
        .endInit();
      
      // Call syncHashedEmail anywhere in your app if you have the user's email.
      // This improves the effectiveness of OneSignal's "best-time" notification scheduling feature.
      // window.plugins.OneSignal.syncHashedEmail(userEmail);
    }, false);
    

16. Before the 15th step you have to install Cordova One signal plugin so you have to run following command iside your terminal which is in the project directory.
    
    cordova plugin update onesignal-cordova-plugin
17.  Now paste the code which we pasted from the documentation(15th setp) by creating new js file ex- push.js inside js folder in folder structure.
18. Now Include it inside index.html 
    
     <script type="text/javascript" src="js/push.js"></script>
19. Now replace the .startInit("YOUR_APPID") with what you have copied from 14th setp.
20. Now run your app
    
    cordova run android
21. Make sure that you have finished all steps in OneSignal. Now go back to OneSignal home and Click New Push Notification.
22. In segments section you can pick the people who are about to receive your push notification.
23. Next  Type the title and message you want to send.
    
    
    
24.  Then you can skip next steps if you don't have advanced features inside your notification system. Now send the message.

    25. Finally this will be your output 😇😇😇