Learn to add Push notifications to your Ionic app with Capacitor and Firebase. We will integrate both iOS and Android in this tutorial!

---

To send push notifications to your users with Ionic and Capacitor you don’t need a specific service, but you need to configure a bunch of things upfront to make it work.

In this tutorial we will integrate Push Notifications using Firebase, since Firebase is basically required for Android anyway and you can easily use it to send our notifications, even without using the database at all!

Another way to integrate push would be to use a service like OneSignal, which is a great alternative as well!

Ionic Capacitor Setup

First of all we will create the Ionic app with Capacitor enabled and directly specify our package id which is the ID you usually used within your config with Cordova, and what you use within your iOS Developer Portal and for Android as well. It’s basically the unique identifier for your app.

We can also build our app and add the native platforms already since we need to work on them in the next steps, so go ahead and run:

ionic start pushApp blank --type=angular --capacitor --package-id=com.devdactic.devpush
cd ./pushApp
ionic build
npx cap add ios
npx cap add android

If you already have an app you can also simply change the capacitor.config.json to include your appId (which is automatically set with our command above), but if your native folders already exist you would have to replace the id in all files where it appears as well since Capacitor only creates the folder once, and won’t update the id itself!

Inside the capacitor.config.json you can also specify to update the badge count of your app, play sound on push and show an alert when a notification arrives, so that’s what we specify additionally inside the plugins block:

{
  "appId": "com.devdactic.devpush",
  "appName": "pushApp",
  "bundledWebRuntime": false,
  "npmClient": "npm",
  "webDir": "www",
  "plugins": {
    "SplashScreen": {
      "launchShowDuration": 0
    },
    "PushNotifications": {
      "presentationOptions": ["badge", "sound", "alert"]
    }
  },
  "cordova": {}
}

Let’s continue with our push configuration outside the app now.

Firebase Configuration

Get started by creating a new Firebase project or use an existing project that you already created for your app.

Simply specify a name and the default options to get started with a new project.

If you have a blank new app you should now see “Get started by adding Firebase to your app” in the dashboard of your app, otherwise you can also simply click the gear icon and move to the project settings from where you can also add an app.

The dialog looks basically the same for both iOS and Android like in the image below, and the only import thing here is to use your package id for the apps!

After the initial step you can download a file, which you can for now simply download anywhere. The files are:

• google-services.json file for Android
• GoogleService-info.plist file for iOS

Now we can configure our two platforms, for which one is a lot easier…

Android Push Preparation

There is only one thing to do for Android, and that’s moving the google-services.json that you downloaded to the android/app/ folder like in the image below.

Really that’s all, you could now start to send out push notifications to Android devices but we also want iOS, which takes a bit more time.

👨‍💻Want to read instead of watch?
Here’s the full Ionic tutorial: https://devdactic.com/push-notifications-ionic-capacitor/

#ionic #firebase #ios #android