Make push notifications appear as pop up when app is on background with firebase

Question

I am setting up push notifications with my react native app to android users using Firebase Cloud Messaging. So far I have followed mostly this tutorial. I managed to make push notifications to show on lock screen, and deal with them when the app is on foreground. When app is on background, though, I can't manage to show notification as a pop up. It appear on the notification tray, but it does not show a pop up, like gmail's or whatsapp's notifications do.

I believe my problem is that I am not sending the correct params with the message. I am using firebase console, so it's not very flexible. How can I config (programmatically) an notification to show as pop up upon receival?

EDIT:

Setting Up notification Channel works for newer android devices - tested on Android 8.1 (API level 27).

On older devices - testing on Android 6.0 (API level 23) -, heads up notifications still doesn't appear. I am sending the following message using aws sns console:

{ 
  priority: 'high',
  content_available: true,
  notification: { 
     title: 'hello',
     body: 'Just test',
     android_channel_id: 'test-channel',
     sound: 'default' 
  },
  data: { title: 'title', body: 'body', sound: 'default' }
}

I also sent messages using Firebase console setting Priority High and Sound Enabled, with and without Android Channel Id. None of that worked. The notification arrives silently on tray bar. This discussion shows the same problems, but the solution one person pointed did not work for me. I didn't go through editing the react-native library code a lot. I tried section Problems with older Android version (Foreground), it made heads up appear on foreground, but not on background, which is the intended behaviour here.

Furthermore, is seems that this is an unresolved issue to quite a few people using this react native package (github issue, github issue).

So, I think I should reformulate my question. For Android 7.1 or lower(testing on 6.0):

1. Is setting priority='high' and notification.sound='default' supposed to be enough to show heads up notification? (From my research it should be)

2. Do I need to make any further configuration on my application code to go from notification arriving silently on tray bar to it appering as a heads up?

Solution 1

Thank you @ismailalaoui for contributing to this question. I wasn't able to make notifications to shows as heads up when received by System Tray, so I had to go with a work around. I will show how I did it with react-native-firebase.

For new android devices, you should create a notification channel. Add the following on your App.js

componentDidMount(){
  ...
  const channel = new firebase.notifications.Android.Channel('test-channel', 'Test Channel', firebase.notifications.Android.Importance.Max).setDescription('My apps test channel'); //add this line

  firebase.notifications().android.createChannel(channel); //add this line
}

For older devices, I had to go with a work around. Instead of using notification messages, I used data messages, so you can listen to then on the background. See item 4.

First create a new file bgMessaging.js:

import firebase from 'react-native-firebase';

export default async (message) => {
  // handle your message
  const notification = new firebase.notifications.Notification()
  .setNotificationId(message.messageId)
  .setTitle(message.data.title)
  .setBody(message.data.body)
  .android.setChannelId('test-channel')
  .android.setSmallIcon('ic_launcher')
  .android.setPriority(firebase.notifications.Android.Priority.Max)
  .setSound('default');

  await firebase.notifications().displayNotification(notification);
  console.log({message})
  return Promise.resolve();
}

On your index.js file, add:

import bgMessaging from './src/bgMessaging'; // <-- Import the file you just created

...

AppRegistry.registerHeadlessTask('RNFirebaseBackgroundMessage', () => bgMessaging); 

react-native-firebase is using Headless JS to run the javascript code you defined in bgMessaging. According to the docs you need to add the service to AndroidManifest.xml. On android/app/src/main/AndroidManifest.xml add:

<application>
  ...
  <service android:name="io.invertase.firebase.messaging.RNFirebaseBackgroundMessagingService" /> <!--Add this-->
  ...
</application>

Solution 2

to show notification in pop up like whatsApp , you should set your notification channel importance with IMPORTANCE_HIGH

from the official documentation here

Makes a sound and appears as a heads-up notification

int importance = NotificationManager.IMPORTANCE_HIGH;
NotificationChannel channel = new NotificationChannel(CHANNEL_ID, name, importance)

Edit :

for device running lollipop --> Nougat , you are required to set a vibrate or ringtone to make Heads-up work. However, here's a quick hack that doesn't require VIBRATE permission to produce a head-up notification . link

notificationBuilder.setPriority(Notification.PRIORITY_HIGH);
if (Build.VERSION.SDK_INT >= 21) notificationBuilder.setVibrate(new long[0]);

Comments

[Vinicius]

Thanks for your answer. This worked for android 8.1. For android 6.0, notifications still doesn't appear as heads up. I have edited my question, please take a look.

[Vinicius]

For future reference, this is how notification channels are created on react native with react-native-firebase

[Vinicius]

Where am I supposed to put this code? On my client or my server? Because when receiving notification only messages on background it goes straight to System Tray. Does any part of the code interacts with the notification only message upon receipt? If you meant to include this code on server when sending the message, isn't configure sound enabled an priority high on firebase console enough to do it?

[ismail alaoui]

You are supposed to put this in you notification builder on mobile side !

[Vinicius]

Can you be more specific about it? I've put your code on the notification builder that can be used while the app is running. It did nothing for the notification on background. I am not really familiar with android code. I do take a look inside and can get modifications done, but i need to know what I am looking for. I am using react-native-firebase, so its a lot of library code to be lost with.

[ismail alaoui]

Ah okei well , if you build notification using builder you can use the code a wrote you ! And i also add link to official doc which could help you :)