Create your own
Lesson illustration

Setting Up Android Push Notifications with Firebase

In the previous lesson, we successfully configured the iOS side of your application to receive push notifications by setting up the necessary capabilities in Xcode and creating an APNs key in the Apple Developer portal. Now, we'll turn our attention to Android and complete the platform setup.

Today's objective is to configure your app for push notifications on Android. This process revolves around Firebase, Google's mobile application development platform. We will create a Firebase project, register your Android app with it, and integrate the necessary configuration file. This will enable Firebase Cloud Messaging (FCM), which serves a similar role for Android that the Apple Push Notification service (APNs) does for iOS: it acts as the central broker for routing notifications from a server to your users' devices.

Step 1: Create a Firebase Project

Our first step is to set up a project in the Firebase console. This project will be the central hub for managing Google services for your application, including Cloud Messaging. If you already have a Firebase project you wish to use, you can skip to the next step. Otherwise, you will need to create a new one.

The official Capacitor documentation provides a straightforward guide for this initial setup.

Using Push Notifications with Firebase in an Ionic + Angular App

This guide from the Capacitor documentation walks through the necessary Firebase setup. We will start by creating the project itself.

Follow the instructions in the section Creating a Project. This involves visiting the Firebase Console, clicking "Add project", and choosing a name for it.

Step 2: Register Your Android App with Firebase

With the Firebase project created, you now need to tell Firebase about your specific Android application. This registration process links your app's unique package name to your Firebase project, ensuring that notifications are sent to the correct application.

The video below gives a clear and concise walkthrough of adding an Android app to your Firebase project and downloading the required configuration file.

The Push Notifications Guide for Ionic & Capacitor

This video by Simon Grimm provides a helpful visual demonstration of the Android setup process within the Firebase console.

Watch the segment from project setup where the presenter adds an Android app. During this step, you will be prompted for an "Android package name". It is crucial that you use the appId you defined in your capacitor.config.ts file for this value (e.g., com.mydomain.myappname). This is the unique identifier for your application on the device and in the Play Store. You can skip the optional step of providing a SHA-1 certificate hash for now; it's not required for basic push notification setup. After registering, proceed to the next step in the Firebase console's setup wizard.

Step 3: Add the google-services.json File

After you register the app, Firebase will prompt you to download a configuration file named google-services.json. This file contains all the necessary keys and identifiers (like your project ID and API key) that the Firebase SDK on Android needs to securely connect to your Firebase project from the user's device.

You must download this file and place it in the correct directory within your Capacitor project's native Android folder.

Using Push Notifications with Firebase in an Ionic + Angular App

The Capacitor documentation specifies exactly where this file needs to go.

Read the section titled Download and Use. As instructed, download the google-services.json file and move it into the android/app/ directory of your project.

The final location should look like this in your project structure:

The `google-services.json` file must be placed in the `android/app` directory, alongside files like `build.gradle`.

Once this file is in place, the core configuration is complete. The next time you build your Android app, Google's build tools will automatically process this file and make the configuration available to your application at runtime.

A Note on Gradle Dependencies

You might notice that some tutorials suggest manually adding Firebase dependencies to your android/build.gradle and android/app/build.gradle files. With Capacitor, this is typically not necessary.

The @capacitor/push-notifications plugin is built to simplify this process. As the Capacitor documentation notes, the plugin itself declares a dependency on firebase-messaging in its own Gradle file. When your Android project is built, Gradle resolves these "transitive dependencies," automatically including the necessary Firebase libraries. This is a good example of how the Capacitor plugin ecosystem aims to abstract away platform-specific boilerplate configuration, allowing you to focus on the cross-platform logic.

After adding the google-services.json file, it's always a good practice to sync your project to ensure everything is correctly loaded. You can do this by running:

bunx cap sync android

This command will update your native project, check for dependencies, and ensure your configuration is ready for the next build.

Conclusion

In this lesson, you've completed the Android-specific configuration for push notifications. By linking your app to a Firebase project, you've enabled the powerful Firebase Cloud Messaging service to handle notification delivery.

Let's review the key steps:

  • You created a new Firebase project to serve as the backend for Google services.
  • You registered your Android app with Firebase, using your appId from capacitor.config.ts as the package name.
  • You downloaded the google-services.json configuration file and placed it in the android/app directory.

With both iOS and Android platforms now fully configured, we are ready to write the client-side code. In the next lesson, we will dive into your React application to implement the logic for requesting user permission for notifications, retrieving the unique device token, and displaying incoming messages.

Can't find a good explanation? Sign up and we'll make it for you

Sign up