Push Notification using Ionic 8, Angular 20, and Firebase Cloud Messaging

Push notifications are an essential part of modern mobile applications, allowing you to engage users with timely updates, reminders, promotions, and personalized content. In this tutorial, you'll learn how to implement push notifications in a mobile app using the latest Ionic 8, Angular 20, and Firebase Cloud Messaging (FCM).

We’ll use Capacitor 5, the official native runtime for Ionic apps, and the Firebase Modular SDK, which is more efficient and tree-shakable than the older namespaced version. You’ll also learn how to configure and test FCM on both Android and iOS devices.

By the end of this tutorial, your Ionic app will be able to:

• Request and manage push notification permissions

• Register and retrieve a device token from Firebase

• Receive foreground and background push notifications

• Handle user interactions with notifications

Let’s get started!

Prerequisites

Before diving in, make sure you have the following tools installed and configured:

🔧 Tools & Accounts

• Node.js v18+

• npm v9+

• Ionic CLI v8+ 

  npm install -g @ionic/cli

   

• Android Studio (for Android builds and emulator)

• Xcode (only if building for iOS)

• Firebase Console account: https://console.firebase.google.com

📱 Testing Requirements

• A physical Android or iOS device (Push Notifications cannot be tested via browser or emulator alone)

• USB debugging is enabled on Android, or the device is paired with a Mac for iOS

Create a New Ionic 8 App with Angular 20

Start by creating a fresh Ionic Angular project using the latest standalone components (Angular 20 no longer uses NgModules by default).

📁 Step 1: Create the App

Open your terminal and run:

ionic start ionic-fcm-push blank --type=angular

Choose Angular as the framework if prompted.

Then move into your project directory:

cd ionic-fcm-push

⚡ Step 2: Initialize Capacitor

Capacitor is now the default native runtime for Ionic apps. Initialize it with your app info:

ionic integrations enable capacitor

Then add native platforms:

ionic cap add android
ionic cap add ios

🧪 Step 3: Run the App

You can test the basic setup in the browser:

ionic serve

To run on a connected Android or iOS device:

ionic cap run android
ionic cap run ios

Update capacitor.config.ts:

const config: CapacitorConfig = {
  appId: 'com.djamware.ionicfcm',
  appName: 'ionic-fcm-push',
  webDir: 'www'
};

Set Up Firebase Project

To use Firebase Cloud Messaging (FCM), you need to create a Firebase project and configure it for both Android and iOS.

☁️ Step 1: Create a Firebase Project

1. Go to Firebase Console

2. Click Add Project, give it a name (e.g., IonicFCMApp)

3. Disable Google Analytics (optional) and click Create Project

📱 Step 2: Add Android App to Firebase

1. In your Firebase project, click Add App → Android

2. Fill in the form:

   • Package name: com.djamware.ionicfcm (or the ID you specified in capacitor.config.ts)

   • App nickname: (optional)

3. Click Register App

4. Download the google-services.json file

5. Place it in your project at: 

   android/app/google-services.json

6. Back in the Firebase console, click Next until you reach the dashboard

🍎 Step 3: Add iOS App to Firebase (optional)

If you’re also targeting iOS:

1. Click Add App → iOS

2. Fill in the form:

   • iOS bundle ID: io.ionic.starter (or match your iOS app ID)

3. Register for the app and download GoogleService-Info.plist

4. Open ios/App/App.xcworkspace in Xcode

5. Drag GoogleService-Info.plist into the App folder in Xcode (select “Copy if needed”)

📦 Step 4: Install Firebase and Push Notification Plugin

Install required packages:

npm install @capacitor/push-notifications
npm install firebase

Sync changes with native platforms:

npx cap sync

Implement Push Notifications in Ionic Angular 20

🧩 Step 1: Configure Firebase Messaging in Angular

Create a Firebase initialization file using the Modular SDK.

🔧 src/environments/firebase.config.ts

// firebase.config.ts
export const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_PROJECT.firebaseapp.com",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_PROJECT.appspot.com",
  messagingSenderId: "YOUR_SENDER_ID",
  appId: "YOUR_APP_ID"
};

⚠️ Replace placeholders with your actual Firebase project credentials from the Firebase Console.

📥 Step 2: Initialize Firebase and Messaging

Update main.ts to initialize Firebase on app startup.

✅ src/main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { RouteReuseStrategy, provideRouter, withPreloading, PreloadAllModules } from '@angular/router';
import { IonicRouteStrategy, provideIonicAngular } from '@ionic/angular/standalone';

import { routes } from './app/app.routes';
import { AppComponent } from './app/app.component';
import { importProvidersFrom } from '@angular/core';
import { firebaseConfig } from './environments/firebase.config';
import { initializeApp } from 'firebase/app';

initializeApp(firebaseConfig);

bootstrapApplication(AppComponent, {
  providers: [
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    provideIonicAngular(),
    provideRouter(routes, withPreloading(PreloadAllModules)),
    importProvidersFrom()
  ],
});

🧠 Step 3: Use PushNotifications API (Capacitor)

Implement push logic in AppComponent.

✅ src/app/app.component.ts

import { Component, OnInit } from '@angular/core';
import { IonApp, IonRouterOutlet } from '@ionic/angular/standalone';
import {
  PushNotifications,
  Token,
  PushNotificationSchema,
  ActionPerformed
} from '@capacitor/push-notifications';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  imports: [IonApp, IonRouterOutlet],
})
export class AppComponent implements OnInit {
  token: string = '';

  ngOnInit() {
    this.registerPush();
  }

  registerPush() {
    PushNotifications.requestPermissions().then(result => {
      if (result.receive === 'granted') {
        PushNotifications.register();
      }
    });

    PushNotifications.addListener('registration', (token: Token) => {
      this.token = token.value;
      console.log('Push registration success, token:', token.value);
    });

    PushNotifications.addListener('registrationError', err => {
      console.error('Push registration error:', err);
    });

    PushNotifications.addListener('pushNotificationReceived', (notification: PushNotificationSchema) => {
      console.log('Push received in foreground:', notification);
    });

    PushNotifications.addListener('pushNotificationActionPerformed', (action: ActionPerformed) => {
      console.log('Push action performed:', action);
    });
  }
}

⚙️ Step 4: Android Configuration

Update native files to enable FCM:

✅ android/build.gradle

Add the Google Services plugin at the bottom:

apply plugin: 'com.google.gms.google-services'

✅ android/app/build.gradle

Add classpath in dependencies:

dependencies {
  classpath 'com.google.gms:google-services:4.3.15'
}

Ensure correct Firebase permissions and services in AndroidManifest.xml.

🧪 Final Steps

1. Rebuild and run the app on a physical device: 

   ionic build npx cap sync android npx cap run android

2. Copy the device token from the textarea.

3. Go to Firebase Console → Cloud Messaging, click Send Message, and paste the token under “Add FCM registration token”.

4. Click Send Test Message and see it appear on the device!

Conclusion

In this tutorial, you learned how to implement push notifications in an Ionic 8 + Angular 20 app using Firebase Cloud Messaging (FCM) and Capacitor 5. You set up a Firebase project, registered native Android/iOS platforms, retrieved the device token, and handled push events directly in your Angular app.

Using modern tools like the Firebase Modular SDK, standalone Angular components, and Capacitor plugins, you now have a clean, up-to-date, and production-ready push notification setup. From here, you can extend this system to support custom topics, user segmentation, deep linking, or even server-side notification triggers.

Test thoroughly on real devices, especially for background notification handling on both Android and iOS.

You can get the full source code from our GitHub.

We know that building beautifully designed Ionic apps from scratch can be frustrating and very time-consuming. Check Ionic 6 - Full Starter App and save development and design time. Android, iOS, and PWA, 100+ Screens and Components, the most complete and advanced Ionic Template.

That just the basic. If you need more deep learning about Ionic, Angular, and Typescript, you can take the following cheap course:

• Ionic Apps with Firebase
• Ionic Apps for WooCommerce: Build an eCommerce Mobile App
• Ionic 8+: Build Food Delivery App from Beginner to Advanced
• IONIC - Build Android & Web Apps with Ionic
• Full Stack Development with Go, Vuejs, Ionic & MongoDB
• Create a Full Ionic App with Material Design - Full Stack

Thanks!