Search code examples
firebasepush-notificationfirebase-cloud-messagingnativescriptnativescript-angular

NativeScript push-plugin not displaying notifications on the notification bar


I'm using NativeScript's push-plugin to receive notifications sent from Firebase Cloud Messaging (FCM):

public constructor(
    private _services: PushService,
) {
    const settings = {
        senderID: "XXXXXXXX",
        badge: true,
        clearBadge: true,
        sound: true,
        alert: true,
        interactiveSettings: {
            actions: [{
                identifier: 'READ_IDENTIFIER',
                title: 'Read',
                activationMode: "foreground",
                destructive: false,
                authenticationRequired: true,
            }, {
                identifier: 'CANCEL_IDENTIFIER',
                title: 'Cancel',
                activationMode: "foreground",
                destructive: true,
                authenticationRequired: true,
            }],
            categories: [{
                identifier: 'READ_CATEGORY',
                actionsForDefaultContext: ['READ_IDENTIFIER', 'CANCEL_IDENTIFIER'],
                actionsForMinimalContext: ['READ_IDENTIFIER', 'CANCEL_IDENTIFIER'],
            }],
        },
        notificationCallbackIOS: data => {
            console.log("DATA: " + JSON.stringify(data));
        },
        notificationCallbackAndroid: (message, data, notification) => {
            console.log("MESSAGE: " + JSON.stringify(message));
            console.log("DATA: " + JSON.stringify(data));
            console.log("NOTIFICATION: " + JSON.stringify(notification));

            alert(message);
        },
    };

    PushNotifications.register(settings, data => {
        console.log("REGISTRATION ID: " + data);

        this.toDeviceToken = data;

        PushNotifications.onMessageReceived(settings.notificationCallbackAndroid);
    }, error => {
        console.log(error);
    });
}

Using this code, I can receive the success message in notificationCallbackAndroid method when I send them from Postman. This is what I get on the logs:

{
    "multicast_id": 8382252195536318747,
    "success": 1,
    "failure": 0,
    "canonical_ids": 0,
    "results": [
        {
            "message_id": "0:1521270133609562%161a06bff9fd7ecd"
        }
    ]
}

However, no notification shows up in the notification bar.

Do we have to use the separate method to show the notification?


Solution

  • The push-plugin will not create/display a notification automatically, it will just notify you when a notification is received.

    You need to use another plugin, nativescript-local-notifications, to create/display it. So, inside your notificationCallbackAndroid and notificationCallbackIOS you should have something like this:

    LocalNotifications.schedule([{
        title: notificationData.title,
        body: notificationData.body,
    }]);
    

    Also, onMessageReceived has been deprecated, now you should only use notificationCallbackAndroid and/or notificationCallbackIOS, so once you update push-plugin to the latest version, you can get rid of this line:

    PushNotifications.onMessageReceived(settings.notificationCallbackAndroid);