Hello, when working with mobile apps, especially social networking apps, shopping … the push notification processing must be familiar and necessary. In this article, I would like to introduce through a library to help handle that job.
1. Introduce react-native-firebase library
This is a library, in my opinion is quite good and stable for dealing with firebase and push notifications.
Config library with project:
- Installation: I can run the yarn or npm command, here I use npm
1 2 | npm install --save react-native-firebase |
- After running, I need some separate config for Android and IOS, as well as preparing the config on https://console.firebase.google.com/u/0/ to download the config file for both Android platforms and IOS (For android: google-services.json, for ios: GoogleService-Info.plist).
After configuring and installing the library successfully for the project, we begin to learn and use that library.
Refer to the link: https://rnfirebase.io/docs/v4.2.x/messaging/receiving-messages
2. Request permissions and listen for the notification
- Call to firebase
import firebase from 'react-native-firebase'
- When we want to start sending, receiving and displaying notifications, we must first
requestPermissionAndListen
with the function:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | const requestPermissionAndListen = async () => { try { await firebase.messaging().requestPermission(); // User has authorised and listen permission listenNotifications() // return return Promise.resolve(true) } catch (error) { } // User has rejected permissions return Promise.reject(false) } |
- Check to see if there is a right
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | const permissionEnabled = async () => { try { const enabled = await firebase.messaging().hasPermission(); if (enabled) { // user has permissions return Promise.resolve(true) } } catch (error) { } // User has rejected permissions return Promise.reject(false) } |
- When we want firebase to send notifications, we need to get the token of that machine, we use the
getToken
function
1 2 3 4 5 6 7 8 9 10 11 12 13 | const currentToken = async () => { try { const fcmToken = await firebase.messaging().getToken(); if (fcmToken) { // user has a device token return Promise.resolve(fcmToken) } } catch (error) { } // user doesn't have a device token yet return Promise.reject(null) } |
3. Problems encountered when displaying push notification on Android and IOS
When working with Android and IOS, I noticed there is a difference in the processing of notification display, because it is necessary to handle the notification display while using the app, in addition to the app and in the case of killing the app. (background, foreground, kill app)
On iOS side:
1 2 3 4 5 6 | firebase.notifications().onNotification((notification) => { try { // showNotification } catch (error) { } }); |
Android side:
1 2 3 4 5 6 | firebase.messaging().onMessage((message) => { // handle for Android // showNotificationAndroid // setBadge() }); |
Difference:
Difference | Android | IOS |
---|---|---|
Badge and Notification | Only true for background cases | Auto-display for all 3 cases |
- For IOS: Based and the information returned by firebase, will display the corresponding, title, message and badge respectively.
Action
1 2 3 4 5 6 7 | firebase.messaging().onMessage((message) => { // Process your message as required // handle for Android // showNotificationAndroid // setBadge() }); |
Display
1 2 | firebase.notifications().displayNotification(new_notification).catch(err => console.error(err)); |
- For Android side: Can not handle the display of the correct badge returned in all 3 cases (TH kill app and foreground, we have to handle properly from the display to the corresponding badge).
Treatment
1 2 | AppRegistry.registerHeadlessTask('RNFirebaseBackgroundMessage', () => PushNotificationHandler.bgMessaging) |
Handle the notification display
1 2 3 4 5 6 7 8 9 | const localNotification = new firebase.notifications.Notification() .setNotificationId(data.notificationId) .setTitle(data.title) .setData({ data }) .setBody(data.body) .android.setChannelId(ANDROID_CHANNEL_ID) .android.setSmallIcon(SMALL_ICON) return firebase.notifications().displayNotification(localNotification); |
4. Handling actions with notification
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | // when a notification is clicked / tapped / opened // App in Foreground and background this.notificationOpenedUnlistener = firebase.notifications().onNotificationOpened((notificationOpen) => { // Get the action triggered by the notification being opened const action = notificationOpen.action; // Get information about the notification that was opened const notification = notificationOpen.notification; firebase.notifications().removeDeliveredNotification(notification._notificationId) clickNotification(notification) }); try { // App Closed const notificationOpen = await firebase.notifications().getInitialNotification(); if (notificationOpen) { // App was opened by a notification // Get the action triggered by the notification being opened const action = notificationOpen.action; // Get information about the notification that was opened const notification = notificationOpen.notification; firebase.notifications().removeDeliveredNotification(notification._notificationId) clickNotification(notification) } } catch (error) { } |
Above are a few introductions about handling push notifications in react native, depending on the version, there is a slight change, so you should read more on the firebase homepage (The current RN version I use in this article is) 0.59).