Firebase is a mobile app development toolkit published by Google that can perform many different functions. In this article, we will look at how to implement Push Notifications using Firebase Cloud Messaging (FCM).

Account creation and Project settings

To get started, you will first create an account and configure your application using Firebase console. After creating the project, open Project settings (gear icon) and then follow the steps for adding iOS and Android apps to the project. During this setup you will download config files for both platforms: [GoogleService-Info.plist] for iOS and [google-services.json] for Android. The config files are used by firebase at runtime to link your app to your firebase account. You will need to bundle these config files and add the Firebase SDK to each app.

For iOS, there is additional configuration required to enable push notifications. In the Firebase console Project settings, select "Cloud Messaging" and the "iOS app configuration" section should appear. Here you have two options for configuration: APNs Authentication Key and APNs Certificates.

Using certificates is tricky. You first create the certs for both development and distribution from the Apple developer portal, then need to download and export them as .p12 files from your Keychain Access app (Mac OS is required here). After getting them uploaded correctly, there are still headaches to this approach. Using the Firebase console to send test notifications uses the Development cert, however if you use the FCM API to send notifications from your own backend it will always use the Production cert for the notification (regardless of you having your own development backend environment). This means that the notification will only appear on your device if you have signed the app for Distribution, which is problematic for developing and testing internally.

Instead of having to deal with these signing compatibility issues, the recommended approach is to use an APNs Authentication Key. You need to create just one key in the Apple developer portal, export it as a .p8 file from your keychain, and upload it to the Firebase console. This key is compatible with both Development and Distribution provisioning profiles which simplifies things considerably.

App code & Firebase Tokens

In your app code you will need to make a call to initialize the Firebase SDK during startup. For native apps, there is code provided in the app creation step. For hybrid apps, there are plugins available that handle this for you (I have used and recommend this same plugin handles that for you as well).

Firebase tokens, also sometimes referred to as Registration ID's, are special identifiers that uniquely identify a mobile device and will be used to send our notifications. Your app needs to use the sdk to call "getToken". You will need to provide logic to handle saving and uploading the token to your backend. You should also use the SDK to register a callback function with "onTokenRefresh". Be aware that Google may at some point expire an FCM token, and in that event the onTokenRefresh method will be invoked to inform your app of the newly generated token. Your app should handle replacing and updating that token through to your backend as well.

Notification Icons

On iOS the notifications will appear on the device and display them with your app icon. For Android, push notification icons are different from the app icon and must be provided separately. The standard here is to use an alpha grey scale image, and apply a color to the icon using either hard coded in the AndroidManifest.xml file or dynamically in the notification payload. Something to keep in mind with Android icon color is that you do not have full freedom to use any color! Whatever color you set will be overridden by Android to ensure that it has a good contrast. In my example below, the color I specify in the FCM payload (#96c93e) is changed when displayed on my Android phone (#508400).

Android Studio provides a tool for generating the different icon resolutions. Right click on your project folder and select New > Image Asset. Select "Notification Icons" for the Icon Type, then for Asset Type choose "Image" and choose a file for Path:

You then can specify the dynamically sized icon to use in the AndroidManifest.xml file:

<meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="@drawable/notification_icon" />

Sending Notifications

There are generally two options for generating push notifications from your backend: SDK or rest call. The here will instruct you on how to send push notifications to individual devices.

Alternatively, you may use the FCM REST API ("raw protocols") to send notifications using a standard POST web request. There are currently two versions of the REST API. The legacy version is the only one that supports "multicast" messaging (send a notification to multiple devices with one POST). You must include your Firebase Server key (found in Firebase Console > Project settings > Cloud Messaging) in the auth header. An example request looks like this:

POST: https://fcm.googleapis.com/fcm/send
 Headers:
 Content-Type: application/json
 Authorization: key=YOUR_FIREBASE_SERVER_KEY_HERE
 Body:
 { 
   "registration_ids": ["YOUR_FCM_TOKEN_HERE"],
   "content_avaliable": true,
   "priority": "high",
   "notification": {
       "title": "Notification Demo",
       "body": "Testing push notifications!",
       "color": "#96c93e"
   }
 }

With everything configured correctly, you should be able to send push notifications from your server and see them appear on your device!