Codementor Events

Build WordPress Client App with React Native #24 : Setup Firebase Push notification [iOS]

Published Feb 14, 2020
Build WordPress Client App with React Native #24 : Setup Firebase Push notification [iOS]

This series intends to show how I build app to serve content from my WordPress blog by using react native. Since, my blog is talking about react-native, the series and the articles are interconnected. We will learn how to set-up many packages that make our lives comfortable and learn how to deal with WordPress APIs. Here, the most prominent features talked about in the book are the dark theme , offline mode, infinite scroll and many more. You can discover much more in this series.this inspiration to do this tutorial series came from the React Native App Templates from instamobile

In case of wanting to learn from the beginning, all the previous parts for this tutorial series are available below:

for setup push notification in iOS require apple developer account (99$/year) first we get a certificate from developer dashboard then add the certificate to firebase then add Firebase messaging pod then activate push notification on iOS

Configuring APNs with FCM

The Firebase Cloud Messaging APNs interface uses the Apple Push Notification service (APNs) to send messages up to 4KB in size to your iOS app, including when it is in the background.

To enable sending Push Notifications through APNs, you need:

An Apple Push Notification Authentication Key for your Apple Developer account. Firebase Cloud Messaging uses this token to send Push Notifications to the application identified by the App ID. A provisioning profile for that App ID. You create both in the Apple Developer Member Center.

Create the authentication key

This section describes how to generate an authentication key for an App ID enabled for Push Notifications. If you have an existing key, you can use that key instead of generating a new one.

To create an authentication key:

In your developer account, go to Certificates, Identifiers & Profiles, and under Keys, select All.

Click the Add button (+) in the upper-right corner.

Enter a description for the APNs Auth Key and under Key Services, select the APNs checkbox, and click Continue.

Click Confirm and then Download. Save your key in a secure place. This is a one-time download, and the key cannot be retrieved later.

If you’d like to verify that your APNs authentication key is set up properly and is accepted by APNs, try sending a test push notification.

add the certificate to firebase

next step we add certificate to Firebase console goto cloud messaging setting

upload certificate to app that we want then add Key ID same with Team ID

we all done on Firebase side now Firebase server can send message to APN

Setup in Device

next we goto setup our app to handle push notification

first add firebase messaging pod to Pod file

pod 'Firebase/Messaging'

then run cd ios ; pod install

activate push notification in Xcode

next we open our app on XCode then activate push notification in Signing & Capability hit + Capability

then search and add push notification

last step we activate messaging on Appdelegate.m first import Firebase Notification lib

#import "RNFirebaseNotifications.h"

then we activate lib .by add code below near Firebase lib

if ([FIRApp defaultApp] == nil) {
    [FIRApp configure];
    **[RNFirebaseNotifications configure];**
  };
    **[[UNUserNotificationCenter currentNotificationCenter] setDelegate:self];**
  return YES;
}
**- (void)application:(UIApplication *)application didReceiveLocalNotification:(UILocalNotification *)notification {
  [[RNFirebaseNotifications instance] didReceiveLocalNotification:notification];
}**

Summary

in this chapter, we learn how to setup Firebase push notification on iOS also set up a certificate and finish everything on Xcode

Also published on Medium.

Discover and read more posts from Krissanawat Kaewsanmuang
get started