The Push Notifications Guide for Ionic & Capacitor
ฝัง
- เผยแพร่เมื่อ 9 ก.พ. 2025
- Learn to add Push notifications to your Ionic app with Capacitor and Firebase. We will integrate both iOS and Android in this tutorial!
🔥Learn Ionic faster with the Ionic Academy: ionicacademy.com/
💎 Get the Built with Ionic Book: builtwithionic...
🎉 Get my Practical Ionic Book: devdactic.com/...
#############################
👨💻Want to read instead of watch?
Here's the full Ionic tutorial: devdactic.com/...
🤷♂️Want more Ionic tutorials?
There you go: devdactic.com/
⚡️Take my 7 Day Ionic Crash Course
ionicacademy.c...
#############################
❤️You can also find me...
on / simongrimm_
on / schlimmson
on / devdactic
#############################
Thanks Simon, these tutorials and Angular tutorials with Ionic in particular are really helpful considering just how many things can go wrong when you're battling through the code alone! Glad to see things are slowly getting easier with the Ionic workflow
You're very welcome!
Thanks! (again, because I always watch this same video every 3 months for a different app)
Thank you Alexis!!
Hi Simon!
Great video!
I spend a couple of hours to understand all process and then found your tutorial.
Thank you for clear explaining and showing all details there
You save me many time!
Great to hear Yurii, always happy to help :)
Thank you Simon for this tutorial. this video is too understanding for beginner. Thank you 😊😊
Glad to hear that!
If we make changes directly to platform files (under ios and android), wouldn't that mean we'd have to keep those folders under source control as well?
thank you for the video!!
My pleasure!
Thanks for this tutorial! Very helpful.
Huge thanks for your tutorial, iOS part is not intuitive at all but you made it as simple as it could be. 👍
Glad it helped!
Thank you for great guide! Also thanks for the hint with the router.
Glad I could help!
Hey Simon, great video. 🚀👍🏻👏🏻 I love Ionic
Great video, thanks for sharing!
You are welcome!
Thank you, Simon. You help a lot!
Glad to hear that Emre!
Amazing Guide!! thank you sooo much
Glad you enjoyed!
Great tutorial! Listeners doesn't work when the app is closed. Any workaround to route the app when the user clicks a notification and the app is closed?
Thanks a lot, it is working like charm😊
all videos is a good, thanks sir.
Glad you like them!
Thank you very much, from Colombia! :D
Glad it helped!
Thanks for the video. It is very helpful. In my case, the app is crashing when I receive something and when the app in background, nothing happens. Do you have any clue?
Thank you for this, I was able to get it running on android, hope to test IOS soon. God willing
Fantastic tutorial man! Can you make some video about send notifications by ionic?
Hi Simon, help with showing the notification when the app is on the foreground ? Thanks
Hi Simon, I tried to follow up step by step, but when build on android i founded error :
C:\xampp\htdocs\SIPADU
ode_modules\@capacitor\push-notifications\android\src\main\java\com\capacitorjs\plugins\pushnotifications\MessagingService.java:9: error: cannot access Service
public class MessagingService extends FirebaseMessagingService {
^
class file for android.app.Service not found
Please what wrong with my code
Great and easy tutorial! How can we get the token on Android to test the push notifications?
@Simon - if we make changes directly to platform files (under ios and android), wouldn't that mean we'd have to keep those folders under source control as well?
Hi Simon, can I do the same thing with cordova instead?
Hello Simon, getting this : Module '"@capacitor/core"' has no exported member 'PushNotification'
could you suggest about it ?
Yes, since Capacitor all the plugins are in their own package, so now it's "npm install @capacitor/push-notifications"
Great video, I don't know why I can see the notifications with the app closed but if the app its open I don't receive anything neither I see them on the log
// Show us the notification payload if the app is open on our device
PushNotifications.addListener('pushNotificationReceived',
(notification: PushNotification) => {
// alert('Push received: ' + JSON.stringify(notification));
console.log('Push received: ', notification);
let alertRet = Modals.alert({
title: notification.title,
message: notification.body
});
}
);
Hi Simon! Can u make a video implementing push notifications with action buttons? I didn't see any information about it !
Thank you!
Hi Simon, can you please create a video on Notification badge on App icon? facing a lot of issues there...
Hi Simon, thank you for the tutorial. Now I can Push Notification from FCM, but is there any possible way to trigger Push Notification right after we insert Document to a Collection in Firestore Database?
Thanks!
No problem!
what about that notification icon? it was white dot on android. how to fix that sir?
Thanks for the video. What can be done do unregister (in order to stop receiving notifications?
I think you should just unregister the listeners: capacitorjs.com/docs/apis/push-notifications#removealllisteners
@@galaxies_dev Thanks. I will check it out.
Hi Simon, thank you for the tutorial!
If have an issue with the router push to the detail page: when the app is closed in the background and gets opened with a push by id, the router push is not working and only the app (startpage) opens.
Sounds strange, but maybe Angular is not yet ready to run the router? Or is there any log in the console?
@@galaxies_dev actually i cannot test push notifications when the app is build over the simulator or a plugged in device, so i have no console information to debug. I think the problem is, that the app first needs to start and then sets the listeners for the pushNotificationActionPerformed afterwards which is too late to perform the router push..
Hi Simon!
Thanks for the tutorial!
Quick question: is it possible to use a custom sound for @capacitor/push-notifications?
Thanks Simon for this video. How can I show a badge in app icon when the app is close not running in background and foreground for android? I have added ["badge", "sound", "alert"] in the capacitor config but it doesn't work. Thanks for your help.
thanks you for this useful tuto.
Glad it was helpful!
Do you have something for the latest onesignal plugin version? I mean the Beta 5.0.0. I just updated my project to that plugin version but mehotds seem to be quite different.
Hi Simon. Great Tutorial but i'm battling since fews days now. I receive notifications when the app is closed, in background or in forground. Works great. But when the app is open and i tap on it the pushNotificationReceived event is not triggered as compared to when it is closed. How can i solve this issue please?
Hi Simon, your video helped me a lot to make the push work.
But on iOS I'm having problems making sounds and displaying the badge.
I did all the configuration as in the video, using presentationOptions but it still didn't work.
I'm using quasar, vue3 and capacitor5, do you have any idea what it could be?
On Android it worked perfectly!
Great tutorial! A few questions...
1. I want to send out custom notifications based on a schedule that a user can select from within an app
2. How could I get a notification to trigger automatically based on an API? For instance, I want to send a notification to an individual Firebase account based on the data that user has requested to see notifications for?
3. Are persistent notifications possible? What happens if a user’s phone restarts or their app updates
You need to handle the logic on your backend for scheduling. So you would have to schedule some kind of job to send out the push in the future, depending on your choice of backend (a cron job, or scheduled inside Firebase cloud functions - many possibilities)
What you mean by persistent? Whenever you receive a push you can store the data if you need to access it later, otherwise the information is gone anyway, and a restart or update isn't all that different then!
Thank you Simon. You are the best. ActionPerformed event doesn't fire if the app was killed, so when user tap on notification iOS just open my app and I unable to retrieve additional payload data (detailId) for open proper detail page. How can I mange this issue?
I have the same issue. I checked the Capacitor docs and says "This plugin does support data-only notifications, but will NOT call pushNotificationReceived if the app has been killed. To handle this scenario, you will need to create a service that extends FirebaseMessagingService, see Handling FCM Messages." and that redirect to Firebase docs and explains to create a service but it is in Java or Kotlin, but nothing about Ionic/Angular, so it's really confusing and I don't know what to do to resolve the issue
Hello, the @capacitor/core Plugin is deprecated, are there any alternatives to connect with Firebase cloud messaging with capacitor?
Yes, you simply need to install those packages on their own and not import them from the Capacitor core!
Thank you for the video But i have a problem, I use Ionic 7 and Capacitor 5 and after many tests, I found that the PushNotifications.addListener('registration'... function doesn't fired.
Can you help me, please?
Hello, i try to figure it out for Ionic Vue project, but with no success. Im stuck at 14:57 min, when you are creating services and page with that command, because in ionic vue it doesnt exist. Can you somehow help me how to continue? Thanks!
AFAIK there is no CLI generate command for Vue or React so you have to create those files manually following the Vue conventions!
Hi Simon thanks for the Tutorial. I've had a few issues with this on Cap 3 I've changed all the imports to fall in line with the updated Capacitor spec, i get a token, but never receive messages on iOS, all the apple certs seem fine ( tried using p12s and just the key file, and both at same time ) no matter what i try, nothing comes in
Did this work for you before Cap 3?
@@galaxies_dev honestly, this is the first time using Firebase, I was using OneSignal until i started a new project where Firebase looked like a shiny new route to take rather than OneSignal from an implementation perspective it seems much simpler then OneSignal, so I never actually got to try on Pre-Cap-3 projects. BUT - having had a fiddle with it, it seems that I had two Firebase projects running and I was trying to deploy notifications from the wrong platform... coz I'm basically an idiot with a tight deadline.. - Thanks for the videos Simon, your content really helps me.
@@galaxies_dev Yeah same for me. I tried all the step that were shown in the video and updated the delegate file from the new capacitor v3 document. Not receiving the notification at all.
Did you find any solution for the mentioned problem ?
Hi, and thank you for the tutorial!
Sometimes the "pushNotificationActionPerformed" listener is not triggered. When the app is closed, after we get a notification, the app is open and the listener is working fine. When the application is in the background and we open a notification, the listener is not triggered. In most cases it works even when the application is in the background. But sometimes it's not triggered, and we don't know what can be the problem
. Do you have any idea or suggestion why sometimes the listener it’s not triggered? Any help would be great. The problem occured when app rest in background for longer time (a day for example). Thank you!
TQ for your tutorial. i would like to know is it possible to open app when receive the notification from firebase? in android or ios TQVM
The user has to click on a message, you can't just force open an app!
hey simon i followed your video step by step but i got an error
node_modules/@capacitor/push-notifications/ios/Plugin/PushNotificationsHandler.swift:32:44: error build: Value of type 'CAPPlugin' has no member 'getConfig'
i am using xcode 14 and ionic 6.20.1 and node 16.17.0
can you please help .
Thanks
It'll help more if you could added the code snippet :)
Great tutorial. I would like to ask what is the correct way to handle token refresh. The token gets outdated in time right ? Is is correct way to register for push notification every time user logs in and then compare the token with the one stored in database and update it if it differs ?
The device token should mostly be unique and won't get invalid, it's not like a JWT. Also, there is no way to "unregister" so you would have to manually remove the information from Firebase where you stored it.
You can read more about the topic in this discussion: github.com/ionic-team/capacitor/issues/1777
Hi Simon, Great video. How can I add a push notification generated from local app when this is on background?
I'm Developing a restaurant app. how to create notification that contains "Your order is ready" when the order done by restaurant ? what is the correct API's to use??
What about the push notifications receive event i have try too much to get receive notification from firabase as above implementation but it work properly when app is closed or in background stage but not working on foreground/open or visible stage so any idea about how to resolve it..thanks..
During my tests I definitely got an event for both, open or closed app! Put a log everywhere and try again, this should definitely be possible!
// Show us the notification payload if the app is open on our device
PushNotifications.addListener('pushNotificationReceived',
(notification: PushNotification) => {
// alert('Push received: ' + JSON.stringify(notification));
console.log('Push received: ', notification);
let alertRet = Modals.alert({
title: notification.title,
message: notification.body
});
}
);
how much money do you need to invest to get this working ?
Great tutor. Enjoying of your videos. But having issue on attaching image to push on IOS. Any information on that?
I'm trying to follow your instructions but is it possible that some of them are out-dated? Like in 13:41 there is no such URL exist. And there is no such code exist in AppDelegateSwift file (the if block doesn't exist)
Yes the code we need to change inside the iOS project might have changed slightly for Capacitor 3, check here: capacitorjs.com/docs/guides/push-notifications-firebase#add-initialization-code
@@galaxies_dev thank you Simon! It helped to me.
Hi Simon, I've been battling with push notifications within an installed PWA on ios complaining about the firebase SDK not being compatible. Is the capacitor a solution/requirement to get push notifications working on a PWA installed on ios?
(note - not an app store app)
Thanks!!! By far the most clear Push Notifications tutorial....
1) Any idea when generate command in ionic/cli will be available for Ionic Vue?
2) Where can one find an Ionic Vue tutorial for the services steps?
1) no sorry, not involved in the Vue development (but a first RC is out!)
2) Also no idea :D
Hello Simon. Your videos are great. I followed the steps of your tutorial and I could receive Android messages, however in iOS 13 I dont receive any message. I think that my iOS configuration is right because the App obtains a token, and also, because when I set up Firebase I connected the App and I receved a notification (in firebase platform), saying that the connection with the device was successfull or the configutation was right. Do you know, whether there are Problems to integrate Push Notifications in iOS13? thank you!
Perhaps there is an issue with the latest version as another comment also had problems on iOS :/
@@galaxies_dev hi Simon. I installed the last version of capacitor and I start to receive push notifications when the app is in background, but in foreground I do not receive any notification.
@@mschannel829 that's an old ios limitation as far as I remember even with cordova and FCM there was the same issue
Hello hi sir,
we can send push notification using REST API to specific user mobile by using ionic cordova and firebase.plz I request to given me some solutions regarding this.
thank you.
can make new push notification using capacitor using android
:) any way to do the action buttons? like in the local notification? using action performed listener to redirect depending on some state conditions but gotta use some explicitly labeled buttons, for user friendliness.
Thank you so so much!
You're welcome!
@@galaxies_dev After resetting my Mac and reinstalling everything, when I try to build the app in Xcode, I get "cannot find InstanceID in scope", as can be seen in the video at 14:12...
Any ideas why this could be the case?
@@maximilianfink5848 I'm wrong too. How to solve ?
@@devzona I still could not figure it out, might try to remove and set up the iOS part on the whole. I'll let you know how it goes
Hi , i'm using "@capacitor/push-notifications": "^4.1.2" for implement push notification in android app but facing issue like if app open that time i can't able to get any event on tap of that notification can you help me how i can retrieve click tapping event when app is open. Currently i'm using below eventlistner for notification.
// Method called when tapping on a notification
await PushNotifications.addListener('pushNotificationActionPerformed',
async (notification: ActionPerformed) => {
console.log('Push action performed- ', notification);
}
);
Well nobody replied to my question a year ago and now I have encountered another issue after nearly two years of using Ioninc Push Notificaitons. The Token is now expired and there are no methods within the Ionic docs to perform a token refresh.
Awesome!!! But can you create a video that can send a push notification with the two devices
You should never send from one device to another as this requires a secret key, which you should keep on a server!
Hello Simon! One question please, i am struggling with this ionic native plugin cordova, it says i didnt install the the plugin but it is! How to solve this error?
Hi Simon! is it true that push notification for IOS do not need the developers program anymore?
Hi simon nice clear video (like all your other video).
I work on a project with asp.core api + web angular + ionic mobile app. It is necessary to send notifications from the internal asp server to company smartphones.
For security policies both the server and the mobile phones are in the local network and do not have access to the internet.
Question1: is there a way to do this without using online services like firebase or azure etc?
Question2: what can I use to send notifications from asp server to internal angular website?
thank you very much .
Thanks Sandro!
1) I'm actually not sure. For example iOS push basically goes through Apple servers before reaching your phone - guess that won't even be possible in your case :/
2) You could use web push probably, but at least for iOS this won't work inside a PWA (only Android right now), but same like before not sure if that would even be possible..
Thk you simon for your video , but it's not working for me .. I have this error : Default FirebaseApp is not initialized in this process com.aardra.cloud. Make sure to call FirebaseApp.initializeApp(Context) first. ! DO you have any idea
Yes, did you put the initializeApp() like described in the video inside your app.module?
Hi Simon, Thank u for the great tutorial. Can I pls know how to store the generated FCM in firebase in order to use it later to send push.
You could simply write it to a collection for which you use the user unique ID as the document and then the FCM stored inside that document!
Hi Simon,
Great tutorial. But we have a small issue.
Whenever the app is open or it's showing in recent apps, the notifications are coming successfully.
But when the user closes the app means it's not in the recent apps, he is not receiving the notifications.
What are we missing here. Can you please help?
Hey Simon, as always you videos is awesome and it helps a lot... but i have a question how can i send cloud based notifications like if today is my birthday then it sends me a push notification on my device......
Hmm you might need something like a cron job inside a server that checks the date each day and then triggers a push notification!
@@galaxies_dev yes exactly can you guide me?
That was a great tutorial. But seems like `pushNotificationActionPerformed` no longer is triggered for android emulator. I can't get it to work and seems like people have had issues with this. I am using this with Angular 16 and Standalone components. Have tried debugging it in multiple ways, but can't seem to find a solution.
Simmon i have one question, i can choose what user send the notification??
use FCM notification
Can you do notification actions?
Hi Simon, very great video. What I have to do to see in firebase console if a user has opened a notification? Here I see always 0%.
Hmm I don't know about an easy way, but you should usually store the device token in the DB so then you know if someone accepted push!
so you meant to say that in order to display push notification in android and ios, I have to download and install a file to my capacitor app? so whats the difference of switching cordova to capacitor if its still the same?
Capacitor and Cordova have different philosophies, this can't be described just by the example of one plugin!
does anyone know of a tutorial that uses capacitor push notifications and azure notification hubs? not sure why it's so hard to find
Thanks Simon, will AWS SNS will be advised which in-turn use Firebase ?
Haven't used AWS SNS so far, but you can create push notifications on many different ways!
Hi Simon. I'm getting this error message can you help me with it [Firebase/Messaging][I-FCM012002] Error in application:didFailToRegisterForRemoteNotificationsWithError: remote notifications are not supported in the simulator
Amazing work Simon. I am able to get push notications following this tutorial but I observed that I only get notifications when app is running in background not when user is currently using app. Can you help me in solving this issue?
// Show us the notification payload if the app is open on our device
PushNotifications.addListener('pushNotificationReceived',
(notification: PushNotification) => {
// alert('Push received: ' + JSON.stringify(notification));
console.log('Push received: ', notification);
let alertRet = Modals.alert({
title: notification.title,
message: notification.body
});
}
);
// Show us the notification payload if the app is open on our device
PushNotifications.addListener('pushNotificationReceived',
(notification: PushNotification) => {
// alert('Push received: ' + JSON.stringify(notification));
console.log('Push received: ', notification);
let alertRet = Modals.alert({
title: notification.title,
message: notification.body
});
}
);
Hello. Can't seem to find it but from which minute is the android aspect? Can't tell
Hello, @Simon Grimm! Could you please share with us if there is a way to make the push notifications work if the device is locked and the phone sleeps (the screen is black)?
That's exactly what push notifications are for - they arrive at the OS level so you should see them on the lock screen anyway!
@@galaxies_dev I agree but I followed the whole tutorial and they work perfectly only if the device is not locked. If I lock the device and the screen goes black, they popup only if I press the lock button to unlock the phone.
Hello Simon! Thank you as always! By the way, move all the project for the first time to iOS and now i'm having an error on build because of this, does it sounds you? The library i am using is: cordova-plugin-fcm-with-dependecy-updated (Ionic 5 + cordova). Dont know how to face it, it doesnt work what i found googling:
** BUILD FAILED **
The following build commands failed:
CompileC ..../manel/Documents/ionic_projects/project/platforms/ios/Project01/Build/Intermediates.noindex/Project01.build/Debug-iphonesimulator/Project01.build/Objects-normal/x86_64/FirebaseAnalyticsPlugin.o /Users/manel/Documents/ionic_projects/project/platforms/ios/Project01/Plugins/cordova-plugin-firebase-analytics/FirebaseAnalyticsPlugin.m normal x86_64 objective-c com.apple.compilers.llvm.clang.1_0.compiler
CompileC ..../manel/Documents/ionic_projects/project/platforms/ios/Project01/Plugins/cordova-plugin-fcm-with-dependecy-updated/AppDelegate+FCMPlugin.m normal x86_64 objective-c com.apple.compilers.llvm.clang.1_0.compiler
(2 failures)
xcodebuild: Command failed with exit code 65
[ERROR] An error occurred while running subprocess cordova.
Thank you in advance sir ;)
Hi Simon, how are you? In Capacitor V3 not working this same, for me not working the package @capacitor/push-notifications :/. Did you work with that package?
Don't think I've tried it with v3 but not sure what should have changed :/
I am getting "remote notifications are not supported in the simulator". Do you know how to solve it? I am using XCode v13.3. Thanks!
I guess you simply can't test push notifications inside the simulator!
What version for capactior push are you using here Simon? I have been trying to add my event listeners to my project and they only fire for android(ios does not fire onReceived or onAction) using ios core 2.4.1 package. They don't fire on either notifications received or opened, no matter what state the app is in(foreground, background, dead).
Great tutorial Simon - helped me out a lot. Couple of burning questions I'm trying to find answers for:
1. If user turns off Push Notifications through the OS app settings is there an event we can listen for, so we can then revoke the push token on our backend system?
2. Is there an event we can listen for when a user clears the Notification without tapping on it when app is in background? i.e. so we can then clear badge count.
3. Can you point me in the right direction for getting Push analytics working through Firebase?
Thanks
1) No not that I know of. But your backend will receive an error when sending the push I think, perhaps you can handle it from there.
2) Also never saw an event for that, but you could query them from within the app to see if they were removed: capacitorjs.com/docs/apis/push-notifications#getdeliverednotifications
3) Haven't used that before :/
Thankyou sir
Hello, thank you for this, how to push universal link ?
Ohh Simon thank you for this tutorial, it's great, i had a problem when i compile to Android Studio, capacitor create 2 package. any way thank...
@Simon Grimm
Thank you Simon
I have one question for push notification.
I "turn off" push notification of android Apps in android settings
But when a return value is received, it's always true.
can you tell me why?
==================
const permissionResult = await PushNotifications.requestPermission();
return permissionResult.granted;
hello simon a query the screen oritation in capacitor is equal to cordova to implement it?
Yeah you can query it the same way!
@@galaxies_dev ok, as in the documentation it is with a capacitor and the example is within androiManifest .. and in cordova it is within app.component.ts, that's why it is my question
hi Simon, you are a great person thank you so much for your tutorials they are very helpful and well explained.
I am trying to make push notifications form firebase but i got an error TypeError: Cannot read property 'requestPermission' of undefined
TypeError: Cannot read property 'requestPermission' of undefined.
This error popup at the first when i try to ask for notification permission do you have any idea what could be the problem is, here is my packages:
"@capacitor/android": "^3.0.1",
"@capacitor/app": "^1.0.1",
"@capacitor/core": "2.4.7",
"@capacitor/haptics": "^1.0.1",
"@capacitor/ios": "^2.4.7",
"@capacitor/keyboard": "^1.0.1",
"@capacitor/status-bar": "^1.0.1",
Thank you.
Hey simon great video! I have one doubt, how to stop getting notifications from fcm when the user changed the settings to stop notification.
You can either toggle this in the device settings then or remove the FCM ID your previously stored for that user!
Save the FCM token along with is_notifications_enabled: boolean for example to your server-side database. That way when you loop through the array of users, you do a check first to see if their push notifications are enabled. If they aren't, then you skip that user.
Hey everybody, i've got it working like i want to but is it possible to request date like "sent/received/opened" from firebase? Help would me mush appreciated.
on android device notification show in notifications tray but does not popup even in your tutorial it does not pop up how to fix this
Also make a Video on Push notification Icons.