How to Send Push Notifications to Your Ionic 4 App With OneSignal
HTML-код
- Опубликовано: 11 июл 2024
- In this tutorial we implement Ionic 4 push notifications with help of the OneSignal service!
🔥 Learn to build mobile apps with Ionic in my Ionic Academy: ionicacademy.com/
💎 Get the Built with Ionic Book: builtwithionic.com/
#############################
Want to read instead of watch? Here's the full Ionic tutorial: devdactic.com/push-notificati...
Want more tutorials? Here you go! devdactic.com/
Just getting started? Take my 7 Day Ionic Crash Course: ionicacademy.com/ionic-crash-...
#############################
You can also find me...
on / simongrimm_
on / schlimmson
on / devdactic
############################# 
Наука
Dark mode is good for visualising your video , thanks
Thanks man, I was looking at so many videos on YT, and this is the one that ended up working the best for my Ionic 4 app!
Happy it works for you :)
Thanks a lot! It took me a while to figure this out, but your guide really helped me!
Hi Simon, your videos are amazing, and I learnt a lot from them. About the mode of vscode, I always prefer to use light mode.
Very good tutorial! Thank you :) Greetings from Argentina!
One signal is one great service. I was using Firebase, but lately, I am having problems building my Ionic apps with it. One Signal is working great!
Thanks for this tutorial.
Yes the Cordova plugin gives you sometimes problems especially in combination with other plugins. OneSignal works great most of the time!
Definitely interested for videos concerning segmentation in onesignal. By the way thank you so much for such quality tutorials!!!
You're very welcome!
SIMON is my ionic hero...thanks alot
Thanks a lot Simon. Worked like a charm! And dark mode is good.
Glad it helped!
Well dark mode is perfect and awesome video, thanks
Good Tutorial. Thank you.
You´re the best teacher! Thanks!
Thank you! 😃
Dark mode prevails!!! Very helpful tutorial!! Thank you for sharing :)
You are welcome Jennifer :)
Nice tutorial! Thanks so much for your time and effort! I'm very new to Ionic and your videos are helping me a lot to understand Ionic development.
I've two queries...
01. Why you use Constructor? Why not ngOnInit?
02. What's the purpose of statusBar.styleDefault();?
Simon I really love your work. Your teachings fixed my whole career :D
I was wondering if we can ask you some tutorials about plugins and dev procedures like:
Ionic App Update plugin or how to properly debug the application through Chrome Remote Devices
Thanks for sharing your knowledge, you're the real MVP man! o/
Wow Rafeal thank you so much! Of course you can always recommend tutorial ideas :)
Haven't used the app update plugin but I'll see what I can do!
Dark mode is much better for visibility in videos, solid move!
Yes I kept it for now :)
Instablaster...
Thank you so much simon.
Great work
tnks a lot, works fine for me
You're welcome Jonathan!
Thank you for the tutorial. Is there already any advanced stuff including segments, managing different topics for different users, etc? Thanks
you are awesome. Thank you for the sharing.. :-)
FWI - As of July 2019, One Signal announced they are discontinue data sharing with third parties! Which is awesome news. For me that would have been a deal breaker! Promise they aren't paying me either! Great video Simon, as always. Cold coffee! Yeah. I know all about that...
Thanks for the info! Great to hear they finally take this step, it's been way too long...
your the man
Liked tutorial and ur actions too Simon:)
Thanks Kushal!
Thanks! Your tutorial help me a lot... can I change the background color of this notification?
The push you see from the OS can't be changed, but the color of an in app alert can be changed of course!
Awesome sharing!
Thank you!
hello there, great video. in the end of the video you said about the api without the firebase dashboard notification. would you please share the code of the api?
🧡 from India
Thanks a lot Sir, finally a good video on RUclips! Sir I have a question: I'd like to know if there is a subscribers limit or messages limit on OneSignal because in their documentation they say that cost 99$ per month but when do I have to begin to pay it?. I'm sure you know it and sorry for my English, I'm still improve it.
I think you only need a paid account if you want additional features, I never encountered any limitations with the free version so far!
hey Simon! great tutorial! any nestjs backend for ionic tutorial soon ? thanks a lot
Yes I'm definitely thinking about that! Any specific wish?
@@galaxies_dev It might be interesting to build an auth component, post , comment, profile or something like that
@@galaxies_dev Up hahaha
Hi simon , i got internship in ionic by mention you as my teacher :-) thanks for the beautiful tutorials
I have 2 question
1: i followed the tutorial and receiving notification but when click notification it is not opening in popup or alert why is that because i didn't missed any thing?
2: How an i receive notification if app is running ?
Thanks in advance teacher
Ye thanks u r just awesome.
I am trying to build ( Android version) onesignal notification system but getting some error. And I found that onesignal integration process might be changed right know . Can u pls make a video on this again .. thanks .have a great day
Its there any particular thing why u like more OneSignal instead of firebase? great video Simon!
Well there are reasons, in general I like the simplicity. But I want to make a video on Firebase vs OneSignal as well, it's already at the top of my list!
Thanks once again for this awesome tutorial. Please can you probably create a tutorial on how to target a specific device Using FCM or OneSignal. I would be much grateful if you save my day
Thank you
You can check their API docs, you can add a segment or specific conditions where you want to send your push!
@@galaxies_dev Per you guide i was able to do it with FCM and working perfectly. Thanks . Great Job
Dark ! 👍
whenever i search for any material related to ionic i only found solutions in your videos so thank you so much aswome man
Wow that's a good sign :D Glad I can help you with my content!
Dear, you are doing a great job.
I have a simple question related to Push Notification, I want to send Push notifications from my mobile app instead of FCM web interface.
my scenario is, I have an app (ionic5+capacitor) and my app users want to send 'sales promotion' or 'amount due' notifications to clients. Can you please explain how I can achieve this?
Technically you could make a POST to the OneSignal API and target a specific segment, and that would work from your Ionic app as well.
But this would require you to have your secret key for the API inside your Ionic app, which is something you should definitely not do! So I would still bring up some sort of Server or Firebase to keep your OneSignal API key secret.
Hey Simon, first of all thanks a lot for your great work! Your videos helped me develop my first big app. I am currently using in my Ionic 5 Capacitor-App the "onesignal" service for push notifications. For Android everything has worked great. However, in iOS the device is registered with onesignal but it gets the message "Apns Delegate Never Fired" and its registrated as non-active user without push-subscription. I would appreciate any little help. Many thanks and greetings from Bielefeld :)
Already answered in our Facebook group I guess :)
Thank you Simon, was very cool you video. Please how I can do for send a message to specific user mobile?
You could target their userId or segment them by any other value that you store for them as a tag in OneSignal!
@@galaxies_dev good idea, I will try!
@@RobertoSilvaZuniga Yeah. Was wondering that myself.. I found the include_external_user_ids [ ] parameter in the API. That should allow you to send notifications to specific users, even logged on to multiple devices, so long as you tie it up with your user authentication mechanism. Very handy!
Hello Simon, should i also need to remove googleProjectNumber from
this.oneSignal.startInit(environment.OneSignal_AppId, environment.OneSignal_AndroidId);
and
should it be like this - this.oneSignal.startInit(environment.OneSignal_AppId); for iOS build
Great video. I have an app that uses data from a REST API, would it be possible to show some of this data inside A OneSignal notification?
In general yes, you just need to set up the right flow. For example trigger the OneSignal Push right from your API with the data!
Hi Simon. following this same tutorial, can you show how to check if user is subscribed to receive push notifications and how to allow users to turn off and turn on notifications with for example a toggle button? Thank you appreciate it.
I think you have to guide users to the OS settings, you can't switch on push if they deactivated it!
@@galaxies_dev i am able to direct users to os settings but what is confusing is determining the state of subscription of the user. can you kindly look into it when you have some free time. no one has done any tutorial or explanation for this. many people would benefit from a tutorial of it. thanks very much.
sir can you make a vedio on this push notifications using the FCM plugin and firebase
hai i need full setup on ios ... xcode to added new target in your project ?? , info.plist should have onesignal package ??
Dark mode all day everyday we had a celebratory party me and my pals when we saw you took the leap of faith and switched 😂😂
This video has like 100 comments celebrating dark mode, I guess it was the right choice :D
On to the next one@@galaxies_dev question would be how to scale/crop images to a default size so that they fit lets say cards coz different image sizes make the cards not uniform in height will appreciate that
Wow nice app
Thanks!
Can u make tutorial on 🔥 firebase push notifications and thank u for this tutorial
Actually created an Ionic Academy course on that but don't have a video here!
hello i didnt get notifications when my app is completely closed give me the solution thanks !
Hey! When you set the oneSignal.startInit are you sure the second parameter is the sender id? I think it is the firebase project id in case of android. Probably I'm wrong, i dont know 100% sure.
I think that's actually the same or what I meant. It's basically the ID you need for the Android connection, which happens through Firebase.
Congrats for great explanation Simon, has helped me a lot! Just I'm facing an error And I hope you can help me, the error when building cordova ios is:
cordova build ios --release
You have been opted out of telemetry. To change this, run: cordova telemetry on.
Building for iPhone Xʀ Simulator
Building project: /Volumes/Users/Sebastian/Documents/Ionic/cancunGames/platforms/ios/CancunGames.xcworkspace
Configuration: Release
Platform: emulator
Ignoring configuration file '/Volumes/Users/Sebastian/Documents/Ionic/cancunGames/platforms/ios/cordova/build-release.xcconfig' because it could not be loaded.
Reason: File could not be parsed due to preprocessing errors:
Build settings from command line:
CONFIGURATION_BUILD_DIR = /Volumes/Users/Sebastian/Documents/Ionic/cancunGames/platforms/ios/build/emulator
SDKROOT = iphonesimulator12.2
SHARED_PRECOMPS_DIR = /Volumes/Users/Sebastian/Documents/Ionic/cancunGames/
Do you know the reason of this?
THANKS.
@simon do we actually need to use the OneSignal service for the Push Notifications? Can't we just solely rely on Firebase for this task? What's so special about OneSignal that FireBase cannot do? Many thanks.
You can segment better through OneSignal and use a nice interface for creating notifications. If you use the API anyway sure, Firebase will cover basically everything you need as well!
@@galaxies_dev Thanks a lot!
Dark Mode ♥
Hello hi sir,
we can send push notification using REST API to specific user mobile by using ionic and firebase.
thank you.
Well yes, but you need the private API key sou you shouldn't call the API from your app but a server/cloud function instead!
@Simon Grimm, work whit Capacitor on iOS
The video is clear enough, working perfect for me, but sir, do you know why there is no notification sound except a vibration? I've tried to create an Android Category as mentioned in the documentation, also I've left the sound as a device default sound, I included the android_sound inside the payload also but nothing is working!
I'm currently not yet sure how to include custom sounds :/
@@galaxies_dev I've already tried but no sound! weird! it suppose to play the default!
something has change, I tried this and it doesn't work when trying it on Ionic Cordova anymore, even people on Onesignal don't have instructions after the changes
Hey Simon, what xcode version are you using?
Always the latest, I usually have automatic updates on my mac enabled!
All in the world is dark!
Why not an IDE?
Perfect!
The people have spoken, I have listened!
yeah dark mode is by far the best!!!
You need to make two videos, one with the dark theme and the other with the light theme. The dark is for when we see the video at night and the other day hehe. But out of jokes, the light is better for the videos, greetings.
Haha wow that would be so much work :D
Any tuturials for PWA? using firebase cloud messaging?
No, not yet!
Simon how about targeting a specific device from the API. You're using the app Id but can you target a specific user using the device ID? Say you have a messaging app that you want to send notifications to when a user sends the other user a message but you want to send it from the actual app.
I think you would need some backend logic to process from which to which user you want to send data. And you can set additional information to a OneSignal user and store its ID of your system, then it's easier to target the right person!
Is it possible to send a notice inside the app or it's necessary to use the one signal site?
You can't trigger a push from the app itself, that would mean you have to add your secret key to your Ionic app which you should never do!
Hi Simon! Help me... I can’t manage to add onesignal to a strict PWA Ionic 4 app (no Cordova support). Any clue ?
Inside a PWA you can't use native push notifications, at least not on iOS. Android might have limited support.
Please keep the dark mode ... for ever ! :)
How can we add custom notification sound in onesignal?
Hi guy, sorry but I've got a code related question. For a reason I don't know, I have no user found on Onesignal... I mean, I'm testing my app with devapp for android first, I wrote the code you gave us in the video but my device does not show up on the Onesignal website... Any idea how to fix it ?
Thanks !
I wouldn't try these things with the devapp. Please build an APK and check with a real app if you still see no user!
Hi Saimon,
I am building a video calling app using ionic and connectycube. But i am facing issues with showing a whatsapp like call notification which persists on the UI until the ring timeout. I am not able to do that. I am just able to send a notification. Can you please help me with this?
Thanks,
Abhiram
How to achieve this using firebase sir. Can u make tutorial on thus
I've got some courses on Push notifications with Firebase inside the Ionic Academy as well :)
@@galaxies_dev Also Simon earlier I could read ur tutorials as well but now when I go to that link which u gives in description then it don't show that
sir make the video how to use the iBeacons in ionic4
Yes need to order some beacons for testing though!
how i can get player id on home.ts or any other page in order to save in external db and send push to these devices?
You can always inject the oneSignal package and get the id from it!
@@galaxies_dev thanks for reply i did it with this.oneSignal.getIds().then(identity => {
identity.userId
});
Can you push a notification to a specific userID from firebase?
If you can male a link between the userID and the push token of that user sure, otherwise no!
Installing "onesignal-cordova-plugin" for ios
Failed to install 'onesignal-cordova-plugin': undefined
CordovaError: Promise rejected with non-error: 'Version should contain only numbers and dots'
at cli.catch.err (/usr/local/lib/node_modules/cordova/bin/cordova:30:15)
at process._tickCallback (internal/process/next_tick.js:68:7)
[ERROR] An error occurred while running subprocess cordova.
Not work
Hello sir. Its an awesome tutorial for beginners. But I only want to send notifications to a specific number of devices. e.g. I am adding a message for the people of a particular batch, lets say the batch name as "X". So i want that only the people under "X" batch should get the notification. The batch mapping of people is stored in a server side database. How to achieve it sir ? Your guide will be of much help. Thank you in advance.
You can have segments in OneSignal, so you should make sure that you add all the people from a batch to a segment in OneSignal, then you can simply create a push for that specific segment!
Thank you very much.I build the Android application and the notification works fine. Now, when I build a browser, the notification does not work. Can someone help me solve it please?
If you are working with the OneSignal Cordova plugin then this only works on a real device! Web push notifications are a different topic.
sir how to send notification to perticular mobile number.
sir is it possible that we can send push notification without using firebase?
For Android you have to use a Firebase project, but you can also use the Firebase API if that makes your life easier!
All ad networks have its pros and cons - concerning the outlook of ad formats, CPC, eCPM etc., and you have to test them in order to see if they work for you or not. At the moment, I use MonadPlug and its results are better than 99% of other ad networks..., and I would not know that if I did not test their network. Simple.
As I try to run my ionic capacitor app, It stucks on splash screen then exits. Is it because I’m not using a paid apple developer account?
No that's definitely not the reason. There should be any log with an error!
How can i send notification automatically, when user creates a new post in the app
It depends on your backend, you can call the OneSignal API from there for example.
@@galaxies_dev i have tried all i could still no result...i am using typescript
can u give me hints please
or make a tutorial on that...thanks
this works even when the app is closed?
Yes that's the idea of these notifications, just like when you get a new message!
sir please tell how to do push notifications using firebase
We have a course on that topic inside the Ionic Academy :)
I´m building the app on Ionic 5 it doesn't show me the notifications
There is no such thing as Ionic 5, and if it's not showing your notifications try to make a legacy build with Xcode (if you mean ios) or otherwise check the logs on OneSignal why the push was not sent!
do you i have to have a paid developers account to use push notifications?
I don't think so, but of course you need an account to submit your app!
The app wont receive notification whenever its not running in foreground...Please any solution to this?
Which platform? For iOS you might have to set a key in the capabilities tab!
@@galaxies_dev Android platform
keep dark mode as it looks better.
Dark mode!!!
Dark mode is fine
I need to create an account on some web service?
I need to register my app's bundle ID in multiple places?
I need a certificate?
I need to register my app with Firebase for some license keys?
This tutorial is good, but holy hell, I never would've thought sending push notifications required so much setup. I figured there would just be some Cordova plugin where I could type something like "device.sendPushNotification()".
Why is it this overly-complex? Do I really need all these service providers just to send a simple notification?
Forget it, I'm scrapping this feature from my app. Way too much work for such little gain.
Push notifications can make a huge difference, and they require setup since you hook into the native OS settings and need permissions for that. E.g. on Apple the message is sent through Apple, so you need to prove that your app is a legit app, and that's done with certificates!
Dark mode all the way
I prefer dark mode
I like dark mode
Dark mode
Dark mode is better for me
Hello Simon,
I just submitted my ionic 4 app onto App Store for review and the binary got rejected
saying -
"Guideline 2.3.10 - Performance - Accurate Metadata
We noticed that your app or its metadata includes irrelevant third-party platform information.
Specifically, your app includes Android references in the binary.
Referencing third-party platforms in your app or its metadata is not permitted on the App Store unless there is specific interactive functionality.
Next Steps
To resolve this issue, please remove all instances of this information from your app and its metadata, including the app description, promotional text, What's New info, previews, and screenshots."
I have developed app for both the platforms Android & iOS
So is that what i have to do next - Remove all instances of Android from project that includes remove android platform, resources and if any keyword named as Android to Build iOS and then i resubmit it.
This doesn't happen for regular Ionic apps with Android platform, so you might have something specific to Android mentioned in your code/metadata that shouldn't be there normally and that's what Apple wants you to remove. Perhaps it's even just in the AppStore description text? You can't use the words Android in there afaik.
@@galaxies_dev I see, Thanks for Clearing my Doubt
I have one more Question -
For payment gateway we are using GoQLES - (www.goqles.com/) but GoQLES doesn't have their own SDK, So we developed a solution using InAppBrowser in which on checkout page we ask basic details of user such as name, phone no., email, etc. to create OrderId and then we redirect it to GoQLES Payment Page in InAppBrowser with those Order Details and on Success we close InAppBrowser and Continue to App showing Successful Payment.
We cannot Implement Apple Payment/In-App Purchase as InAppBrowser is only supported way for GoQLES Payment Gateway.
I got my app rejected saying that - "Guideline 3.1.1 - Business - Payments - In-App Purchase
Your app unlocks or enables additional functionality with mechanisms other than the App Store, which is not appropriate for the App Store.
Next Steps
To resolve this issue, please remove this feature from your app."
for payment Gateway we can only use InAppBrowser,
GoQLES Payment Gateway does not have their SDK by which i can use In-App Purchase Plugin, GoQLES only Supports Payment via Browser.
So we don't any option other than InAppBrowser.
Can you help me with this subject, is it possible to launch app to Apple App Store.