How to Use Firebase to Send Notifications in iOS

Firebase to Send Notifications in iOS

To communicate with users in an effective way, push notifications are introduced on iOS 3.0 around 2009. Push notifications are a great way to reach out to your customers and to marketize. With iOS 11, push notifications became richer with their ease of customization. Many developers trouble while configuring their app for push notifications. Even though it’s one-time configuration for the app, the complexity of the configuration makes developers bang their head against the wall. Don’t worry, you are in right place now to configure your app for the push notifications and send them using firebase without hassle.

In this article, we are going to cover in detail on how do we send push notifications to your device using firebase. Follow are the prerequisites.

1

Firebase (for sending push notifications)

2

XCode IDE (for development of the app)

3

Apple developer account (to create push notification certificates)

4

iPhone Device (notifications won’t work on the simulator. To check notifications, we need device)

In this step-by-step tutorial, we are building our application on Xcode version 8.3 and Swift 3.0.

How Everything Works at a Glance:

When we are sending a push notification to a device, we need device token(consider it as the address to your device). First, we trigger push notifications from the firebase console. Firebase will send the notification to APNS(Apple push notification server). Now, APNS will send that notification to the particular device based on the device token given.

Below are the major steps involved in implementation:

1

Create push notification certificate

2

Set up firebase console

3

Create a Xcode Project & Configure it

4

Test Push notifications

Let’s get started!

1. Create Push Notification Certificate

We need a developer account to create push notification(APNS) certificate. The developer account costs 99$ per year. Hope you are having a developer account. If you are not having it, go and get one. Now go to developer.apple.com and click on Account from the top navigation bar. After logging in, on the home page click on “Certificates, IDs & Profiles”. Now click on App IDs section from the left side panel and create an App ID with bundle identifier. Remember that bundle identifier as we are going to use the same bundle identifier for our project. After creating an App ID, make sure that you enabled the push notification service for that App ID. You can check particular app service enabled or not by tapping on App ID. You can edit them by clicking on edit button below the services.

Assuming you configured App ID properly with push notification service enabled. Moving forward, you need to create a push notification certificate now. While creating push notification certificate it will ask to upload .CSR(Certificate Signing Request) file. So we create .CSR file first.

Open Keychain Access and click on the application menu. From the menu select Certificate Assistant -> Request a certificate from a certificate authority.

A pop-up window will ask to fill email address. Choose to save to disk and continue.

That’s great! you have .CSR file ready to upload. Now come back to developer portal and go to Certificates section. Click on ‘+’ button from the top-rightmost corner. It will ask you to choose certificate type.

Types certificates

Choose option ‘Apple Push Notification service SSL’ either from development section or production section based on your requirement. Please be aware that both certificates have their own purposes. You shouldn’t use interchangeably. Because development APNS server and Production APNS server are different. If you are using production push notification certificate means the notification will come from production APNS server not from development APNS server. So distinguishing and keeping them separate is a good practice. While creating certificate it will ask you to upload .CSR file. We already got .CSR file in above steps. Upload it and complete creation of the certificate.

Your certificate will be ready by this time. Good job!.

Click on download option. After file downloads to your Mac, double click on it. Double clicking on the certificate will add it to KeyChain Access. Go to KeyChain Access and right click on the certificate that just added. You will see the option to export it. Click on it and export it as .P12 certificate. While exporting, it will ask to set a password for your .P12 certificate. If you need more security set it. Otherwise, leave it blank. Leaving it blank considered as No password.

Hurray! We got. P12 certificate finally. This is the actual certificate which we are going to configure in our firebase console. (Not only firebase but also to configure any third party service that sends notifications, we use .P12 certificate in the configuration.)

2. Set up Firebase Console

Firebase is the server that is going to send notifications in our example. In real-time people use different servers to send notifications. Few people send notifications from their own server. Few people use third parties like One Signal. Right now our focus is on the firebase. Open firebase.com and click on ‘GO TO CONSOLE’. Log in with your email ID. On the homepage, you can see the list of projects(If you have any).

Click on +Add project option. Ask you to give project name and country/region. Click on create project.

It goes to the dashboard. Now click on ‘Add firebase to your iOS Apps’. That will show a pop up to fill information related to our app. Fill iOS bundle id with the same bundle identifier that we gave while creating App ID. Other two fields are optional. So you can give them or leave them. Click on REGISTER APP button.

Now it will ask you to download ‘GoogleService-Info.plist’. This file contains firebase project configuration information. Download it for now. We will add this .plist file to our project later.

Click on continue. It will show cocoa pod instructions on how to add firebase SDK to our app. We will add SDK also later after creating our Xcode project.

Click on continue again. Now it will show the swift code to add in our project for configuration of the firebase. This step also we do perform later once project created. Click on Finish. Popup will close and now we re-direct back to the dashboard. This time dashboard will be shown with the project created. So far so good. Project creation on firebase console is done. The only pending is of associating .P12 certificate we created a few minutes back with firebase cloud messaging server. Let’s complete our final step. Tap on three vertical dots on the project. ‘Setting’ option will be shown.

Click on settings. The settings page will be opened. In the settings page, there will be a tab bar with General tab pre-selected. Now Click on ‘Cloud Messaging’ tab.

Scroll down to see ‘APNS certificates’. You can see an upload button with respect to the type of certificate you are about to upload. Click on upload.

Choose .P12 certificate from the directory where we saved a few minutes back. Enter if you set any password while creating .P12 certificate. If there is no password set, leave it blank and click on upload to finish.

Done. Our firebase console setup is also completed. Now let’s move to the third step…

3. Create a Xcode Project & Configure It

It’s time to create our swift application in Xcode. Open Xcode application and click on ‘Create a new Xcode project’ option. Choose ‘Single View Application’. Enter application name and other details.

Click on ‘project settings’ to check whether the bundle identifier is same as the one given while creating AppID and configuring firebase console. All these bundle identifiers should be the same. In case, if you have different bundle identifier change it.

In Target settings, there is one tab ‘Capabilities’ next to ‘General’. Click on it. We should enable push notification capability here. Otherwise, an app can’t receive notification. Once you change PushNotification switch ON, it will be added to entitlement file.

Get the ‘GoogleService-Info.plist’ file that saved while configuring firebase console. Add it to our project folder.

Now we add firebase SDK to our project. We do it by using Cocoapods. So first open the terminal and navigate to the root folder of our project. Run ‘pod init’. This will create a pod file in our project root folder. Podfile looks like this.

(Additional info: You can also follow firebase documentation to add firebase SDK into our application)

Open your Podfile and add:

pod 'Firebase/Core'
pod 'Firebase/Messaging’
Firebase to Send Notifications in iOS

Now Run ‘pod install’ command. It will install firebase SDK into our project. Copy & Paste below code snippets to Make your Appdelegate code looks like below.

import UIKit
import Firebase
import FirebaseMessaging
import UserNotifications

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate{

var window: UIWindow?

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {

if #available(iOS 10.0, *) {
let authOptions : UNAuthorizationOptions = [.alert, .badge, .sound]
UNUserNotificationCenter.current().requestAuthorization(
options: authOptions,
completionHandler: {_,_ in })

// For iOS 10 display notification (sent via APNS)
UNUserNotificationCenter.current().delegate = self
// For iOS 10 data message (sent via FCM)
Messaging.messaging().delegate = self

}
application.registerForRemoteNotifications()

FirebaseApp.configure()

return true

}

func application(_ application: UIApplication, didReceiveRemoteNotification userInfo: [AnyHashable : Any], fetchCompletionHandler completionHandler: @escaping (UIBackgroundFetchResult) -> Void) {

}

func application(_ application: UIApplication, didRegisterForRemoteNotificationsWithDeviceToken deviceToken: Data) {

let deviceTokenString = deviceToken.reduce("", {$0 + String(format: "%02X", $1)})
print(deviceTokenString)

}

func application(_ application: UIApplication, didFailToRegisterForRemoteNotificationsWithError error: Error) {
print("Reason for failing remote notifications: \(error)")

}
}

@available(iOS 10, *)
extension AppDelegate : UNUserNotificationCenterDelegate {

// Receive displayed notifications for iOS 10 devices.

func userNotificationCenter(_ center: UNUserNotificationCenter, willPresent notification: UNNotification, withCompletionHandler completionHandler: @escaping (UNNotificationPresentationOptions) -> Void) {
let userInfo = notification.request.content.userInfo

// Print full message.
print("%@", userInfo)

}
}

extension AppDelegate : MessagingDelegate {
/// This method will be called whenever FCM receives a new, default FCM token for your
/// Firebase project's Sender ID.
/// You can send this token to your application server to send notifications to this device.
func messaging(_ messaging: Messaging, didRefreshRegistrationToken fcmToken: String) {
print("Your FCM registration token: ", fcmToken)

}

// Receive data message on iOS 10 devices.
func messaging(_ messaging: Messaging, didReceive remoteMessage: MessagingRemoteMessage) {

}
}
Firebase to Send Notifications in iOS

Hola!. We reached to the end. If we run the application at this point, it should show push notification authorization pop-up. The user should allow notifications permission. If the user clicks on don’t allow option, the user won’t get push notifications at all.

Authorizing Notifications

Now we are ready to test our push notifications from firebase console. Our app is ready to receive push notifications. Let’s go for our final step i.e., Testing Push notifications.

4. Test Push Notifications

To send a push notification to the particular device we need the device token. When you run the application on your device(Not on a simulator) and if your setup is correct, your console will print Device token and FCM registration token. Both are similar but not the same. Device token we use when we are sending push notifications through some third party services or our own server. We use FCM registration token if we are sending push notifications through firebase console. So in our case, we take FCM registration token which is printed on the console.

In your firebase console project dashboard, you can see ‘Notifications’ option in the left side panel. Click on it. It will show ‘send message’ option. Click on send message option.

Give the message title and label. Choose target as ‘single device’. Paste the FCM registration token taken from Xcode console. Click on send message button. It will ask for the confirmation. Confirm the preview and send if everything is okay.

Boom!!!. We did it. We can see the notification on our device.

(Note: Please update the downloaded project with working bundle identifier & signing identities to run successfully.)

Tips & Tricks

Many times it’s difficult to find out why push notifications are not working and where went wrong. At those times, you can take help of Pusher (third party sender of push notifications).

Conclusion

It’s difficult to engage with users once user exit from the app. In that case, Push notifications provide a powerful way of engaging & marketizing with customers. To implement the push notifications we need push notifications(APNS) certificate from apple. The push notification certificate will be given to server which sends push notifications. The server sends push notifications to APNS based on the APNS certificate provided. Then Apple push notification server will identify the device using the device token and deliver the notification got for that device. Basically, Apple push notification server acts like the postman who delivers notifications to a destination.

Sivajee Battina
I'm an iOS developer with the capability of working on multiple projects at a time. Hunting for bugs and killing them with programming sword is my habit for the most of the time. Love to help, share and learn knowledge through leading platforms like StackOverflow. If 100% bug-free software is impossible, I love to dare that impossibility.
  • Navya Sri Maredi

    Very useful article. Everything was clearly explained with detailed steps. I followed this and it made my work successful. And also can you please write an article on webview vs WkWebview vs safariviewcontroller?

    • Hi Navya,

      Thank you for the really good words. And sure, we will try to cover that topic soon on our blog.