{{announcement.body}}
{{announcement.title}}

How to Integrate and Test Push Notifications for Your Apps

DZone 's Guide to

How to Integrate and Test Push Notifications for Your Apps

Let's see how to integrate and test push notifications for your apps.

· Integration Zone ·
Free Resource

Image title

Push notifications

This article will help you understand the importance of push notifications in mobile apps. It will also help you understand how to integrate and test push notifications for your applications.

You might also like:  Browser Push Notification in Angular 5

What Is a Push Notification?

Push Notifications are small automated messages or mobile alerts that pop up on mobile devices. These messages are sent by the application to a user irrespective of whether the user is active on the app. Push notifications are directly sent from the server whenever new content is uploaded. For example, a notification giving an update on a current crisis from a news app.

Importance of Push Notifications

Mobile phones have become inseparable from our daily lives. People use a wide range of mobile applications for various purposes like booking e-tickets, online shopping, etc. Globally, smartphone usage has exploded and currently stands at 51% worldwide. You can refer to in-depth stats here. Given this, mobile app testing has proven to be critical for anyone who wants to make a mark with a digital app.

Push notifications, when executed wisely, help improve user engagement and retention ratio. However, they can be annoying if not implemented strategically. Needless to say, users don’t like their phones cluttered with notifications.

Integrating Push Notifications for Your Android and iOS Apps

As React-native is one of the most popular frameworks for developing hybrid applications, I will demonstrate how you can integrate push notifications using Firebase Cloud Messaging with your Android or iOS apps that have been developed using the React-native framework.

Starting With Firebase

Firstly, you can start off by creating an account on the Firebase site.

If you haven’t created a project yet, do so by clicking on "Add project" in the Firebase console. Follow the steps in the Cloud Messaging section, and add the Android or iOS app.

Download the google-services.json and GoogleService-Info.plist and ensure that they are placed in proper folders.

Configurations for Android

You need to configure the Gradle files by using the latest Firebase dependencies. You can refer to this Official FCM guide.

Here is a sample Gradle file:

App module build Gradle:

Root build Gradle:

Configurations for iOS

To receive push notifications on iOS, you must include either APNs Authentication Key or APNs certificate in Project settings > Cloud messaging in Firebase Console. To understand how to create a push certificate, check out this link.

1. You need to upload two push certificates:

  • One for Sandbox Environment (Development Certificate)
  • One for Production (Distribution Certificate)

2. You need to enable two capabilities in Xcode:

  • Push Notifications
  • Background modes: Check Remote notifications.

Ensure that these are turned on in the certificates as well created in the previous step.

Ensure that you open <YourProject>.xcworkspace file with Xcode.

3. Edit the contents of Podfile as follows:

To learn more about setting up pods, you can refer to this link.

The next step is to install Firebase.

Installing the Firebase Module

Run the command below in the root directory of your project:

 npm install --save react-native-firebase 

The firebase node module can be linked with native applications using the following command:

 react-native link react-native-firebase 

React-native link is an automatic approach to install native dependencies. We will follow the manual approach to avoid any incomplete bindings or any other issue.

Android Setup

  1. Edit the MainApplication.java file:
  2. In the settings.gradle file, add these lines:
  3. Add the dependency in App build gradle:

This setup is ready, and now we can test the notification from the Firebase console on a device.

To test the push notification, go to Cloud messaging section on left Pane > Click on Send your first message > Select your app in the user segment, and click the Send message button.

Setup for iOS

In Project Navigator, right-click libraries > click on Add files to your project >
Go to your Project directory/node_modules/react-native-firebase/ios/ > Select the RNfirebase.xcodeproj file and add it.



Now, for Xcode to recognize the firebase dependencies, follow the steps below:

  1. Navigate to the Build Phases tab and under the Link Binary with libraries click on “+” to add a new library. Then, click the Add button to add the UserNotifications.Framework.
  2. Now again click on “+”. Choose LibRNFirebase.a and add it.
  3. Now switch to Build settings and find Header Search Path, then double click its value and click “+”. Then add the following code there: 
$(SRCROOT)/../node_modules/react-native-firebase/ios/RNFirebase


To clear the cache and build the project, you can use “Cmd + Shift + Enter + K”.

4. Your App delegate file should appear as follows:

You can refer to the detailed script here.

Final Step

It is very important to understand and receive a user’s consent on both iOS and Android platforms before sending them push notifications, especially in iOS. So we need to include a script for it.

Open the App.js file, which is the main component of the React Native app and modify this file as per the following snippets.

Refer to this link for the complete file.

  • The componentDidMount method checks whether the user has granted permission to receive push notifications.
  • If the user doesn’t grant permission you can prompt them to do so by using the requestPermisson method.
  • Once the permission is assigned successfully, the next step is to fetch the token.
  • Already fetched tokens can be retrieved from AsyncStorage. The new tokens are fetched from Firebase and stored in AsyncStorage.

Additional Information — Types of Notifications

Firebase provides support for different types of notifications:

  1. Notification-only messages: They are Display messages or Notifications that are thrown in Device Tray. Firebase SDK manages it automatically.
  2. Notification + Optional data messages: It is similar to Notification-only messages, the only difference is the app receives payload associated with that notification when a user clicks on it.
  3. Data only messages: The app itself handles these types of notifications exclusively. Not a single notification is thrown on the device tray unless the app does it so.

You can learn about it in-depth by referring to the FCM documentation.

As a final step, refer to this file for adding different types of notification listeners and make changes accordingly to your App.js

Now you will be able to receive notifications on both platforms.

Note: In iOS, you need a device to test push notifications as the iOS simulator doesn’t support this feature. An effective way to test is to use online automated app testing platforms that allow you to instantly test push notifications on real devices. Online mobile app testing platforms provide support for testing on both Android and iOS devices as well as emulators and simulators.

Although this procedure is a bit lengthy, I hope the demonstrations above help you save your time in integrating FCM for your React Native app.

Further Reading

The 15 Best iOS and Android Push Notification Platforms [2019]

Push Notifications in PWA (React.js) Using Firebase

Topics:
push notification ,push notifications automation ,push notifications guide ,android push notification ,firebase cloud messaging ,integration ,tutorial

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}