Firebase Push Notifications in Ionic 6
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 => truedef capacitor_pods
pod 'Capacitor', :path => '../../node_modules/@capacitor/ios'
pod 'CapacitorCordova', :path => '../../node_modules/@capacitor/ios'
endtarget '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