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.
cordova plugin add cordova-plugin-push-notificationsOr
Downoload plugin in .zip arcive, unpack and:
cordova add plugin 'path/to/plugin/in/system'And follow the instructions...
Required Cordova version >= 9.0.0
Check via:
cordova -vRequired Cordova iOS platform >= 5.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.
Required Cordova Android platform >= 9.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".
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.
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.
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 iOS "resume" event when the notification was clicked in the background. On Android, such manipulations are not needed, because clicking on a notification will rerender screen (activity).
val resultPendingIntent: PendingIntent? = TaskStackBuilder.create(this).run {
addNextIntentWithParentStack(resultIntent)
getPendingIntent(101, PendingIntent.FLAG_CANCEL_CURRENT)
}Responsible for this action FLAG_CANCEL_CURRENT. Using other flags did not lead to redrawing, but also did not update the data in Activity Extra. Maybe I can find a solution in the future.
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.
It is obligatory to receive the "payload" data must be in the following form:
{
aps: {
alert: {
title: "Hello Alex!",
subtitle: "You pretty boy"
},
payload: "payload 1234"
}
}{
data: {
title: "Hello Alex!",
body: "You pretty boy!",
payload: "payload 1234"
},
priority: "high",
content_available: true
}Importantly, do this without "notification".
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 PushNotificationIf 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.
After receiving the token, you can test push notification directly from the Firebase Console.