[android] heads-up notification

[kayrules]

How to show heads-up notification on android?
I am using the following payload from fcm.

{
    to: <deviceToken>,
    priority: 'high',
    data: {
        custom_data_key: 'custom_data_value'
    },
    notification: {
        title: 'Push notification test',
        body: message,
        click_action: 'fcm.ACTION.HELLO',
        sound: 'default'
    }
}

[evollu]

haven't experimented with this yet. let me try

[evollu]

opened a ticket to fcm. will keep you updated

[peterpme]

@evollu did you happen to see this?
https://stackoverflow.com/questions/37458530/firebase-when-receive-push-notification-did-not-receive-the-popup

We may have to key on didReceiveNotification

no popup will occur if the app is in the foreground either, only background

[evollu]

no. the didReceiveNotification...withHandler is enough.
are you not having banner for iOS? ios should work perfectly

[evollu]

@kayrules
all supported feature is here for now. They've added a feature request but don't know when it will be available
So if you need head up display, send notification with data only and create notification locally is the only way for now.

[kayrules]

Noted and thanks @evollu

[hoiheart]

i send only data, head up notification works fine in foreground and background status
but, can`t recieve notification if i killed app
Could you give me a solution to head up notification for all status?
(status : foreground, background, killed)

[evollu]

what is your payload. what platform?

[hoiheart]

Payload

Android platform

Result (foreground, background, killed)

[evollu]

for android only:

payload = {
      to: 'gcm',
      data: { 
          custom_notification: {
              title: message.title,
              body: message.body,
              icon: NOTIFICATION_ICON,
              color: NOTIFICATION_COLOR,
              priority: 'high',
             id: message.id,
             group: message.group
      } }
    };

[hoiheart]

This works well!
Thank you so much :)

[rtman]

@hoiheart @evollu

Is this still working? Because when I try the above payload I get

Error: Messaging payload contains an invalid value for the "data.custom_notification" property. Values must be strings.

I have tried switching everything to strings and it still says this.

				var payload = {
				      'data': {
				          	'custom_notification': {
				            	'title': 'title',
				              	'body': 'body',
				              	'priority': 'high',
				              	'id': 'id',
				      } }
				  };

Is custom_notification still valid? It looks like it is not working anymore.

[seanadkinson]

Same issue for me... says that "data.custom_notification" isn't valid.

[seanadkinson]

Looking through the source code, I see this:

    public void buildLocalNotification(RemoteMessage remoteMessage) {
        if(remoteMessage.getData() == null){
            return;
        }
        Map<String, String> data = remoteMessage.getData();
        String customNotification = data.get("custom_notification");
        if(customNotification != null){
            try {
                Bundle bundle = BundleJSONConverter.convertToBundle(new JSONObject(customNotification));
                FIRLocalMessagingHelper helper = new FIRLocalMessagingHelper(this.getApplication());
                helper.sendNotification(bundle);
            } catch (JSONException e) {
                e.printStackTrace();
            }

        }
    }

Looks like it may need to just be a JSON string... will try JSON.stringify on the custom_notification value.

[rtman]

@seanadkinson

Hey I saw this too just yesterday.

I think part of my problem was that I was using admin.messaging to send notifications and it does not allow nested objects. However I might try your idea about json.stringify on the nested object.

I noticed yesterday in the example code (FirebaseClient.j) that there is a whole other method for sending notifications using fetch and http. This method implements json.stringify on the payload, are you using this method or admin.messaging?

sendData(token) {
  let body = {
  	"to": token,
    "data":{
  		"title": "Simple FCM Client",
  		"body": "This is a notification with only DATA.",
  		"sound": "default",
  		"click_action": "fcm.ACTION.HELLO",
  		"remote": true
  	},
  	"priority": "normal"
  }

  this._send(JSON.stringify(body), "data");
}

_send(body, type) {
	let headers = new Headers({
		"Content-Type": "application/json",
		"Content-Length": parseInt(body.length),
    "Authorization": "key=" + FirebaseConstants.KEY
	});

	fetch(API_URL, { method: "POST", headers, body })
		.then(response => console.log("Send " + type + " response", response))
		.catch(error => console.log("Error sending " + type, error));
}

[evollu]

Firebase should stringify nested object itself automatically.
Is it a breaking change then?

[rtman]

Hey @evollu

I spoke to firebase support and they said this:

As far as I know, there are no changes in the structure of the payloads in FCM and 2-level JSON is not supported.

So they seem to think nested objects have never been supported.

I was using admin.messaging to send my payload. I also wasn't JSON.stringifying the payload. Could this be the issue?

[rtman]

Just tried to JSON.stringify the payload with admin.messaging() and can confirm that it does not work.

[rtman]

OK I can confirm that this does work still but only with fetch send function in the example. It does not work with admin.messaging.

Here is what I am doing:

    _send(body, type) {
        let headers = new Headers({
            "Content-Type": "application/json",
            "Content-Length": parseInt(body.length),
            "Authorization": "key=" + firebaseConstants.KEY
        });

        fetch(firebaseConstants.API_URL, { method: "POST", headers, body })
            .then(response => {
                console.log("Send " + type + " response", response)
                switch (response.status) {
                    case 500: console.error('Some server error'); break;
                    case 401: console.error('Unauthorized'); break;
                    // ...
                }
                if (response.ok) {
                    return response;
                } else {
                    // push error further for the next `catch`, like
                    return Promise.reject(response);
                    // or another way
                    throw Error(response.statusText);
                }
            })
            .catch(error => {
                console.log("Error sending " + type, error)
            });
    }

Here is my payload:

            let body = {
                "to": this.friend.token,
                "data": {
                    "custom_notification": {
                        "body": message.text,
                        "title": this.friend.name,
                        "color":"#00ACD4",
                        "priority":"high",
                        "id": id,
                        "show_in_foreground": true,
                        "sound": "default",
                        "click_action": "fcm.ACTION.OPEN_NOTIFICATION",
                        "vibrate": 300,
                        "lights": true,
                        uid: this.friend.uid
                    }
                },
                "priority": "high",
                "click_action": "fcm.ACTION.OPEN_NOTIFICATION"
            }
            //"icon":"ic_launcher",
            //"large_icon": "ic_launcher",

            this._send(JSON.stringify(body), "data");

[seanadkinson]

@rtman Just getting back to trying it out, but I don't think you'd stringify the entire payload, just the custom_notification value object. Going to do some testing now though.

I am using admin.messaging btw

[seanadkinson]

@evollu Yeah, they aren't stringify-ing automatically anymore I guess.

@rtman I can confirm that JSON.stringify on the custom_notification value DOES work using admin.messaging.

[rtman]

@seanadkinson

So you did this?

				var payload = {
				      'data': {
				          	JSON.stringify('custom_notification': {
				            	'title': 'title',
				              	'body': 'body',
				              	'priority': 'high',
				              	'id': 'id',)
				      } }
				  };

[seanadkinson]

No. Just the value of custom_notification. See updates to README in this PR: #525

[rtman]

Ah ok I see now.

Any thoughts on which is better to use? Admin messaging or fetch?

Sent from my Google Nexus 5 using FastHub

[seanadkinson]

Functionally the same (as far as I know), but if you are using typescript, the admin.messaging has all the types available for nice auto-complete and static validation.

[rtman]

Cool, I have noticed that the fetch is reliably much faster to show a notification too.

I wonder how it will work with offline situations when I implement that in the future, but I'll cross that bridge when I get to it!

Sent from my Google Nexus 5 using FastHub