IPH Technologies
Software & App Development company
Select Page

A push notification is a short message that appears as a pop-up on your desktop browser, mobile home screen, or in your device notification center from a mobile app. Push notifications are typically opt-in alerts that display text and rich media, like images or buttons, which enable a user to take a specific action.

Organizations use push notifications as a marketing or communication channel, but they can also be used as a security mechanism.

In this blogs we are create a project for push notification in react native using firebase for Ios device . Start with the firebase firstly we create a firebase project with the project name as same as the bundle id of the project , after that we set the app ios and then we create all the certificates from Apple Developer Account (Identifier , profile , key , device). and then we send the notification through FCM token tester .

In this FCM token tester we need server token , device token , title and body and then send the notification using button pushNotification.

Overview

Step by Step guide for Implementing Push Notifications in iOS using React Native

Goals

  1. Implementing Push Notification in react native using firebase for Ios device 
  2. Creating a FireBase console .
  3. Need to create  certificates on the apple developer account.

Specifications

Push notifications are messages or alerts sent by the makers of an application the user has installed. Below is the high-level pictorial representation of push notification implementation on iOS.Push notifications, also called SERVER-PUSH notifications, is the delivery of information from a software application to a computing device without a specific request from the client.

notificatiction

Push notifications are popular in the world of mobile app development for a number of reasons, including:

  • They enable firms to advertise products and offers at a reduced cost
  • They improve overall user experience
  • They aid in the sending of transaction receipts faster
  • They are used as a way to keep users engaged with our App

There are two main types of notifications for iOS and Android: local notifications and remote notifications. Developers build and configure local notifications within an app. Remote notifications, also called push notifications, enable IT professionals, marketers and developers to send notifications at certain times to specific demographics of their user base.

Starting with  step by step

Step1. Firebase basic configuration. 

Firebase Remote Config is a cloud service that lets you change the behaviour and appearance of your app without requiring users to download an app update. When using Remote Config, you create in-app default values that control the behaviour and appearance of your app.

1. Creating a new project with some name.

2. Add the IOS app with a create project by chose iOS  Platform . 

3. After clicking on the iOS icon we can create a firebase project with the name of Bundle ID of your react native project . 

4. Download the “GoogleService-Info.plist” file and this needs to be added to your project in the next step. Finish the wizard by clicking the next button.

google.plist

Step 2. Open your react native project through Xcode .

Open your iOS project in xcode and add the “Google Service-Info.list” file into your root    folder(PROJECTNAME/ios) of your project from Xcode by right-clicking on the project as shown below,

Step 3. Create an APN Certificate on  Apple developer account and mapping it on firebase project

Xcode →root directory  →signing and Capabilities → Capabilities → add Background + push notification

Step 4 . Create Certificate from Apple developer account 

Register an App Identifier and enable push notification service . For creating an app identifier we use the bundle id of    the project through Xcode and also enable the push notification.

1. Register a key in the Apple developer account with Apple Push Notification Service (APNs) enable 

2. Upload the above key file (.p8) in the firebase iOS project under the APN authentication key section in the firebase.

authKey

6. Adding Real Device for running the project for getting push notification , with the name of device and uuid number.

Step 5. React native code of the  project for implementing push notification .

Here are the code which needs to be done in the project  for push notification to work . 

1. Starting with the package , we need to add some packages .

  • npm install @react-native-firebase/app
  • npm install @react-native-firebase/messaging
  • npm install @react-native-community/push-notification-ios
  • npm install react-native-push-notification
  • npm install @react-native-async-storage/async-storage.

2. Adding some highlighted lines of code in pod file .

pod file

3. Run the command “cd ios “ , “ pod install “ , from the terminal

4. Make the changes in the AppDelegate.mm file . These changes are the part of the package of “@react-native-community/push-notification-ios

  • On the top of the AppDelegate.mm file we add.
             import <Firebase.h>
  • Add me in AppDelegate.m
     -(BOOL)application:(UIApplication*)applicationdidFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
         // Add me — \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\/
    [FIRApp configure];
    // Add me — /\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
    // …
    }

5. Create a folder inside the ios folder with the name Certificate , and inside the these we add two file

  •  AuthKey  = which is downloaded through Apple Developer  Account .
  • mobileProvisionProfile .

6. In the App.js file , we need to use a request to get a token and then notify the notification in the real device .

app.js

 7. Now for getting token through APNs token 

permission

8. Show notification on ForeGround state ,BackGround state, or ExitState.

Step 6. Sending the notification through FCM tester . With the server key (Which is generated after enable the server key) and the Device token (Which is generated after running the project .Then send the push notification from the device using the button push Notification.

Step7. Notification on the Real device.

Conclusion 

Push Notification help companies communicate directly with customer , even when they are not active on the company website.As you have learned in these blogs , push notifications are conceptually simple , But what actually makes an app stand out in the crowd comes down to all of the advance features and abilities . 

It’s critical to keep in mind that push notifications — like all 1:1 messages — are an ongoing interaction with your customers that must be tested and optimised. Make sure to monitor your  customer data over time to understand the effect each push notification has on different user segments and the role push messaging plays in your overall marketing strategy.