Cordova-plugin-push-notifications NPM

Cordova Push Notification plugin

Simple plugin of Cordova for Push Notification in iOS and Android. You will be able to receive a device token using Google services (Firebase Cloud Messages) and Apple (Apple Push Notification) to send push notifications.

Install

cordova plugin add cordova-plugin-push-notifications

Downoload plugin in .zip arcive, unpack and:

cordova add plugin 'path/to/plugin/in/system'

And follow the instructions...

Cordova

Required Cordova version >= 9.0.0

Check via:

cordova -v

iOS

Required Cordova iOS platform >= 6.0.0

After entering "plugin add" or "cordova build ios" command open iOS project in Xcode, go to Signing & Capabilities and click on "+" in left. Select Push Notification and generate SSL-certificate for push notification. You can check the instructions here.

Android

Required Cordova Android platform >= 12.0.0

After entering "plugin add" command, add new preference in config.xml of project:

<preference name="AndroidXEnabled" value="true" />

This preference is needed only for Android platform, example:

<platform name="android">
  <preference name="AndroidXEnabled" value="true" />
</platform>

Next, go to Firebase and register your application in Push Notification service (Cloud Messages). Get in Firebase google-services.json and put this file in /platforms/android/app/ (where second build.gradle file and folder src. are located).

You can automate this process by putting google-services.json in the root of the Cordova project and adding an entry like this to config.xml:

<resource-file src="res/google-services.json" target="app/google-services.json" />

Now, you can build the project via "cordova build android".

Attention

When the user receives a notification, the app icon is displayed in the status bar on iOS. Android does not provide this. You have to add the following lines to AndroidManifest.xml:

<meta-data android:name="com.google.firebase.messaging.default_notification_color" android:value="0"/>
<meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="@drawable notification_icons" />

@drawable/notification_icons - is an android resource hand made in Android Studio. And the color is indicated in HEX, example: #fff (or 0 is the default color).

You can set your resource and color by adding this code to your AndroidManifest.xml across config.xml.

How to create resource for Android notifications

You need to add this to AndroidManifest.xml

<meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="@drawable/my-icons" />

And create the resource itself in the Android studio. You can play around with the Cordova config.xml to automate this in the future and load the assets you want via:

<resource-file src="res/icon" target="app/drawable/my-icon" />
<config-file target="AndroidManifest.xml" parent="/manifest/application"> 
 <meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="@drawable/my-icon" />
</config-file>

See here.

For clarity, I have attached my icon code from config.xml (from my own project):

<resource-file src="drawable/drawable-anydpi-v24/notification_icons.xml" target="app/src/main/res/drawable-anydpi-v24/notification_icons.xml" />
<resource-file src="drawable/drawable-hdpi/notification_icons.png" target="app/src/main/res/drawable-hdpi/notification_icons.png" />
<resource-file src="drawable/drawable-mdpi/notification_icons.png" target="app/src/main/res/drawable-mdpi/notification_icons.png" />
<resource-file src="drawable/drawable-xhdpi/notification_icons.png" target="app/src/main/res/drawable-xhdpi/notification_icons.png" />
<resource-file src="drawable/drawable-xxhdpi/notification_icons.png" target="app/src/main/res/drawable-xxhdpi/notification_icons.png" />
<config-file target="AndroidManifest.xml" parent="/manifest/application"> 
 <meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="@drawable/notification_icons" />
</config-file>

And finally, add this dependency in tag <widget>:

<widget ... xmlns:android="schemas.android.com/apk/res/android" ...></widget>

The icons themselves can be downloaded from here, from my Google Drive. Download icons.

Plugin API

JavaScript example:

window.pushNotification.registration((token) => {
  console.log(token);
})

// Catch notification if app launched after user touched on message
window.pushNotification.tapped((payload) => {
  console.log(payload);
})

May be combined with the "resume" event when the notification was clicked in the background. The function "tapped" always returns an empty string. But, if there was a launch through a notification and there is a "payload" there, then it will give its contents:

document.addEventListener('resume', () => {
  // call tapped function here...
}, false)

It is obligatory to receive the "payload" data must be in the following form:

iOS

{ 
  aps: {
    alert: {
      title: "Hello Alex!",
      subtitle: "You pretty boy"
    },
    payload: "payload 1234"
  }
}

Android

{
  message: {
    token: "<token>"
    data: {
      title: "Hello Alex!", 
      body: "You pretty boy!", 
      channelId: "444",
      notificationId: "1"
      payload: "payload 1234"
    }
  }
}

channelId, notificationId, payload - Optional parameters.

Don't use "notification" props, this is because it disable Intent update (breaking putExtra) and tapped function doesn't work.

val notifyIntent = Intent(this, mainActivity).apply {
  flags = Intent.FLAG_ACTIVITY_NEW_TASK or Intent.FLAG_ACTIVITY_CLEAR_TASK

  if (payload != null) {
    putExtra(Intent.EXTRA_TEXT, payload)
  }
}

TypeScript

TypeScript example (with import of interface):

import PushNotification from 'cordova-plugin-push-notifications/types'

window.pushNotification.registration(
  (token: string) => {
    console.log(token);
  },
  (error: string) => {
    console.error(error)
  }
) as PushNotification

How test

iOS

If the user has allowed the sending notifications, then in the status you will receive a token, then do whatever you want: send the token to your server, or test sending push notifications through the Knuff app.