Firebase Push Notifications in Ionic 6

Thanks Jamie Street

My previous article regarding Firebase Push Notifications in Ionic 3 is still getting views even though it was published three years ago. But the content in that article is a little bit outdated in the present. So I decided to rewrite an article for push notifications focusing on the latest version of Ionic, which is Ionic 6.

Before going forward with this article, I recommend you go through the first few sections of my previous article to learn how to configure Firebase for push notifications.

Fine. Time to move forward. I did not use Ionic for building mobile apps after Ionic version 3. When I returned to Ionic World, Ionic version 6 was also released. Using Ionic with capacitor is interesting.

Create a blank Ionic application using below command in terminal.

ionic start FirebasePushNotifications blank --type=angular

On the prompt asking to integrate our new app with capacitor, type y and press enter. That will add capacitor and the capacitor CLI to our new application.

Then finish setting the app with the below command inside your project root directory. We can put the app name and package ID there itself.

npx cap init 
? App name: FirebasePushNotifications 
? App Package ID: com.xxx.yyyyy

Before adding native platforms run below command in project root directory.

ionic build

ionic build command creates a web build inside web assets directory that capacitor needs. It is www folder in Ionic Angular projects.

Before adding native platforms to our application, let’s run below two commands. If not, capacitor CLI will prompt to add those libraries when we run our application.

npm install @capacitor/ios
npm install @capacitor/android

Then add native platforms using below commands.

npx cap add ios
npx cap add android

Time to learn the core content of this article… No more need for annoying cordova plugins. Now we have capacitor push notification API.

Install the capacitor push notification plugin using the command below.

npm install @capacitor/push-notifications 
npx cap sync

Go to home.page.ts in your application and import required interfaces and classes from @capacitor/push-notifications as follows.

import {
  ActionPerformed,
  PushNotificationSchema,
  PushNotifications,
  Token,
} from '@capacitor/push-notifications';

Need to request permission to register push notifications. Use below code snippet to do that.

PushNotifications.requestPermissions().then((result) => {
    if (result.receive === 'granted') {
       PushNotifications.register();
     } else {
       // Show some error
     }
});

Use the below code snippet to get the FCM token. We can save that token for sending push notifications to registered devices later.

PushNotifications.addListener('registration', (token: Token) => {
    // Push Notifications registered successfully.
    // Send token details to API to keep in DB.
});

Use the code snippet below for errors during the registration to the push notifications.

PushNotifications.addListener('registrationError', (error: any) => {
   // Handle push notification registration error here.
});

Use the below code snippet to handle the push notification payload when the app is open on the device.

PushNotifications.addListener(
  'pushNotificationReceived',
  (notification: PushNotificationSchema) => {
    // handle the notification payload
  }
);

Use the below code snippet to take the needed action when the user taps on the notification.

PushNotifications.addListener(
  'pushNotificationActionPerformed',
  (notification: ActionPerformed) => {
   // Take needed action on notification tap
  }
);

After adding all the codes above home.page.ts as follows.

How to run our application on Android devices

I will assume that you downloaded the google-services.json file from the Firebase. Move google-servies.json file into the app folder of capacitor android project.

After that, run your application on an android device using the below commands.

ionic build 
npx cap copy
npx cap open android

How to run our application on iOS devices

I will assume that you downloaded the GoogleService-Info.plist file from the Firebase. Open Xcode running below command inside your project root directory and move the .plist file into your Xcode project as instructed by Firebase, ensuring to add it to all targets.

npx cap open ios

Add the Firebase SDK via CocoaPods. The Push Notification API on iOS makes use of CocoaPods. we need to tell CocoaPods to make use of Firebase.To do this, we need to modify the Podfile, which can be found in Xcode under Pods . We need to add Firebase to the CocoaPods provided for our App target. To do that, add pod Firebase/Messaging to your target 'App' section as follows.

target 'App' do 
capacitor_pods 
pod 'Firebase/Messaging'
end

After your Podfile file should be looked like below.

platform :ios, '12.0'
use_frameworks!
install! 'cocoapods', :disable_input_output_paths => true
def capacitor_pods
  pod 'Capacitor', :path => '../../node_modules/@capacitor/ios'
  pod 'CapacitorCordova', :path => '../../node_modules/@capacitor/ios'
end
target 'App' do
  capacitor_pods
  pod 'Firebase/Messaging'
end

Now run command below to update our project with the proper Firebase CocoaPod installed.

npx cap update ios

To connect to Firebase when your iOS app starts up, you need to add the following to your AppDelegate.swift file. First, add an import Firebase on the top of AppDelegate.swift and then add the configuration method for Firebase to initialisation code to your AppDelegate.swift file, in the application(didFinishLaunchingWithOptions) method. Final version of the AppDelegate.swift is as follows.

Our implementation is completed. Try sending test message from the Firebase Console.

Hey, I am Sudarshana. I am available for freelance work. Say Hi on LinkedIn