Sending Push Notifications to app users plays a very import role in marketing the product, notifying the user related info etc. In e-commerce, automated user specific Push Notifications plays a vital role to market new products arrival, offers, delivery time etc.

If you want to learn, how to send a simple Push Notification using the Firebase service provider, please visit the below link.

https://ampersandacademy.com/tutorials/ionic-framework-version-2/push-notification-in-ionic-2-native-plugin-version-2-3-with-firebase-hosting-service-provider

The above link explains, how to create a basic Push Notification from scratch.

However, this tutorial focuses, how to setup your own Push Notification Server using PHP and how to automate the Push Notification, instead of using the Firebase console to send the Push Notification manually. And this tutorial requires the knowledge of PHP and MySQL. Please check, whether you have installed PHP and MySQL on your system.

Before starting this automation work, please make simple working Push Notification Ionic 2 application using the below URL and proceed further.

https://ampersandacademy.com/tutorials/ionic-framework-version-2/push-notification-in-ionic-2-native-plugin-version-2-3-with-firebase-hosting-service-provider

Now you are created a basic working Push Notification Ionic 2 project using the above URL. To automate Push Notification, you need three things. They are
1. Device registration id
2. Firebase Cloud Messaging Server API Key
3. Firebase API URL to send Push Notification

Device Registration ID

Whenever you call the pushObject.on() function, it will generate the Unique registration id. The registration id will look like below.

c_lWjq4w1o4:APA91bGKwNxzqdSdePcHhD3SS91IpKv_DhF3EtPc0nOTdZTWmO1EDqwb7owKf2K0YAx67hXwjQXXqCYoig6fX7s-Zd2bRH3zfdoKqRJi2owJ4R9-HgS3HucuHd-wfPedAdK4VkhkD7LV

You have to save the Device registration id. So import the Http class to the app.component.ts.

import { Http, Response, Headers, RequestOptions } from '@angular/http';
import 'rxjs/add/operator/map';

Then create a reference in the constructor using.

constructor(public http:Http)

 You have to save this device registration id on your server by simply calling the Http service and pass the registration id to your server. 

saveDeviceToken(t)
{

this.http.get('http://192.168.0.100/ionic/saveToken.php?token='+t)
.map(res => res.json())
.subscribe(
data => {
alert(JSON.stringify(data));
},
err => {
console.log("Oops!");
}
);

} 


The above code calls the Http service(ajax request). Please add the HttpModule to the app.module.ts, if you face the No provider for ConnectionBackend error message.

import { HttpModule } from '@angular/http';

Then add the HttpModule

imports: [
BrowserModule,
HttpModule,
IonicModule.forRoot(MyApp)
]

 Now, the device registration id will be saved in the database using the saveToken.php.

saveToken.php code 

<?php
header('Access-Control-Allow-Origin: *');

if(!empty($_GET))
{
$t=$_GET["token"];
//write your php code to save the registration id to the table.
}
else {
echo "oooooooooooopppppppppppppsssssssssss";
}
?>

Firebase Cloud Messaging Server API Key

You can get the Firebase Cloud messaging API key under your project settings.


Firebase API URL to send Push Notification

Use the below URL to send Push Notification.

https://android.googleapis.com/gcm/send

The above URL will accept only the POST data. So you need to write a PHP code to execute the above URL in POST method. And the URL had many parameters to send Push Notification. They are 

1. message
2. title
3. subtitle
4. tickerText
5. vibrate
6. sound
7. smallIcon 
8. largeIcon

<?php
// API access key from Google API's Console
define( 'API_ACCESS_KEY', 'YOUR-API-ACCESS-KEY-GOES-HERE' );
$registrationIds = array( $_GET['id'] );
// prep the bundle
$msg = array
(
'message'=> 'here is a message. message',
'title'=> 'This is a title. title',
'subtitle'=> 'This is a subtitle. subtitle',
'tickerText'=> 'Ticker text here...Ticker text here...Ticker text here',
'vibrate'=>1,
'sound'=>1,
'largeIcon'=>'large_icon',
'smallIcon'=>'small_icon'
);
$fields = array
('registration_ids'=>$registrationIds,
'data'=>$msg
);

$headers = array
('Authorization: key=' . API_ACCESS_KEY,
'Content-Type: application/json'
);

$ch = curl_init();
curl_setopt( $ch,CURLOPT_URL, 'https://android.googleapis.com/gcm/send' );
curl_setopt( $ch,CURLOPT_POST, true );
curl_setopt( $ch,CURLOPT_HTTPHEADER, $headers );
curl_setopt( $ch,CURLOPT_RETURNTRANSFER, true );
curl_setopt( $ch,CURLOPT_SSL_VERIFYPEER, false );
curl_setopt( $ch,CURLOPT_POSTFIELDS, json_encode( $fields ) );
$result = curl_exec($ch );
curl_close( $ch );
echo $result;
?>

Replace the YOUR-API-ACCESS-KEY-GOES-HERE with your Firebase Cloud Messaging Server API Key. I am running this example on my localhost. The URL to send data to the registered device looks like

htttp://localhost/ionic/sendPushNotification.php?id=YOUR_DEVICE_REGISTRATION_ID

That's all. You are done. If you want to send a custom message in the automated manner, then pass the message and device registration id as a parameter to the sendPushNotification.php file.

The below are the Ionic project information while writing this tutorial.

Cordova CLI: 6.5.0 
Ionic Framework Version: 3.0.1
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.3.0
ios-deploy version: Not installed
ios-sim version: 5.0.13 
OS: macOS Sierra
Node Version: v6.10.0
Xcode version: Xcode 8.2.1

app.component.ts full code

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import {AlertController} from "ionic-angular";
import { HomePage } from '../pages/home/home';
import { Push, PushObject, PushOptions } from '@ionic-native/push';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import 'rxjs/add/operator/map';
@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = HomePage;

  constructor(public http:Http,platform: Platform, statusBar: StatusBar,
 splashScreen: SplashScreen,private push: Push,public alertCtrl: AlertController) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();
      this.initPushNotification();

    });
  }

saveDeviceToken(t)
{  

        this.http.get('http://192.168.0.100/ionic/saveToken.php?token='+t)
            .map(res => res.json())
                .subscribe(
                  data => {
        alert(JSON.stringify(data));
    },
    err => {
        console.log("Oops!");
    }
                );

}
  initPushNotification()
  {
    // to check if we have permission
this.push.hasPermission()
  .then((res: any) => {

    if (res.isEnabled) {
      console.log('We have permission to send push notifications');
    } else {
      console.log('We don\'t have permission to send push notifications');
    }

  });

// to initialize push notifications

const options: PushOptions = {
   android: {
       senderID: 'XXXXXXXXXXXXX'
   },
   ios: {
       alert: 'true',
       badge: true,
       sound: 'false'
   },
   windows: {}
};

const pushObject: PushObject = this.push.init(options);

pushObject.on('notification').subscribe((notification: any) =>{
  console.log('Received a notification', notification);

  //Notification Display Section
   let confirmAlert = this.alertCtrl.create({
          title: 'New Notification',
          message: JSON.stringify(notification),
          buttons: [{
            text: 'Ignore',
            role: 'cancel'
          }, {
            text: 'View',
            handler: () => {
              //TODO: Your logic here
              //self.nav.push(DetailsPage, {message: data.message});
            }
          }]
        });
        confirmAlert.present();
  //
});

pushObject.on('registration').subscribe((registration: any) => {
  console.log('Device registered', registration);
  alert(JSON.stringify(registration));
  this.saveDeviceToken( registration.registrationId);
});

pushObject.on('error').subscribe(error => console.error('Error with Push plugin', error));
  }
}