Nativescript-plugin-firebase: How to show push notifications when app in foreground?

[Zampa98]

I can't show push notifications in my Android app when is in foreground. It work only when it is in background or when the phone is locked.

[EddyVerbruggen]

Did you try this?

Depends a bit on the Android version though.

[Zampa98]

No, I'm using this.

[EddyVerbruggen]

OK, have you tried setting showNotificationsWhenInForeground (see the doc you linked to)?

[Zampa98]

Yes, I done it.
this is my code, but does not work.
Firebase.getCurrentPushToken().then((token: string) => console.log(Current push token: ${token})); Firebase.registerForPushNotifications({ showNotificationsWhenInForeground: true, onMessageReceivedCallback: (message: Firebase.Message) => {

[EddyVerbruggen]

Oh, wait, that's an iOS-only property according to that documentation. I got this mixed up with the local notifications plugin where it's actually possible on Android: https://github.com/EddyVerbruggen/nativescript-local-notifications/blob/9e40c06a5112164536cd2b3d4e8a5f4a4dfbe902/native-src/android/app/src/main/java/com/telerik/localnotifications/Builder.java#L61

I guess you currently can't with this plugin, although it may already show on newer Android versions.. what's your version?

[Zampa98]

what i have to do?

[EddyVerbruggen]

What do you mean? Wait for someone to pick this issue (probably me), or show a custom notification when a notifications is received on Android when the app is in the foreground? Perhaps with nativescript-toast, or nativescript-local-notifications.

[Zampa98]

sorry, I wait yuor solution

[mshanak]

To make the notification works in foreground and background, you need to format the push message ( not this plugin ) correctly.

as explained in the FCM documentation, you need to have two attributes in the message notification key and the data key
The notification key is used when the app is in the background, and the data key is used when the app is opened or when the user taps the notification.

Here is a JSON-formatted message containing both the notification key and the data key:

```{
"message":{
"token":"bk3RNwTe3H0:CI2k_HHwgIpoDKCIZvvDMExUdFQ3P1...",
"notification":{
"title":"you have new comment",
"body":"user Ahmed added a new comment on you post!"
},
"data" : {
"contentId" : "123",
"contentType" : "post"
}
}
}

This is my `addOnMessageReceivedCallback` function (typescript):

    firebase.addOnMessageReceivedCallback(
      (message) => {
        const self=this;
        let contentId:string=null;
        let contentType:string=null;
        let route:string="";

        /** if the app is already open, show a dialog message**/
        if (message.foreground){

          dialogs.confirm({
            title: message.title,
            message: message.body,
            okButtonText: "open ",

            neutralButtonText: "cancel"
          }).then(function (result) {
            // result argument is boolean
            if(result){
              if (message.data.contentId && message.data.contentType) {
                contentId = message.data.contentId;
                contentType = message.data.contentType;
                if (contentType === 'post') {
                  route = 'post/details/' + contentId;
                }


                self.router.navigate([route]);


              }
            }
            console.log("Dialog result: " + result);
          });



        }else{

          /**if the message arrived when the app is in the background, this code is executed when the user taps on the notification **/
          console.log("message", message);

          if (message.contentId && message.contentType){
            contentId = message.contentId ;
            contentType = message.contentType;
            if(contentType==='post'){
              route ='post/details/'+contentId;
            }


            this.router.navigate([route]);


          }

        }


      }

      );

```

[Lehren]

@mshanak
Where do you put this code? In a created hook of your App?
A reference to this results in undefined. I cannot use the router or any Vue functionality in the message callback if I use it in main.js

Also you cannot use the router when you're in an app. You have to use $navigateTo and pass in the component which you cannot get from a notification. Any help is appreciated.

[mshanak]

@lehren the previous example works with angular, you need to modify some lines to work with vue.
The router is used to navigate to the right page when the user tape on the notification

[Firetrip]

we just tried this but it does not work @mshanak
The onmessagereceived callback is called (no matter how you format the message), but it is never shown in the notification tray. any suggestions?

[jalbatross]

@Firetrip

Did you have any progress with this issue? I'm struggling with the same thing right now. The snippet from @mshanak is helpful for displaying the notification data outright but I think the functionality we're looking for is to have the notification show up in the tray/header in the foreground the same way it does in the background.

[Firetrip]

hey @jalbatross sorry for the late respons.
for android we now use another plugin "LocalNotifications" to create a local notification if the app was received in the foreground. the localNotification is shown perfectly :)