CodeSolution

Please wait...

Create push notification message in ionic 1

Create push notification message  in ionic 1

@GCM  @ FCM  @ ionic  @ push notification  @ notification  @ message  

Push notification is an excellent way to keep our users engaged with our app, and it also helps them by notifying them of important things that are happening.

We’ll go through how to setup the $CordovaPushV5 Plugin to work with your Firebase app and handle the data from arriving notifications when the user taps on it on the phone.

$CordovaPushV5 setup

cordova plugin add phonegap-plugin-push --variable SENDER_ID="XXXXXXX"

how to find SENDER_ID ?

there are very simple 5 step to follow to get SenderId : 

1: open Firebase Console Link

2: Create a new project and go to the project

3: click setting icon show option then click project setting

4: then click add App and create application 

 

5: After create app go to the Cloud message tab then show sender id.

After creating FCM App  start with, create a project run this command:

ionic start <project name> blank --type ionic1

then move into the newly created directory:

cd <project name>

Now we need to add the plugin. This could be done by giving commands below.

cordova plugin add phonegap-plugin-push --variable SENDER_ID="XXXXXXX"

Open up app.js in www ->js-> app.js and add the below code between the ion-content tags.

.run(function($ionicPlatform, $http, $cordovaPushV5, $rootScope) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);
    }
     var options = {
        android: {
          senderID: "1078556049697"
        },
        ios: {
          alert: "true",
          badge: "true",
          sound: "true"
        },
        windows: {}
      };
      // initialize
      $cordovaPushV5.initialize(options).then(function() {
        // start listening for new notifications
        $cordovaPushV5.onNotification();
        // start listening for errors
        $cordovaPushV5.onError();
        // register to get registrationId
        $cordovaPushV5.register().then(function(registrationId) {
          console.log(registrationId);
          $rootScope.pushId = registrationId;
          // save `registrationId` somewhere;
        })
      });
      // triggered every time notification received
      $rootScope.$on('$cordovaPushV5:notificationReceived', function(event, data){
        // data.message,
        // data.title,
        // data.count,
        // data.sound,
        // data.image,
        // data.additionalData
      });
      // triggered every time error occurs
      $rootScope.$on('$cordovaPushV5:errorOcurred', function(event, e){
        // e.message
      });
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
    }
  });
})

Push notification application code is done you add platform in your application code platform add command: 

ionic cordova platform add android/ios/windows

Build and Run command

ionic cordova build android/ios/windows
ionic cordova run android/ios/windows

https://github.com/Sudarshan101/cordovapushV5-

thank you

Comments 0

Reply

>