IONIC on Cordova (Example)

This guide shows you how to create an application (android, iOS or windows) that supports push notifications from Puship through the Ionic Framework platform on the Cordova CLI.
if it is your first app with ionic framework I suggest you follow this guide as to install the necessary tools and do some practice with a first basic application.

Go to the directory where you want to keep the source code and run the following command to create the project:

ionic start PushipExample --cordova
--Il primo argomento è il nome della tua applicazione

Select the javascript framework you prefer to use, in this tutorial we will use Angular.
Select the template from which you want to start to create your project, in this tutorial we will use the Blank template.
Ionic allows you to choose whether to use the CLI Capacitor or Cordova. Since in this guide we will use Cordova select NO to the Capacitor integration request.

Go to the folder of the newly created project and launch the following commands to install the necessary plugins: device, geolocation (optional if you don’t use geolocation), push and puship

-- geolocation plugin
ionic cordova plugin add cordova-plugin-geolocation
npm install @ionic-native/geolocation

-- device plugin
ionic cordova plugin add cordova-plugin-device
npm install @ionic-native/device

-- push plugin
ionic cordova plugin add phonegap-plugin-push
npm install @ionic-native/push

--puship plugin
ionic cordova plugin add puship-plugin

Edit the config.xml file by setting the package in the attribute ID of the tag widget and the name of the application in the tag name.
Edit the code in the file src/app/app.module.ts adding the Push provider:

import { Push } from '@ionic-native/push/ngx';

providers: [
    StatusBar,
    SplashScreen,
	Push,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],

Edit the code in the file src/app/app.component.ts in this way:

import { Component } from '@angular/core';
import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { Push, PushObject, PushOptions } from '@ionic-native/push/ngx';

declare var Puship;

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})
export class AppComponent {
  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
	private push: Push,
    private statusBar: StatusBar
  ) {
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => {
        this.statusBar.styleDefault();
        this.splashScreen.hide();
      
    	this.push.hasPermission()
    	  .then((res: any) => {
    
    		if (res.isEnabled) {
    		  console.log('We have permission to send push notifications');
    		} else {
    		  console.log('We do not have permission to send push notifications');
    		}
    
    	  });
    	  
//REMOVE THIS SECTION ON IOS
    	// Create a channel (Android O and above). You'll need to provide the id, description and importance properties.
    	this.push.createChannel({
    	 id: "testchannel1",
    	 description: "My first test channel",
    	 // The importance property goes from 1 = Lowest, 2 = Low, 3 = Normal, 4 = High and 5 = Highest.
    	 importance: 3,
    	 //badge is used to if badge appears on the app icon see https://developer.android.com/reference/android/app/NotificationChannel.html#setShowBadge(boolean).
    	 //false = no badge on app icon.
    	 //true = badge on app icon
    	 badge: false
    	}).then(() => console.log('Channel created'));
    
    	// Delete a channel (Android O and above)
    	this.push.deleteChannel('testchannel1').then(() => console.log('Channel deleted'));
    
    	// Return a list of currently configured channels
    	this.push.listChannels().then((channels) => console.log('List of channels', channels))
//REMOVE THIS SECTION ON IOS
    
    	// to initialize push notifications
    
    	const options: PushOptions = {
    	   android: {},
    	   ios: {
    		   alert: 'true',
    		   badge: true,
    		   sound: 'false'
    	   },
    	   windows: {},
    	   browser: {
    		   pushServiceURL: 'http://push.api.phonegap.com/v1/push'
    	   }
    	}
    
    	const pushObject: PushObject = this.push.init(options);
    
    	pushObject.on('notification').subscribe((notification: any) => 
    			{
    				alert('Received a notification:' + JSON.stringify(notification));
    				
    			}
    		);
    
    	pushObject.on('registration').subscribe((registration: any) =>
    		{ 
    			console.log('Device registered: ', registration);
    			
    			//Puship.EnableLog(true);
    			Puship.Register(
    					registration.registrationId,
    					'YOUR-PUSHIP-APP-CODE',
    					{
    						successCallback: function (pushipresult) {
    							alert("device registered with DeviceId:" + pushipresult.DeviceId());
    						},
    						failCallback: function (pushipresult) {
    							alert("error during registration: " + JSON.stringify(pushipresult));
    						}
    					}
    				);
    		});
    
    	pushObject.on('error').subscribe(error => console.error('Error with Push plugin', error));
    });
  }
}

Follow the guide at this link to create a new application in the Puship Manager to get the Puship App ID and replace “YOUR-PUSHIP-APP-CODE” present in the script above.
Activate the notification service you need by following the guides Apple, Google Play e Microsoft Store.
For Android: the file google-services.json va copiato nella cartella android/app and you don’t need to add the action resource-file nel config.xml
For iOS: You don’t need to create the file build.json.
Run the build command:

ionic build

Run the command to add the platforms you are supporting:

ionic cordova prepare android
//The platform parameter can be android or ios

Now start the environment like this
- Android: run the command ionic cordova run android –device, if you have android studio installed you can see the application log simply by opening the Logcat view.
- iOS: open xcode, use File -> Open to open the application on the folder platforms/ios. From the navigator select the root project and on the signing section select your development Team. Check that you have set up the iOS developer in the property building. Run the application by clicking on the button Run.
- Windows: Run the commando ionic cordova run windows

When the application is started you should see the message “device registered with…”. You can now connect to the Puship Manager and send push notifications to your devices!

Please note:

Push notifications are not supported on the ios emulator.
Push notifications are supported on the android emulator but a special setup of the emulator is required, so it is recommended to test on a real device.
If you want to integrate the push notification service to an existing project, start from point 2.

Below are videos that explain step by step how to create an application and activate push notifications with Puship for Android and iOS:

Below you will find the code used in the videos:

Ionic cordova source

To know in detail how to add tags, manage geolocation and everything related to the other features of the puship api visit the common documentation for all platforms:

Common library documentation