Integrating Cordova Plugin

How to integrate Pushwoosh SDK into your Cordova project

Supports iOS, Android, Windows

Download SDK Download Sample Plugin API Docs

Note:

iOS Simulator can neither subscribe nor receive push notifications. Android emulator will work.

To integrate Pushwoosh with your Cordova application, follow these simple steps:

1. Install the Plugin source code into your app:

• For Cordova: cordova plugin add pushwoosh-cordova-plugin

• For Ionic: ionic plugin add pushwoosh-cordova-plugin

• For Intel XDK: Add pushwoosh-intel-xdk-plugin as Third-Party Plugin

2. Get the google-services.json from your Firebase console as described here and add it to your project.

3. Add the following section to your config.xml:

<platform name="android">
   <resource-file src="google-services.json" target="app/google-services.json" />
   ...
</platform>

4. Initialize plugin

Add the following function to your javascript file, enter the correct Pushwoosh App ID. For Android also enter the correct Google Project Number.

Cordova/Indel XDK

function initPushwoosh() {
	var pushwoosh = cordova.require("pushwoosh-cordova-plugin.PushNotification");

  // Should be called before pushwoosh.onDeviceReady
  document.addEventListener('push-notification', function(event) {
		var notification = event.notification;
		// handle push open here
	});
  
	// Initialize Pushwoosh. This will trigger all pending push notifications on start.
	pushwoosh.onDeviceReady({
    appid: "PUSHWOOSH_APP_ID",
		projectid: "YOUR_FCM_SENDER_ID",
		serviceName: "MPNS_SERVICE_NAME"
	});
}

Ionic

initPushwoosh() {
    var pushNotification = (<any>window).plugins.pushNotification;

    //set push notifications handler
  document.addEventListener('push-notification',
    function(event) {
      var message = (<any>event).notification.message;
      var userData = (<any>event).notification.userdata;

      alert("Push message opened: " + message);
      console.info(JSON.stringify((<any>event).notification));

      //dump custom data to the console if it exists
      if (typeof(userData) != "undefined") {
        console.warn('user data: ' + JSON.stringify(userData));
      }
    }
  );

  document.addEventListener('push-receive',
    function (event) {
        var message = (<any>event).notification.message;
        var userData = (<any>event).notification.userdata;
                              
        alert("Push message received: " + message);
        console.info(JSON.stringify((<any>event).notification));
                              
        //dump custom data to the console if it exists
        if (typeof (userData) != "undefined") {
          console.warn('user data: ' + JSON.stringify(userData));
        }
      }
   );

  //initialize Pushwoosh with projectid: "YOUR_FCM_SENDER_ID", appid : "PUSHWOOSH_APP_ID". This will trigger all pending push notifications on start.
  pushNotification.onDeviceReady({
    projectid: "YOUR_FCM_SENDER_ID",
    appid: "PUSHWOOSH_APP_ID",
    serviceName: ""
  });

  //register for push notifications
  var app = this;
  pushNotification.registerDevice(
    function(status) {
      alert("registered with token: " + status.pushToken);
    },
    function(status) {
      alert("failed to register: " + status);
      console.warn(JSON.stringify(['failed to register ', status]));
    }
  );
}

Call initPushwoosh(); on application start.

Example:

Cordova

bindEvents: function() {
	document.addEventListener('deviceready', this.onDeviceReady, false);
},
// deviceready Event Handler
//
// The scope of 'this' is the event. In order to call the 'receivedEvent' function, we must explicitly call 'app.receivedEvent(...);'
onDeviceReady: function() {
	app.receivedEvent('deviceready');
	initPushwoosh();
},

Ionic

angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])
.run(function($ionicPlatform) {
  $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);

    }
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleLightContent();
    }

    initPushwoosh();
  });
})

Intel XDK

function onAppReady() {
    if( navigator.splashscreen && navigator.splashscreen.hide ) {   // Cordova API detected
        navigator.splashscreen.hide() ;
    }

    initPushwoosh();
}
document.addEventListener("app.Ready", onAppReady, false) ;

5. Registering and handling push notifications

To register for push notifications call

pushwoosh.registerDevice(
	function(status) {
		var pushToken = status.pushToken;
    	// handle successful registration here
  },
  function(status) {
    // handle registration error here
  }
);

For handling notificatios see the following snippet of code in initPushwoosh function

// should be called before pushwoosh.onDeviceReady
document.addEventListener('push-notification', function(event) {
	var notification = event.notification;
	// handle push open here
});

6. iOS platform

Since iOS manages push notifications at the OS level, make sure to include the Pushwoosh Notification Service Extension to track the delivery of push notifications for your iOS app. Learn how to add it

If you're going to open the newly created xcode project:

open <your_project_name>.xcworkspace file.

If you use cordova-ios earlier than 4.3.0, enable Push Notifications in Capabilities section in XCode project.

7. Android platform

Check out the latest Google Play services and Android Support libraries using Android SDK Manager.

8. Windows platform

Pushwoosh plugin for windows platform uses WNS. Associate App with the Store in Visual Studio and set Notifications->Toast Capable; Please note that all UWP apps (Windows 10 and higher) are by default capable of sending toast notifications, without the need to declare such capability.

Pretty easy, isn't it!

Share your feedback with us

Your feedback helps us create a better experience, so we would love to hear from you if you have any issues during the SDK integration process. If you face any difficulties, please do not hesitate to share your thoughts with us via this form.