Phonegap Push Plugin

This Cordova plugin is used to register and receive push notifications.

• Repository: https://github.com/phonegap/phonegap-plugin-push

• Plugin ID/package name: phonegap-plugin-push

• Tested version: 2.3.0

Demo

Import the Phonegap push demo to your Monaca account

Preparation for iOS

When working with push notifications for iOS, an APNs authentication key or an APNs certificate is required. This section will show you how to create a development APNs certificate for testing on an iOS debug build. For release build, a production APNs certificate is required.

In order to continue, you should have signed up to the Apple Developer Program. Follow the instructions below to create a development APNs certificate.

1. From the Apple Developer page, go to Account.

2. Select Certificates, Identifiers & Profiles.

3. An app ID with push notifications enabled is required when creating an APNs certificate. Therefore, let’s create one. Under Identifiers section, go to the App IDs and click the ➕ button in the upper right corner.

4. Fill in the app ID information:

• App Description: Input your app name here (e.g. Cordova Firebase Demo)

• Explicit ID: Select this option because a Wildcard App ID is not allowed for push notifications. Input a unique identifier for your app (e.g. io.monaca.firebase).

5. Scroll down to the App Services section and tick the Push Notifications option. Then, click Continue.

6. After that, you will be redirected to the Confirm your App ID page. Click Register to complete the process.

7. Now, you should be back to the iOS App IDs page. Select the App ID you’ve just created and click Edit.

8. Scroll down to the Push Notifications section, click Create Cerficate under Development SSL Certificate.

9. Click Continue.

10. Click Choose File to browse your CSR file. You can get this file from the Monaca Cloud IDE by going to Config → iOS Build Settings. Then, click Generate Key and CSR. After creating the CRS file, download it by clicking the Export button.

11. Next, click Continue again. When the certificate is ready, you can download it. Save the file.

12. Upload the downloaded certificate by clicking the Upload Certificate button in the iOS Build Settings.

13. Click the Export icon of the target certificate displayed in the Certificates registered in Monaca to export the p12 file. You will need it for the Firebase configuration in the upcoming section.

Configuring Firebase for push notifications

1. Go to the Firebase Console.

2. Sign in with your Google account to enter the console.

3. Click Add project.

4. Fill in the project information and click CREATE PROJECT. Then, you will be redirected to the Project Overview page.

After project creation, we can configure the push notification project for a specific platform.

For iOS

1. Go to the Project settings.

2. Under the General section, click ADD APP and select iOS.

3. Enter your iOS Bundle ID (You can find that by going to Config → iOS App Settings). Then, click REGISTER APP.

4. Download the GoogleService-Info.plist file and place it in the root folder of your project. After that, click CONTINUE.

5. You will see the instructions on how to add the Firebase SDK to our project. However, we are not developing the app natively so we can skip this step. Just click CONTINUE to proceed. Then, click FINISH to complete the configuration. After that, you should see your iOS app in the Firebase overview page.

6. Now, it’s time to add the APNs certificates to the project. Go to the Project settings and select CLOUD MESSAGING.

7. Scroll down to the iOS app configuration section and upload the APNs authentication key or APNs certificates.

That’s it! You are done with iOS configuration.

For Android

1. Go to Project settings.

2. Under the General section, click ADD APP and select Android.

3. Enter your package name (You can find that by going to Config → Android App Settings). Then, click REGISTER APP.

4. Download the google-services.json file and place it in the root folder of your project. After that, click CONTINUE.

5. You will see instructions on how to add the Firebase SDK into our project. However, we are not developing the app natively so we can skip this step. Just click FINISH to complete the configuration. After that, you should see your Android app in the Firebase overview page.

Adding the plugin to the Monaca IDE

1. From the IDE menu, go to Config → Manage Cordova Plugins .

2. Click the Import Cordova Plugin button. Then, you can choose to import the plugin using a ZIP file or a URL/package name.

Usage

After importing the plugin to the project, you can initialize the push notifications. Please make sure to call the plugin API after the Cordova is loaded. For example:

document.addEventListener("deviceready", onDeviceReady, false);        
function onDeviceReady() {

    // Notification initialization
    push = PushNotification.init({
        ios: {
            badge: true
        }
    });

    // Checking notification permission
    $interval(checkNotifPermiss, 500);
    // Updating App Icon Badge Number
    $interval(updateAIBN, 500);  

    // When receiving a push notification
    push.on('notification', data => {
        receiveNotifCB(data);
    });
}

API references

This section describes some of the main functions used in our demo. For complete API references, please refer to the repository.

init()

Initialize push notifications.

PushNotification.init(options)

Parameter

iOS

*: Please note that the value you set this option to the first time you call the init method will be how the application always acts. Once this is set programmatically in the init method it can only be changed manually by the user in . This is normal iOS behaviour.

Android

Return Value

• pushObject

Example

const push = PushNotification.init({
  android: {},
  browser: {
    pushServiceURL: 'http://push.api.phonegap.com/v1/push'
  },
  ios: {
    alert: 'true',
    badge: true,
    sound: 'false'
  },
  windows: {}
});

hasPermission()

Check whether the push notification permission has been granted on the device.

PushNotification.hasPermission(successHandler)

Parameter

Callback Parameters

• successHandler

Return Value

• Promise

Example

PushNotification.hasPermission(data => {
  if (data.isEnabled) {
    console.log('isEnabled');
  }
});

getApplicationIconBadgeNumber()

Get the current badge count visible when the app is not running

push.getApplicationIconBadgeNumber(successHandler, errorHandler)

Parameter

Callback Parameters

• successHandler

Return Value

• Promise

Example

push.getApplicationIconBadgeNumber(
    n => {
        $scope.aibn = n;
    },
    () => {
        console.log('Error getting the number');
    }
);

setApplicationIconBadgeNumber()

Set the badge count visible when the app is not running.

push.setApplicationIconBadgeNumber(successHandler, errorHandler, count)

Parameter

Return Value

• Promise

Example

push.setApplicationIconBadgeNumber(
    () => {
        alert("Successfully setting the badge number!");
    },
    () => {
        alert("Fail to set the badge number. Something went wrong...");
    },
    badgeNum
);

push.on()

The event notification will be triggered each time a push notification is received by a 3rd party push service on the device.

push.on('notification', callback)

Callback Parameters

Return Value

• Promise

Example

push.on('notification', data => {
  console.log(data.message);
  console.log(data.title);
  console.log(data.count);
  console.log(data.sound);
  console.log(data.image);
  console.log(data.additionalData);
});