Creating Capacitor Local Notifications with Sound, Icons & Action Buttons

Let's add some cool local notifications to our Ionic app by using the Capacitor core plugin with additional action buttons, custom sound and even images!
🔥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: ionicacademy.c...
🤷‍♂️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
#############################

[@mdomerarafat4611]

Its a good practice that u clear notification with specific notification id for avoiding notifcation update issue .

[@GoldenMashegot]

Please make tutorial on Capacitor Background Task

[@MartinPultz]

Heads up that Background Tasks are not in Capacitor v3 - capacitorjs.com/docs/v3/updating/3-0#background-task-permissions-and-photos-plugins-removed

[@GustavoFernandes0]

Always saving the day. Thanks!

[@galaxies_dev]

Any time!

[@sharifulin]

Hey, thanks for the video. 2 questions for the iOS app: 1) how to set badge 2) how to set icons for actions of notifications? Looking forward for any help here. Thanks!

[@Geograman]

Thanks a lot for this!

[@galaxies_dev]

Glad it was helpful!

[@chamaradissanayake2097]

By set capacitor configuration sound is not supporting to ios. It mentioned in the plugin. We can set it when set notification. It worked for me in that way.

[@rejanerp]

Simon I love you. Thanks

[@mauricenoever]

I use capacitor and next JS for build iOS and Android apps. In android I get a Sound with local notification but with iOS I get no notification sound how I can solve this problem?

[@محمودجبالي-م7ز]

Hi simon. I have important question. Can i use background-runner and listen for a websocket, and when i got a new value i use LocalNotifications? (instead Push-Notifications?)

[@testermobile834]

One more issue with latest capacitor, i am scheduling a local notification after 5 days I am adding the days to a new date object using moment but unfortunately it is not triggered any solutions for this ?

[@carsten.webering]

Thank's nice video. I got my Vue/Vuetify capacitor notifications to work

[@galaxies_dev]

Great 👍

[@eduardidn]

Hat thanks so much for this tutorial

[@galaxies_dev]

No problem 😊

[@mdrakibul7903]

Please help me. How can I update local notification? scenerio: 1. Notification will fire at specific time. 2. When user turn on that notification it will fire. 3. When user turn off that notification it will not fire.

[@brainerhidalgo7353]

I have a question, someone was able to increase the size of the text in IOS by generating it in Android using the "largeBody" property works but in IOS the text is cut

[@rinaxxusu3163]

icons and iconColor works fine, but the sound doesn't trigger on my Xiaomi Mi Note 10 device, nor on the iPhone emulator... is this method deprecated by now, perhaps?

[@cedricradoary1824]

thanks for this tutorial, i have a question, can you say how to add icon in actions button ? i try but that not work

[@danielnavarro8758]

thanks. Simon

[@rupeshkilife]

I am building a hydrib capacitor app where I need to show local notification at a particular time and thereafter I want to repeat every 5 minutes. How can I do it? I am confused between every, at, on, count, etc.

[@adolfoduqueleonfresneda5770]

what about dowload and read pdf using capacitor.. i installed the plugings and when i use.. android studio.. i get a issues.. with cordoba plugins..

[@bodhisatba]

I don't know if you read it, but in chrome, edge and pwa the local-notification is not shown. I've been searching on the net and i don't see where is the error. In firefox it showns :O i'm a little frustrated, i will continue searching. Thanks by the way, great content simon.

[@galaxies_dev]

Never tested on Edge but good to know! And yes I read the comments :)

[@jared4670]

I have local notificaitons working in Chrome on Windows and on Mac for PWA. All the work is done through the service worker.

[@bodhisatba]

@@jared4670 maybe there is a new versión, thanks.

[@miner-vd3qt]

really helpful, keep it up

[@galaxies_dev]

Thanks, will do!

[@adriantocu5818]

Awesome ! Thank you !

[@galaxies_dev]

You are welcome Adrian!

[@pauldavies729]

Would love to know how to do similar notifications when the app is running in background as all of your examples require the app to be running.

[@jared4670]

Send push notificaitons as data only to enable silent notifications. Then when it comes up it launches a local notification. The only way to get action buttons.

[@rvuyyuru]

unable to schedule every day with specific time and date and the message should change dynamically

[@UnknownIdentityDE]

Hi Simon. Nice tutorial. Could you do a similar one for Push Notifications? Here the setup seems to be more complicated as a backend service is required to send out the notifications to Firebase / APNS.

[@galaxies_dev]

Yeah already working on it :)

[@UnknownIdentityDE]

@@galaxies_dev I finished the ionic part with a nice guide provided by the capacitor developers itself: capacitor.ionicframework.com/docs/guides/push-notifications-firebase/. Actually it wasn't that complicated. Now the backend part is pending. Thinking of NodeJS, maybe NestJS..

[@yoandryleon1734]

Is this possible for push notifications?

[@hitishsharma1863]

Hi Simon, I am not able to see attachment in Android, but for iOS it is working fine. I am also not able to see any update from Ionic side. Could you please help me out on this.

[@leonelelimpe9691]

Thanks! Please have you been able to add a progressBar? Available with the cordova plugin, seems to be missing with Capacitor's Local Notifications.

[@ryanholton961]

Great tutorial, is there any way to keep the app running in the background (to run code and fire notifications) that would be accepted by Apple and Android, I see there was a Cordova background mode plugin but it’s sketchy and would be rejected by Apple!

[@galaxies_dev]

Yeah in general I don't think that any plugin right now would achieve that, but if you schedule local notifications, you don't need the app to be running!

[@nahuelleiva8460]

Sorry if I'm too late, I work for a company that has an app published on the App Store and we use this plugin although we had no problems so far with the store, it hasn't been rejected either. That plugin, although it works, brings a little problem on iOS (something I've been struggling with for quite some days. In Android everything works fine tho). Cordova (we use Cordova but I think Capacitor has them too) has two events to check if the app goes to the background or resumes its activity. These are the "pause" and (forgive the redundancy) "resume" events. You should subscribe your app to the "pause" event and inside you'll fire the "enable()" function that comes with the background plugin. Inside the "resume" you should fire the "disable()" event once you bring your app to the foreground. Although the background service seems to "work" and notifications from the LocalNotifications plugin will popup, first, no sound will play on iOS from the notification (this is a bug from the LocalNotifications plugin, not fixed at the moment, the project has been stuck since 2019. I didn't make it work either, I tried a lot of things, nothing worked for me), and (this is the critical part) all phone sounds will be played on the speaker instead of the loudspeaker giving the feeling the volume is too low but is not. This is a problem with the background plugin itself. And another thing is that it can block any app that can reproduce audio, this is KZbin/Instagram/WhatsApp for example, the plugin seems to block the activity of these applications so your audios/videos from WhatsApp/IG/YT actually won't play at all. It looks like the plugin doesn't dispose of your phone resources correctly. To fix the sound problem I use the AudioToggle plugin. This plugin allows you to set the sound on "normal" volume or at "speaker" volume, giving you control of phone sounds. The plugin itself doesn't have much documentation but I think it's enough to understand how it works. And enabling the background service once you detect your app goes to the background solves the problem of sounds not being able to be reproduced on apps. All in all, these are my two cents with this background mode plugin. It kinda "works" but instead you have "to make it work" to function properly.

[@FahimAhmed-gb2zo]

Hello simon , Hope you are well . I want to know that , Can i create the Uploading progessbar (which one give me the uploading progress % )by using this plugin ? Capacitor local notification.

[@hussein-akar]

Great demonstration, Appreciate your hard work... still have an issue using @capacitor/(cli, core, android) 2.4.7 the notification not working !! could anyone help please

[@sergiopenahernandez6858]

Hi ty for the grat video, but i have a problem when i use the method of receivenotification it´s not triggered, do you know why?

[@martinrios5247]

Hi Simon!! Your videos save my life hahaha, one cuestion.. Is there any way in Android to show the popup when the application is in the foreground?

[@galaxies_dev]

I think you can configure this when you initialise the plugin or otherwise simply catch the event and display your toast from there!

[@darrellcardwell7649]

Simon how would I change the action button to just an icon?

[@adriensaulnier2270]

Hi Simon, ty for your video :) Is schedule's "sound" property deprecated ? Cause impossible to make it works... The default sound is always playing. I put my sound into res/raw folder... but nothing to do. "sound" property value must contains prefix, suh '"file://" or "android.resource" ? Ty by advance !

[@inesgomes7805]

Did you found a solution? I can't make the sound work also

[@adriensaulnier2270]

@@inesgomes7805 Hi ! Yes it works for me now. I will give you the correct syntax asap :)

[@inesgomes7805]

Thank you@@adriensaulnier2270 I was able to make it work. but just the sound defined in the capacitor.config.json. If I try to add a new channel It plays nothing. Can you add new channels dynamically ?

[@Fohlken]

Hi. Can you guys please share the code? I can't make the sounds work either.

[@alejobruno2842]

@@Fohlken I need the code too

[@avalanche156]

thank you , very helpful 👍 I wish there was a way to display images dynamically inside of notifications with Cap;acitor ps. kudos on losing that weight in 2023 hhh

[@galaxies_dev]

Thank you - and what do you mean exactly by dynamically and when?

[@avalanche156]

@@galaxies_dev I mean, like whatsapp does on android: it shows preview of an image inside of the notification - if the msg received contained an image

[@terrywindwalker5397]

Hi there, is it possible to have action buttons for push notifications?

Hi Simon, thanks for this tutorial. I have one question. do you have any video that explain how to disable sound (default sound) and disable vibrate from local notification. I tried use the params: vibrate as false and sound null or empty, but does not working. Thank you :)

[@galaxies_dev]

No not that I know of if those won't work :/

[@Tahir-Boxing]

what we would do without Simon in ionic?.... thanks a lot

[@galaxies_dev]

Haha thanks :)

[@Tahir-Boxing]

@@galaxies_dev , sorry for disturbing. Do you have an idea why LocalNotifications.addListener('localNotificationActionPerformed'....is not firing in ios? in Android its working as expected.... thanks in advance

[@tigerebevinmasevenza9761]

Hi Simon, thanks for the tutorial unfortunately the event listeners do not work when the app is in the background or when the device is locked are you having the same issue?. I know you tested the events with the app in the foreground. Thanks

[@galaxies_dev]

Local notifications are triggered at the OS level and therefore it shouldn't matter if the app is open, running or closed - the notification will be triggered anyway!

[@tigerebevinmasevenza9761]

@@galaxies_dev Hi Simon l'm talking of subscribing to the events when the notification trigger and want to do something in the onTrigger event. When the notification triggers l want the onTrigger event and subscribe to it when the app is in background or when device is locked. That event subscription is not working on IOS but on android it is working.

[@TolgaKoseoglu]

Thank you. Question, can "local-notifications" update the badge count for the app icon? Or does this only with with "push-notifications"? Or is there another plugin for updating/changing the badge count altogether?

[@galaxies_dev]

I think there is a badge plugin you could use in combination with the notifications: github.com/capawesome-team/capacitor-badge

[@eminaramovic7821]

Hello, thank you for a great video! Is it possible to schedule a local notification once a week, where title get populated dynamically, by sending axios requests to the backend?

[@tanmayapatra6078]

That will require to integrate "Push Notification". In which Server will push message to a engine(Firebase) and Firebase will trigger push notification

[@hamza_seye]

I have fixed the issue with ANDROID sound notifications. Follow my answer here : github.com/ionic-team/capacitor/issues/1146#issuecomment-745277583

[@MartinPultz]

Great video! Would be interested in seeing a tutorial on Capacitor Geolocation. Maybe something more advanced around how to manage Geolocation when an error occurs and you want to continue watching, or similarly when a user turns on/off location service, turns on/off location permissions, and to recover when the application is focused after the changes.

[@galaxies_dev]

Noted!

[@testermobile834]

how can I update a existing local notification, I need to update the date to a later one. Is this possible

[@galaxies_dev]

You would have to store the ID of the notification and then later call cancel() with that information!

[@testermobile834]

@@galaxies_devThanks for this one...I have one more question, is there a way to list out all notifications & edit them ??

[@AndreyKlochkov]

Hi Simon, does this plugin have the same limit - 64 notifications on iOS platform?

[@galaxies_dev]

I'm not aware of that limit but I guess if it's a hard OS limit then yes!

[@AndreyKlochkov]

@@galaxies_dev Thanks for the answer. Yes, I think you're right, it's a hard OS limit, it was documented in the obsolete API. I faced with this in cordova-plugin-local-notifications and I thought it's the thing with the plugin. Just one thing I can't understand - the standard iOS app Reminders can send more notifications (tested with 75), It's probably using undocumented iOS APIs or something else.

[@wgoncalves]

@@AndreyKlochkov Would you know what the period of this limit is?

[@sravanthreddy5797]

Hey Simon!, Thanx for the tut but the event listener is not working with event name "localNotificationReceived" on android. I don't know why?

[@nikos9413]

I updated capacitor to v3 and it worked

[@PradeepKumar-gh2ot]

Nice video, Please make a video for same on ionic cordova and android

[@NothingSPECIAL11]

Hello, is it possible to display an alert in phone home screen when the app is in the background or even sleeping? it's after receiving the notification

[@galaxies_dev]

No you can't show a specific alert, only the notification that the OS shows!

[@NothingSPECIAL11]

Thanks for replying! So I can't develop an alarm app using ionic ?

[@MortezaDalil]

How can get notif when app closed? does ionic or capacitor support service?

[@galaxies_dev]

You get notifications even when the app is closed!

[@here_detty]

Hi simon, in android, for some reason the listener event ‘“LocalNotificationReceived” does not work as intended. But the event “LocalNotificationActionPerformed” does. I can schedule a notification but the alert does not appear when received. But the alert does appear when I click on the notification. Could u perhaps provide some insight on why this could be happening? Does this not work on certain android versions or something? Thanks so much :)

[@nikos9413]

I updated capacitor to v3 and it worked

[@eldelotrodia1102]

Did find why Android isn't popping up the notifications?

[@realprathap4732]

It would be cool, if you have share the source for "Amateur" like me.

[@swapnilburde8814]

Ocr with latest ionic

[@dhwalin]

I tried this with Capacitor + ReactJs and in iOS device. But it is not working. Notification is not getting fired.

[@galaxies_dev]

I'm sorry but no idea about the React implementation yet :/

[@shakeelahmedkehar4415]

Hi simon, I watch your videos and blogs. It's very helpful for beginners like me thanks for your tutorials simon. I want to play custom sound for local notification outside the app bundle. Is it possible to play downloadable sounds on notifications. I have seen many apps doing this. Download sounds from app and set them for local notifications? Thanks.

[@galaxies_dev]

I haven't tried it before but I would start by looking at the native Android implementation of the plugin to figure out where it looks for the sound files, and then try to put your downloaded file into that location: github.com/ionic-team/capacitor-plugins/blob/b447852bbf5920c40aae8f54c02db334ccb7b51c/local-notifications/android/src/main/java/com/capacitorjs/plugins/localnotifications/LocalNotification.java#L85

[@smolto1997]

Hi Simon, I used firebase push notifications with capacitor but, I can't get notification body text. If I send "Hello World" and my user click on it, I want to redirect him to one page but If I send "Good bye World" I want another page. Do you know some post to solve my problem?. Thanks in advance.

[@galaxies_dev]

Working on a push tutorial with Firebase right now .)

[@rafaelsevy1]

hi Simon, you are really good teacher i enjoyed so much videos, i am currently programming in Vue and Quasar. Everything works great, but i have a doubt how can i make the local notifications even if the user is not inside the app? for example, i need to trigger alerts for incomplete tasks based on due date and today date, and i have that data in my DB, so when the user is in the app local notifications are showed but if its not inside the app they will not run which doesnt make too much sense...any idea what can be done?

[@galaxies_dev]

Local notifications appear even if the user is not inside the app because they are scheduled inside the OS. Nonetheless if you need to trigger a notification on demand, you would have to look into push notifications instead which you can trigger from your server at any time!

[@jared4670]

As simon said, Push Notificaitons. Just send them as data only.

[@MartinPultz]

Doesn't look like `LocationNotifications.requestPermissions()` does anything? Do you use AndroidPermissions to prompt a user to turn on notifications for the application, or create a modal that asks them to do it manually? Not sure what permission is required for LocalNotifications, but even AndroidPermissions doesn't seem to work, and not prompt occurs when the application is opened like it does for Geolocation.

[@galaxies_dev]

Hmm did you check for any open Github bugs? I can't remember exactly but felt at the time the same that it's not having an impact..

[@MartinPultz]

​@@galaxies_dev I ran through the code, GitHub, stackoverflow, as well as, Ionic's forum. The result was in Capacitor v2 implemented only limited permissions through the Permissions plugin which are now defunct. In Capacitor v3, a framework for permissions has been implemented to provide permissions offered by official and third-party plugins. So they don't prompt a user for permission to use local notifications if the user turns off local permissions, and should work out of the box after installation. So I added an Ionic modal to prompt the user if local notifications are turned off during the applications use and used the Cordova plugin to open up app settings to help them turn it back on.

[@bala-st9cj]

my friend face looks like exactly this guy everything just cloned,his name is vithun

[@maximilianfink5848]

Is it possible to use incoming notifications from Firebase and turn them into LocalNotifications to add action buttons? For example in PushNotifications.addListener('pushNotificationReceived', async func(...)) and then inside "func(...)" schedule a LocalNotification or am I completely wrong? I have already implemented PushNotifications with Firebase and it is working perfectly fine. The only thing i still want to add is action buttons... do I have any options here?

[@galaxies_dev]

Yes sure that should work fine, especially as (afaik) there are no notifications at the top when the app is already open on iOS, so you can definitely handle this yourself!

[@maximilianfink5848]

@@galaxies_dev Okay I will try to implement this and will most likely let you know if anything goes wrong :) Thank you so much for the quick replies, this really helps me out a lot, keep it up!

[@tarunkala9583]

notlocalNotificationReceived listner is not working on Android , Any workaround? TIA

[@here_detty]

Hi i found the issue. Just upgrade your capacitor version to 3. Because that is a bug present in version 2.x

[@djmucci]

did you find out why it doesnt work on android?

[@galaxies_dev]

Which part exactly? I think in the end it worked all fine on my device, perhaps just a permission issue!

[@djmucci]

@@galaxies_dev Sorry I should have been more specific. I was referring to the attachments for android. Also great tutorial ! Thank you for putting time and effort into creating these videos !!

[@LeeRongZhao]

@@galaxies_dev Hi Simon. What are the Android version u tested with? As Im encounter issues like so github.com/katzer/cordova-plugin-local-notifications/issues/1862 Which they said it's the issues with Android version.

[@benjamjohn9690]

Hi Simon is there any disadvantage to use Capacitor over Cordova?

[@galaxies_dev]

It's a different tool - check out my other recent vlog about Capacitor and decide if you like it or not :)

[@benjamjohn9690]

@@galaxies_dev Thanks for the response. After watching your video and reading capacitor official website, I decided to stick with Cordova. The main reason is that even though you can use Cordova inside capacitor, there are few plugins which are not compatible (brainTree and qrscanner for example).

[@vyshnavkumar3769]

Hi this was cool I like your vedios is easy to understand helps me a lot I have dought how to start a new ionic project of ionic version 4 as now 'ionic start' cmd starting new project of version 5

[@galaxies_dev]

Why would you start a v4 project? It's basically the same just older. You can still start a v3 project, but between v4 and v5 there's really no big difference (only improvements!).

[@vyshnavkumar3769]

@@galaxies_dev Tq for reply actually I am thinking to start in ionic v4 because some imports are been changed like we don't have events import of ionic/angular in v5 for subscribing a event published in other page and , I didn't even find an alternative for events in v5 ,so this was one functionality I came across at begin of the project as we go farward may be what more changes may I should face as there is a urgent need of the project submission, as finding an alternative in v5 may take time as I am beginner this is my second project .As ,I worked on v4 for first project most functionality which I used in 1st project are useful in 2nd project which makes my work faster so I want to use ionic v4 But If I could get help with alternatives about events in v5 then also no problem

[@pinyin1]

How can I use this notification with vuejs

[@galaxies_dev]

Sorry haven't worked with Vue yet :/

[@asadullazadeh]

Well👍 Which of theme you use in vs code?

[@waelluay6902]

OneDark theme

[@shortshubyt6909]

In iOS Local Notifications are not working when the app is NOT ACTIVE (Screen off, in background or is closed). do you know any fix for it? I really need it to work. Thanks

[@galaxies_dev]

They definitely should work, since they are scheduled on the OS level and not even related to your app. But there are some issues around this topic here, perhaps your issue is related to them: github.com/katzer/cordova-plugin-local-notifications/issues

[@shortshubyt6909]

@@galaxies_dev i was trying to trigger them through firebase child_added event, that doesn't work when app is in background. Thanks

[@HasiniDayanandaGPlus]

@@shortshubyt6909 did you able to fix your issue. I have similar usecase and still not able fix>

[@shortshubyt6909]

@@HasiniDayanandaGPlus Yes, I managed to make it work by integrating with FCM (Firebase cloud messaging). You can use any cloud message service if you want to send notification over the network. Local Notifications work in the background if you pre-schedule them to a time in the future. Thanks.

[@deboraguardado5247]

@@shortshubyt6909 can you give us an example using scheduled push notifications and Google cloud? Thanks

[@mschannel829]

Hi Simon. Thank you for your video. Do you know how to disable the sound of the notification (Android)? I tried "sound: null" but the notification plays a default sound. I have another question, How can I catch the event when the user clear/remove all notifications? Thank you M

[@jared4670]

Can't for the life of me get attachment images to work.

[@jared4670]

and this is because android doens't support them....

[@aknas3613]

Now I use Flutter

[@SG48907]

Why do software developpers always were ridiculous t-shirts with a company name on it ? And why do they have this _childish way_ of speaking they always seem unaware of ? I work in a company with a lot of software developpers, it's _really disturbing_ to notice you are *all* like this.