How to Send Push Notification via Firebase

Hello,

This post is about Push Notification (For android because I just tried on android device). I will be send push notification to my virtual device end of this post. I used firebase for send.

I skipped create a new project part. Let’s get start. Firstly, I created new project on firebase portal. I opened https://firebase.google.com/ and clicked Get Started button for start create process. The screenshot is as follows.

After this, I clicked Add Project button on the next page and a new pop-up form opened on my browser. I entered project name and selected analytics location. Finally, I accepted term’s of use before clicking to create button. Now, we have a firebase project. The pop-up form’s screenshots is as follows.

After created project result screen will be as follows.

I clicked Continue in this pop up and then clicked Cloud Messaging button in menu of the left hand side in the next page.

After created a new firebase project, I returned to my react-native project. I opened my project with VS Code. (You can use different Ide after this step.) I opened AndroidManifest.xml (The location is /android/app/src/main/) in react-native project and copied package name. The screenshot is as follows.

In this step I will add firebase to my react-native application. After copied my package name, I returned firebase page. Before I created a new project but I need to enter package name from my react-native application. You can think like an relation. I paste my package name on this screen. The screenshot is as follows.

When I click, firebase gave to me configuration file. I downloaded this file and copied /android/app folder. The screenshot is as follows.

After copied this file, I included react-native firebase package to my react-native application. Firebase library is as follows. You should run this command on command prompt.

npm install –save react-native-firebase

react-native link react-native-firebase

When the library included, I configured some documents for this package. Let’s get start to configuration. Firstly, I added two new library in /android/app/src/main/java/com/pushnotificationexample/MainApplication.java file. The added libraries as follows.

import io.invertase.firebase.RNFirebasePackage;
import io.invertase.firebase.messaging.RNFirebaseMessagingPackage;

And then I went GetPackages section in same file and added two new line as follow.

new RNFirebasePackage(),
new RNFirebaseMessagingPackage()

The screenshot of the changes is as follows.

Now, I finished my updates and closed MainApplication.java After close this file I opened /android/settings.gradle and I added the following new two line in this document.

include ‘:react-native-firebase’
project(‘:react-native-firebase’).projectDir = new File(rootProject.projectDir, ‘../node_modules/react-native-firebase/android’)

The screenshot of changes are as follows.

Latest modification is in build.gradle file. (in /android/app/) I added following line in this file.

implementation “com.google.firebase:firebase-messaging:17.3.4”

The screenshot of changes are as follows.

Google wants two new changes. They are for firebase SDK.

For first node should change build.gradle file. (in the /android/ folder.) The screenshot of up to date file is as follows.

Last two lines are for the other build.gradle file. (in the /android/app/ folder) The screenshot of up to date is as follows.

If you finished updates, you can skip next step. It’s not important for now. The screenshot is as follows.

After skip this step, I returned my react-native project and opened App.js file. This file in the root directory. I opened this file and added as follows line. This line for firebase library.

import firebase from ‘react-native-firebase’

After added this library, I added AsyncStorage component between react-native components. Next step for notification methods. Let’s get start.

getToken method;

I used this method for take user token. After this, I added second method for permission request. Permission request method is as follows.

requestPermission method;

Before request permission, we should check the permission. I created another method for this.

checkPermission method;

In summary, Firstly I used checkPermission method. If I have the permission, I need user token. Because of this, I use getToken method. But If I don’t have a permission, I need a permission first. Because of this I use requestPermission method. If user give permission, third method will be getToken method. If user reject request, This notification don’t work. Token is required for notification.

I added this line for trigger to all scenario. The screenshot is as follows.

I used for Genymotion for test. You can use alternatives. I need token for send notification. My device screenshot is as follows.

I clicked to Open GAPPS button top of right corner in the window to install google play store. When It finishes, the device will be restart. After restart, I opened my application and started debug mode for token. For the debug mode, I pressed CTRL + M in Genymotion. After browser opened, I opened to http://10.0.3.2:8081/debugger-u When debugger opened, It will start localhost but we should change localhost to 10.0.3.2 I returned to Genymotion and restarted application. After start, I returned my debugger screen. (in browser) and pressed F12 I checked console tab and I saw user token. The screenshot is as follows.

I copied this token and returned to firebase. Let’s send notification. I clicked Send your first message button in the Cloud Messaging page and create a new notification. The screenshot is as follows.

I filled the second textbox and then clicked Test On Device I used token in this page. The screenshot is as follows.

I selected my application in second step and clicked to next button. The screenshot is as follows.

Click here for github link

Before I wrote this article on another platform in Turkish. That is why some screenshots are Turkish.

Leave a Reply

Your email address will not be published. Required fields are marked *