Learn how to send notifications to iOS and Android devices using Firebase FCM and Ionic Native. https://angularfirebase.com/lessons/ionic-native-with-firebase-fcm-push-notifications-ios-android/

- Join Slack https://goo.gl/6eYoxF
- Ionic Native https://ionicframework.com/docs/native/
- FCM https://firebase.google.com/docs/cloud-messaging/
2024-02-04T07:42:02.752Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
7900db72-336f-4106-8cc1-b995fd56fffe
7d53c1f442fecb896a5bca49ca4336f46459df072da40f8714dd2b501b759c1d
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
One of the best ways to keep your users engaged on a native mobile app is to send push notifications.
Today, I'm going to show you how to set up Firebase Cloud Messaging with Ionic to do just that.
This video is going to be a lot of because it ties together many of the resources in the Firebase platform, including Firestore, Cloud Functions, Messaging, and UserAuth.
By the end of this video, you'll have a flexible notifications feature designed to work on both iOS and Android.
If you're new here, make sure to like and subscribe, and you can find all of the code at angularfirebase.com and join the Slack team so we can chat about your questions together.
The first thing I'll do is generate a brand new Ionic app.
I'm using the tabs template, but that part's completely optional.
Then I'm going to go into the config dot XML file and make sure that we have a custom widget ID that that we can use to register our project with Firebase.
We're targeting native mobile apps on the App Store, so what we're going to do is register our app on the Firebase console for both iOS and Android.
For both platforms, the only thing you have to do is enter your ID and click through the steps.
You don't need to download the SDK or anything like that.
When you finish the process, you'll want to download your config file for both platforms and save it in the root of your Ionic project.
For Android, it's the Google services JSON file, and for iOS, it's the Google service dash info plist file.
Now that our app is registered with Firebase, let's go ahead and add our dependencies.
First, we have AngularFire 2, which gives us access to the Firestore database.
Then we have the Firebase Cordova plugin for Ionic, which is going to give us access to native features for iOS and Android.
Follow the official install instructions for both packages and then generate a custom Ionic provider called FCM.
We'll use this provider to create a tightly integrated cross platform notifications feature.
After following these steps, you should have an app module that looks something like this.
We're importing AngularFire as well as Firestore, then adding our Firebase credentials.
Then we should also have the Firebase native plug in as well as our custom FCM provider.
AngularFire goes in the import section, and our Firebase plugin goes down here in the provider section.
Before Before we write any more code, I wanna show you exactly how this feature works from the user perspective.
Here we have an iPhone and it's prompting the user to allow permission to send push notifications.
Notifications.
When the user clicks allow, it's going to give us a token that will then be saved in the Firestore database.
On that document, we'll also save the user ID so we can query all of the user's devices and send out a notification to every single device that that user has registered.
If the user has their device open, It's going to bring up a Toast notification on that device.
When the device is open, it's the developer's responsibility to handle the notification.
When the app is in the background, we'll actually send a push notification through the native device.
Then I'll show you how to send push notifications directly from the Firebase console and also programmatically via Cloud Functions.
Most of the magic is going to happen in our FCM provider, so let's go ahead and start there.
First, we'll bring in the Firebase plug in as well as platform and Firestore.
Then we can inject these in the constructor.
From there, its first responsibility is to retrieve the actual token from the user, which is just permission to send notifications to this device.
We'll set this up as an async function, And then we need to check for the platform that we're actually retrieving this token from.
When it's Android, we just need to call our native plugin Git token, and that's going to resolve with the token.
When it's iOS, we have one additional step and that is to request permission from the user.
That's going to trigger the iOS pop up modal that I showed you earlier.
Then lastly, we could check to see if this is a web application and send a notification that way as well.
For Right now, I'm just going to leave this as a to do because I've already covered it in episode 64.
And also, AngularFire 2 is going to be releasing a cloud messaging module in the near future.
So you can count on another video when that happens.
Then the final thing we'll do in this method is save that token to Firestore, door, which is just a big long string.
I'm going to extract this out into a different method.
And if we don't have a token, we'll just return.
Otherwise, we're going to make a reference to the device's collection in Firestore.
The goal is to send a notification to every device that a user has registered, So we also wanna save the user ID on this document.
I'm just hard coding a test user, but in real life, you'd wanna use the Firebase auth UID.
And the token is just a string, so we can actually use that as the document ID.
And that's important because it ensures that every device in Firestore has a unique ID.
Lastly, to listen to notifications, all we have to do is call on notification open, and that returns an observable that we can use in the front end.
And I should point out that specifically for native apps, you'd wanna use a different method for web apps.
Now we need to run the get token method in one of our components.
For now, I'm putting it in the home component, but you could also put it in the app component or some other root level page.
Inside this component, we'll want To import our FCM provider as well as the Toast controller from Ionic and the tap operator from RxJS.
Then we can inject those in the constructor.
Getting that token from the user is just a matter of calling this method, and it's going to handle everything else automatically on their device.
Once we have the token, we want to listen for incoming messages and handle them accordingly.
Ionic makes this really easy because it has a built in Toast notification service.
So we can listen to our notifications and then use the tap operator to show a toast whenever a new message comes through.
Every message will have a body and then we'll show it for 3 seconds and then it will automatically hide.
That's an observable, so the last thing we have to do is subscribe to it.
Let's go ahead and test it out by sending a message directly from the Firebase console.
You'll need to have an emulator running.
In this case, I have Android going.
Then I'm going to enter some message text.
And when the apps open for the first time, it should generate a device token in Firestore.
Go ahead and copy that token and then return back to the notifications tab.
So here you can send the notification to a single device or to a topic or to a user segment.
We'll get more into that when I release my full Ionic course.
But for right now, we'll just send it to a single device.
Click send, and you should see it pop up in the emulator.
Cool.
So that's really convenient.
But in most cases, we're going to send notifications programmatically using Cloud Functions.
That's what I'll show you next.
But first, I wanna point out that if you're building on iOS, you also need to enable push notifications in your project in Xcode.
You You also need an Apple developer account and things like that, but that's beyond the scope of this video.
What we wanna do next is build a cloud function that will notify a user whenever they get a new describer or follower or some other important event happens on their account.
So run Firebase init functions, which will create a functions directory in the root of your project.
I'm using TypeScript for my function, so I'm going to go into the functions directory to the source index ts file.
Then we need to initialize the Firebase Admin SDK, and I'm exporting a function called new subscriber notification.
This function is going to run whenever we have a new Firestore document created in the subscribers collection.
So you could think of this in the same way that you think of YouTube subscribers.
What we wanna do is notify the owner of that channel whenever they get a new subscriber.
We can make this an async function to return a promise, which is required in Cloud Functions.
And then we'll get the data from that document by calling event data data.
Each document should have a user ID, which is the owner of the channel, and a subscriber, which is the user who is subscribing to that channel.
Then we can use this information to format the actual notification content.
So we'll set a title of new subscriber, and then we'll say subscriber name is following your content.
You can also add an icon image as well.
The next step is to find all the device tokens that belong to a given user.
To do that, we make a reference to Firestore, And then we reference the device's collection and filter it by that user ID by saying where user ID equals this user ID.
We can retrieve that data one time by calling get on it, and then we'll set up an empty array for each of the tokens that we want to send a message to.
Then devices is a snapshot query, so we need to call for each on it.
And then for each token in that query, we're going to put it in our tokens array.
Then the final step is to just call admin messaging, send to device with that token's array and the corresponding payload.
Now go ahead and deploy your function, and we should be ready to put it to use.
In this case, I have my function set up to trigger on the subscriber's collection.
So I'm creating a new document in that collection and making sure the user ID matches test user, which we set up in our Ionic app.
And sure enough, after we create that document, we get the notification in the device as expected.
In the next few days, I'm going to release a full Ionic course that We'll go into much greater detail on Firebase Cloud Messaging and give you a solid starter template for building your own native mobile Ionic apps.
If you're an active Pro member, you'll be able to enroll in that course for free.
Thanks for watching, and I'll see you soon.

Speaker 0: One of the best ways to keep your users engaged on a native mobile app is to send push notifications. Today, I'm going to show you how to set up Firebase Cloud Messaging with Ionic to do just that. This video is going to be a lot of because it ties together many of the resources in the Firebase platform, including Firestore, Cloud Functions, Messaging, and UserAuth. By the end of this video, you'll have a flexible notifications feature designed to work on both iOS and Android. If you're new here, make sure to like and subscribe, and you can find all of the code at angularfirebase.com and join the Slack team so we can chat about your questions together.

The first thing I'll do is generate a brand new Ionic app. I'm using the tabs template, but that part's completely optional. Then I'm going to go into the config dot XML file and make sure that we have a custom widget ID that that we can use to register our project with Firebase. We're targeting native mobile apps on the App Store, so what we're going to do is register our app on the Firebase console for both iOS and Android. For both platforms, the only thing you have to do is enter your ID and click through the steps.

You don't need to download the SDK or anything like that. When you finish the process, you'll want to download your config file for both platforms and save it in the root of your Ionic project. For Android, it's the Google services JSON file, and for iOS, it's the Google service dash info plist file. Now that our app is registered with Firebase, let's go ahead and add our dependencies. First, we have AngularFire 2, which gives us access to the Firestore database.

Then we have the Firebase Cordova plugin for Ionic, which is going to give us access to native features for iOS and Android. Follow the official install instructions for both packages and then generate a custom Ionic provider called FCM. We'll use this provider to create a tightly integrated cross platform notifications feature. After following these steps, you should have an app module that looks something like this. We're importing AngularFire as well as Firestore, then adding our Firebase credentials.

Then we should also have the Firebase native plug in as well as our custom FCM provider. AngularFire goes in the import section, and our Firebase plugin goes down here in the provider section. Before Before we write any more code, I wanna show you exactly how this feature works from the user perspective. Here we have an iPhone and it's prompting the user to allow permission to send push notifications. Notifications.

When the user clicks allow, it's going to give us a token that will then be saved in the Firestore database. On that document, we'll also save the user ID so we can query all of the user's devices and send out a notification to every single device that that user has registered. If the user has their device open, It's going to bring up a Toast notification on that device. When the device is open, it's the developer's responsibility to handle the notification. When the app is in the background, we'll actually send a push notification through the native device.

Then I'll show you how to send push notifications directly from the Firebase console and also programmatically via Cloud Functions. Most of the magic is going to happen in our FCM provider, so let's go ahead and start there. First, we'll bring in the Firebase plug in as well as platform and Firestore. Then we can inject these in the constructor. From there, its first responsibility is to retrieve the actual token from the user, which is just permission to send notifications to this device.

We'll set this up as an async function, And then we need to check for the platform that we're actually retrieving this token from. When it's Android, we just need to call our native plugin Git token, and that's going to resolve with the token. When it's iOS, we have one additional step and that is to request permission from the user. That's going to trigger the iOS pop up modal that I showed you earlier. Then lastly, we could check to see if this is a web application and send a notification that way as well.

For Right now, I'm just going to leave this as a to do because I've already covered it in episode 64. And also, AngularFire 2 is going to be releasing a cloud messaging module in the near future. So you can count on another video when that happens. Then the final thing we'll do in this method is save that token to Firestore, door, which is just a big long string. I'm going to extract this out into a different method.

And if we don't have a token, we'll just return. Otherwise, we're going to make a reference to the device's collection in Firestore. The goal is to send a notification to every device that a user has registered, So we also wanna save the user ID on this document. I'm just hard coding a test user, but in real life, you'd wanna use the Firebase auth UID. And the token is just a string, so we can actually use that as the document ID.

And that's important because it ensures that every device in Firestore has a unique ID. Lastly, to listen to notifications, all we have to do is call on notification open, and that returns an observable that we can use in the front end. And I should point out that specifically for native apps, you'd wanna use a different method for web apps. Now we need to run the get token method in one of our components. For now, I'm putting it in the home component, but you could also put it in the app component or some other root level page.

Inside this component, we'll want To import our FCM provider as well as the Toast controller from Ionic and the tap operator from RxJS. Then we can inject those in the constructor. Getting that token from the user is just a matter of calling this method, and it's going to handle everything else automatically on their device. Once we have the token, we want to listen for incoming messages and handle them accordingly. Ionic makes this really easy because it has a built in Toast notification service.

So we can listen to our notifications and then use the tap operator to show a toast whenever a new message comes through. Every message will have a body and then we'll show it for 3 seconds and then it will automatically hide. That's an observable, so the last thing we have to do is subscribe to it. Let's go ahead and test it out by sending a message directly from the Firebase console. You'll need to have an emulator running.

In this case, I have Android going. Then I'm going to enter some message text. And when the apps open for the first time, it should generate a device token in Firestore. Go ahead and copy that token and then return back to the notifications tab. So here you can send the notification to a single device or to a topic or to a user segment.

We'll get more into that when I release my full Ionic course. But for right now, we'll just send it to a single device. Click send, and you should see it pop up in the emulator. Cool. So that's really convenient.

But in most cases, we're going to send notifications programmatically using Cloud Functions. That's what I'll show you next. But first, I wanna point out that if you're building on iOS, you also need to enable push notifications in your project in Xcode. You You also need an Apple developer account and things like that, but that's beyond the scope of this video. What we wanna do next is build a cloud function that will notify a user whenever they get a new describer or follower or some other important event happens on their account.

So run Firebase init functions, which will create a functions directory in the root of your project. I'm using TypeScript for my function, so I'm going to go into the functions directory to the source index ts file. Then we need to initialize the Firebase Admin SDK, and I'm exporting a function called new subscriber notification. This function is going to run whenever we have a new Firestore document created in the subscribers collection. So you could think of this in the same way that you think of YouTube subscribers.

What we wanna do is notify the owner of that channel whenever they get a new subscriber. We can make this an async function to return a promise, which is required in Cloud Functions. And then we'll get the data from that document by calling event data data. Each document should have a user ID, which is the owner of the channel, and a subscriber, which is the user who is subscribing to that channel. Then we can use this information to format the actual notification content.

So we'll set a title of new subscriber, and then we'll say subscriber name is following your content. You can also add an icon image as well. The next step is to find all the device tokens that belong to a given user. To do that, we make a reference to Firestore, And then we reference the device's collection and filter it by that user ID by saying where user ID equals this user ID. We can retrieve that data one time by calling get on it, and then we'll set up an empty array for each of the tokens that we want to send a message to.

Then devices is a snapshot query, so we need to call for each on it. And then for each token in that query, we're going to put it in our tokens array. Then the final step is to just call admin messaging, send to device with that token's array and the corresponding payload. Now go ahead and deploy your function, and we should be ready to put it to use. In this case, I have my function set up to trigger on the subscriber's collection.

So I'm creating a new document in that collection and making sure the user ID matches test user, which we set up in our Ionic app. And sure enough, after we create that document, we get the notification in the device as expected. In the next few days, I'm going to release a full Ionic course that We'll go into much greater detail on Firebase Cloud Messaging and give you a solid starter template for building your own native mobile Ionic apps. If you're an active Pro member, you'll be able to enroll in that course for free. Thanks for watching, and I'll see you soon.
One of the best ways to keep your users engaged on a native mobile app is to send push notifications. Today, I'm going to show you how to set up Firebase Cloud Messaging with Ionic to do just that.
This video is going to be a lot of because it ties together many of the resources in the Firebase platform, including Firestore, Cloud Functions, Messaging, and UserAuth. By the end of this video, you'll have a flexible notifications feature designed to work on both iOS and Android. If you're new here, make sure to like and subscribe, and you can find all of the code at angularfirebase.com and join the Slack team so we can chat about your questions together.
streaming
youtube
The first thing I'll do is generate a brand new Ionic app. I'm using the tabs template, but that part's completely optional. Then I'm going to go into the config dot XML file and make sure that we have a custom widget ID that that we can use to register our project with Firebase. We're targeting native mobile apps on the App Store, so what we're going to do is register our app on the Firebase console for both iOS and Android. For both platforms, the only thing you have to do is enter your ID and click through the steps. You don't need to download the SDK or anything like that. When you finish the process, you'll want to download your config file for both platforms and save it in the root of your Ionic project. For Android, it's the Google services JSON file, and for iOS, it's the Google service dash info plist file. Now that our app is registered with Firebase, let's go ahead and add our dependencies. First, we have AngularFire 2, which gives us access to the Firestore database. Then we have the Firebase Cordova plugin for Ionic, which is going to give us access to native features for iOS and Android. Follow the official install instructions for both packages and then generate a custom Ionic provider called FCM. We'll use this provider to create a tightly integrated cross platform notifications feature. After following these steps, you should have an app module that looks something like this. We're importing AngularFire as well as Firestore, then adding our Firebase credentials. Then we should also have the Firebase native plug in as well as our custom FCM provider. AngularFire goes in the import section, and our Firebase plugin goes down here in the provider section. Before Before we write any more code, I wanna show you exactly how this feature works from the user perspective. Here we have an iPhone and it's prompting the user to allow permission to send push notifications.
Notifications. When the user clicks allow, it's going to give us a token that will then be saved in the Firestore database. On that document, we'll also save the user ID so we can query all of the user's devices and send out a notification to every single device that that user has registered.
security
If the user has their device open, It's going to bring up a Toast notification on that device. When the device is open, it's the developer's responsibility to handle the notification. When the app is in the background, we'll actually send a push notification through the native device. Then I'll show you how to send push notifications directly from the Firebase console and also programmatically via Cloud Functions. Most of the magic is going to happen in our FCM provider, so let's go ahead and start there. First, we'll bring in the Firebase plug in as well as platform and Firestore. Then we can inject these in the constructor. From there, its first responsibility is to retrieve the actual token from the user, which is just permission to send notifications to this device. We'll set this up as an async function, And then we need to check for the platform that we're actually retrieving this token from. When it's Android, we just need to call our native plugin Git token, and that's going to resolve with the token. When it's iOS, we have one additional step and that is to request permission from the user. That's going to trigger the iOS pop up modal that I showed you earlier. Then lastly, we could check to see if this is a web application and send a notification that way as well. For Right now, I'm just going to leave this as a to do because I've already covered it in episode 64.
And also, AngularFire 2 is going to be releasing a cloud messaging module in the near future. So you can count on another video when that happens. Then the final thing we'll do in this method is save that token to Firestore, door, which is just a big long string.
streaming
youtube
I'm going to extract this out into a different method. And if we don't have a token, we'll just return. Otherwise, we're going to make a reference to the device's collection in Firestore. The goal is to send a notification to every device that a user has registered, So we also wanna save the user ID on this document. I'm just hard coding a test user, but in real life, you'd wanna use the Firebase auth UID. And the token is just a string, so we can actually use that as the document ID.
And that's important because it ensures that every device in Firestore has a unique ID. Lastly, to listen to notifications, all we have to do is call on notification open, and that returns an observable that we can use in the front end. And I should point out that specifically for native apps, you'd wanna use a different method for web apps.
security
Now we need to run the get token method in one of our components. For now, I'm putting it in the home component, but you could also put it in the app component or some other root level page.
Inside this component, we'll want To import our FCM provider as well as the Toast controller from Ionic and the tap operator from RxJS. Then we can inject those in the constructor. Getting that token from the user is just a matter of calling this method, and it's going to handle everything else automatically on their device.
programming
Once we have the token, we want to listen for incoming messages and handle them accordingly. Ionic makes this really easy because it has a built in Toast notification service. So we can listen to our notifications and then use the tap operator to show a toast whenever a new message comes through. Every message will have a body and then we'll show it for 3 seconds and then it will automatically hide. That's an observable, so the last thing we have to do is subscribe to it. Let's go ahead and test it out by sending a message directly from the Firebase console.
You'll need to have an emulator running. In this case, I have Android going. Then I'm going to enter some message text. And when the apps open for the first time, it should generate a device token in Firestore. Go ahead and copy that token and then return back to the notifications tab.
phones
So here you can send the notification to a single device or to a topic or to a user segment. We'll get more into that when I release my full Ionic course. But for right now, we'll just send it to a single device. Click send, and you should see it pop up in the emulator. Cool. So that's really convenient. But in most cases, we're going to send notifications programmatically using Cloud Functions. That's what I'll show you next. But first, I wanna point out that if you're building on iOS, you also need to enable push notifications in your project in Xcode.
You You also need an Apple developer account and things like that, but that's beyond the scope of this video. What we wanna do next is build a cloud function that will notify a user whenever they get a new describer or follower or some other important event happens on their account.
apple
So run Firebase init functions, which will create a functions directory in the root of your project. I'm using TypeScript for my function, so I'm going to go into the functions directory to the source index ts file. Then we need to initialize the Firebase Admin SDK, and I'm exporting a function called new subscriber notification. This function is going to run whenever we have a new Firestore document created in the subscribers collection.
So you could think of this in the same way that you think of YouTube subscribers. What we wanna do is notify the owner of that channel whenever they get a new subscriber. We can make this an async function to return a promise, which is required in Cloud Functions.
youtube
And then we'll get the data from that document by calling event data data. Each document should have a user ID, which is the owner of the channel, and a subscriber, which is the user who is subscribing to that channel. Then we can use this information to format the actual notification content. So we'll set a title of new subscriber, and then we'll say subscriber name is following your content. You can also add an icon image as well. The next step is to find all the device tokens that belong to a given user. To do that, we make a reference to Firestore, And then we reference the device's collection and filter it by that user ID by saying where user ID equals this user ID. We can retrieve that data one time by calling get on it, and then we'll set up an empty array for each of the tokens that we want to send a message to.
Then devices is a snapshot query, so we need to call for each on it. And then for each token in that query, we're going to put it in our tokens array. Then the final step is to just call admin messaging, send to device with that token's array and the corresponding payload.
phones
Now go ahead and deploy your function, and we should be ready to put it to use. In this case, I have my function set up to trigger on the subscriber's collection. So I'm creating a new document in that collection and making sure the user ID matches test user, which we set up in our Ionic app. And sure enough, after we create that document, we get the notification in the device as expected. In the next few days, I'm going to release a full Ionic course that We'll go into much greater detail on Firebase Cloud Messaging and give you a solid starter template for building your own native mobile Ionic apps. If you're an active Pro member, you'll be able to enroll in that course for free. Thanks for watching, and I'll see you soon.
One of the best ways to keep your users engaged on a native mobile app is to send push notifications. Today, I'm going to show you how to set up Firebase Cloud Messaging with Ionic to do just that. This video is going to be a lot of because it ties together many of the resources in the Firebase platform, including Firestore, Cloud Functions, Messaging, and UserAuth. By the end of this video, you'll have a flexible notifications feature designed to work on both iOS and Android. If you're new here, make sure to like and subscribe, and you can find all of the code at angularfirebase.com and join the Slack team so we can chat about your questions together. The first thing I'll do is generate a brand new Ionic app. I'm using the tabs template, but that part's completely optional. Then I'm going to go into the config dot XML file and make sure that we have a custom widget ID that that we can use to register our project with Firebase. We're targeting native mobile apps on the App Store, so what we're going to do is register our app on the Firebase console for both iOS and Android. For both platforms, the only thing you have to do is enter your ID and click through the steps. You don't need to download the SDK or anything like that. When you finish the process, you'll want to download your config file for both platforms and save it in the root of your Ionic project. For Android, it's the Google services JSON file, and for iOS, it's the Google service dash info plist file. Now that our app is registered with Firebase, let's go ahead and add our dependencies. First, we have AngularFire 2, which gives us access to the Firestore database. Then we have the Firebase Cordova plugin for Ionic, which is going to give us access to native features for iOS and Android. Follow the official install instructions for both packages and then generate a custom Ionic provider called FCM. We'll use this provider to create a tightly integrated cross platform notifications feature. After following these steps, you should have an app module that looks something like this. We're importing AngularFire as well as Firestore, then adding our Firebase credentials. Then we should also have the Firebase native plug in as well as our custom FCM provider. AngularFire goes in the import section, and our Firebase plugin goes down here in the provider section. Before Before we write any more code, I wanna show you exactly how this feature works from the user perspective. Here we have an iPhone and it's prompting the user to allow permission to send push notifications. Notifications. When the user clicks allow, it's going to give us a token that will then be saved in the Firestore database. On that document, we'll also save the user ID so we can query all of the user's devices and send out a notification to every single device that that user has registered. If the user has their device open, It's going to bring up a Toast notification on that device. When the device is open, it's the developer's responsibility to handle the notification. When the app is in the background, we'll actually send a push notification through the native device. Then I'll show you how to send push notifications directly from the Firebase console and also programmatically via Cloud Functions. Most of the magic is going to happen in our FCM provider, so let's go ahead and start there. First, we'll bring in the Firebase plug in as well as platform and Firestore. Then we can inject these in the constructor. From there, its first responsibility is to retrieve the actual token from the user, which is just permission to send notifications to this device. We'll set this up as an async function, And then we need to check for the platform that we're actually retrieving this token from. When it's Android, we just need to call our native plugin Git token, and that's going to resolve with the token. When it's iOS, we have one additional step and that is to request permission from the user. That's going to trigger the iOS pop up modal that I showed you earlier. Then lastly, we could check to see if this is a web application and send a notification that way as well. For Right now, I'm just going to leave this as a to do because I've already covered it in episode 64. And also, AngularFire 2 is going to be releasing a cloud messaging module in the near future. So you can count on another video when that happens. Then the final thing we'll do in this method is save that token to Firestore, door, which is just a big long string. I'm going to extract this out into a different method. And if we don't have a token, we'll just return. Otherwise, we're going to make a reference to the device's collection in Firestore. The goal is to send a notification to every device that a user has registered, So we also wanna save the user ID on this document. I'm just hard coding a test user, but in real life, you'd wanna use the Firebase auth UID. And the token is just a string, so we can actually use that as the document ID. And that's important because it ensures that every device in Firestore has a unique ID. Lastly, to listen to notifications, all we have to do is call on notification open, and that returns an observable that we can use in the front end. And I should point out that specifically for native apps, you'd wanna use a different method for web apps. Now we need to run the get token method in one of our components. For now, I'm putting it in the home component, but you could also put it in the app component or some other root level page. Inside this component, we'll want To import our FCM provider as well as the Toast controller from Ionic and the tap operator from RxJS. Then we can inject those in the constructor. Getting that token from the user is just a matter of calling this method, and it's going to handle everything else automatically on their device. Once we have the token, we want to listen for incoming messages and handle them accordingly. Ionic makes this really easy because it has a built in Toast notification service. So we can listen to our notifications and then use the tap operator to show a toast whenever a new message comes through. Every message will have a body and then we'll show it for 3 seconds and then it will automatically hide. That's an observable, so the last thing we have to do is subscribe to it. Let's go ahead and test it out by sending a message directly from the Firebase console. You'll need to have an emulator running. In this case, I have Android going. Then I'm going to enter some message text. And when the apps open for the first time, it should generate a device token in Firestore. Go ahead and copy that token and then return back to the notifications tab. So here you can send the notification to a single device or to a topic or to a user segment. We'll get more into that when I release my full Ionic course. But for right now, we'll just send it to a single device. Click send, and you should see it pop up in the emulator. Cool. So that's really convenient. But in most cases, we're going to send notifications programmatically using Cloud Functions. That's what I'll show you next. But first, I wanna point out that if you're building on iOS, you also need to enable push notifications in your project in Xcode. You You also need an Apple developer account and things like that, but that's beyond the scope of this video. What we wanna do next is build a cloud function that will notify a user whenever they get a new describer or follower or some other important event happens on their account. So run Firebase init functions, which will create a functions directory in the root of your project. I'm using TypeScript for my function, so I'm going to go into the functions directory to the source index ts file. Then we need to initialize the Firebase Admin SDK, and I'm exporting a function called new subscriber notification. This function is going to run whenever we have a new Firestore document created in the subscribers collection. So you could think of this in the same way that you think of YouTube subscribers. What we wanna do is notify the owner of that channel whenever they get a new subscriber. We can make this an async function to return a promise, which is required in Cloud Functions. And then we'll get the data from that document by calling event data data. Each document should have a user ID, which is the owner of the channel, and a subscriber, which is the user who is subscribing to that channel. Then we can use this information to format the actual notification content. So we'll set a title of new subscriber, and then we'll say subscriber name is following your content. You can also add an icon image as well. The next step is to find all the device tokens that belong to a given user. To do that, we make a reference to Firestore, And then we reference the device's collection and filter it by that user ID by saying where user ID equals this user ID. We can retrieve that data one time by calling get on it, and then we'll set up an empty array for each of the tokens that we want to send a message to. Then devices is a snapshot query, so we need to call for each on it. And then for each token in that query, we're going to put it in our tokens array. Then the final step is to just call admin messaging, send to device with that token's array and the corresponding payload. Now go ahead and deploy your function, and we should be ready to put it to use. In this case, I have my function set up to trigger on the subscriber's collection. So I'm creating a new document in that collection and making sure the user ID matches test user, which we set up in our Ionic app. And sure enough, after we create that document, we get the notification in the device as expected. In the next few days, I'm going to release a full Ionic course that We'll go into much greater detail on Firebase Cloud Messaging and give you a solid starter template for building your own native mobile Ionic apps. If you're an active Pro member, you'll be able to enroll in that course for free. Thanks for watching, and I'll see you soon.
One
one
of
of
the
the
best
best
ways
ways
to
to
keep
keep
your
your
users
users
engaged
engaged
on
on
a
a
native
native
mobile
mobile
app
app
is
is
to
to
send
send
push
push
notifications.
notifications
Today,
today
I'm
i'm
going
going
to
to
show
show
you
you
how
how
to
to
set
set
up
up
Firebase
firebase
Cloud
cloud
Messaging
messaging
with
with
Ionic
ionic
to
to
do
do
just
just
that.
that
This
this
video
video
is
is
going
going
to
to
be
be
a
a
lot
lot
of
of
because
because
it
it
ties
ties
together
together
many
many
of
of
the
the
resources
resources
in
in
the
the
Firebase
firebase
platform,
platform
including
including
Firestore,
firestore
Cloud
cloud
Functions,
functions
Messaging,
messaging
and
and
UserAuth.
userauth
By
by
the
the
end
end
of
of
this
this
video,
video
you'll
you'll
have
have
a
a
flexible
flexible
notifications
notifications
feature
feature
designed
designed
to
to
work
work
on
on
both
both
iOS
ios
and
and
Android.
android
If
if
you're
you're
new
new
here,
here
make
make
sure
sure
to
to
like
like
and
and
subscribe,
subscribe
and
and
you
you
can
can
find
find
all
all
of
of
the
the
code
code
at
at
angularfirebase.com
angularfirebase.com
and
and
join
join
the
the
Slack
slack
team
team
so
so
we
we
can
can
chat
chat
about
about
your
your
questions
questions
together.
together
The
the
first
first
thing
thing
I'll
i'll
do
do
is
is
generate
generate
a
a
brand
brand
new
new
Ionic
ionic
app.
app
I'm
i'm
using
using
the
the
tabs
tabs
template,
template
but
but
that
that
part's
part's
completely
completely
optional.
optional
Then
then
I'm
i'm
going
going
to
to
go
go
into
into
the
the
config
config
dot
dot
XML
xml
file
file
and
and
make
make
sure
sure
that
that
we
we
have
have
a
a
custom
custom
widget
widget
ID
id
that
that
that
that
we
we
can
can
use
use
to
to
register
register
our
our
project
project
with
with
Firebase.
firebase
We're
we're
targeting
targeting
native
native
mobile
mobile
apps
apps
on
on
the
the
App
app
Store,
store
so
so
what
what
we're
we're
going
going
to
to
do
do
is
is
register
register
our
our
app
app
on
on
the
the
Firebase
firebase
console
console
for
for
both
both
iOS
ios
and
and
Android.
android
For
for
both
both
platforms,
platforms
the
the
only
only
thing
thing
you
you
have
have
to
to
do
do
is
is
enter
enter
your
your
ID
id
and
and
click
click
through
through
the
the
steps.
steps
You
you
don't
don't
need
need
to
to
download
download
the
the
SDK
sdk
or
or
anything
anything
like
like
that.
that
When
when
you
you
finish
finish
the
the
process,
process
you'll
you'll
want
want
to
to
download
download
your
your
config
config
file
file
for
for
both
both
platforms
platforms
and
and
save
save
it
it
in
in
the
the
root
root
of
of
your
your
Ionic
ionic
project.
project
For
for
Android,
android
it's
it's
the
the
Google
google
services
services
JSON
json
file,
file
and
and
for
for
iOS,
ios
it's
it's
the
the
Google
google
service
service
dash
dash
info
info
plist
plist
file.
file
Now
now
that
that
our
our
app
app
is
is
registered
registered
with
with
Firebase,
firebase
let's
let's
go
go
ahead
ahead
and
and
add
add
our
our
dependencies.
dependencies
First,
first
we
we
have
have
AngularFire
angularfire
2,
2
which
which
gives
gives
us
us
access
access
to
to
the
the
Firestore
firestore
database.
database
Then
then
we
we
have
have
the
the
Firebase
firebase
Cordova
cordova
plugin
plugin
for
for
Ionic,
ionic
which
which
is
is
going
going
to
to
give
give
us
us
access
access
to
to
native
native
features
features
for
for
iOS
ios
and
and
Android.
android
Follow
follow
the
the
official
official
install
install
instructions
instructions
for
for
both
both
packages
packages
and
and
then
then
generate
generate
a
a
custom
custom
Ionic
ionic
provider
provider
called
called
FCM.
fcm
We'll
we'll
use
use
this
this
provider
provider
to
to
create
create
a
a
tightly
tightly
integrated
integrated
cross
cross
platform
platform
notifications
notifications
feature.
feature
After
after
following
following
these
these
steps,
steps
you
you
should
should
have
have
an
an
app
app
module
module
that
that
looks
looks
something
something
like
like
this.
this
We're
we're
importing
importing
AngularFire
angularfire
as
as
well
well
as
as
Firestore,
firestore
then
then
adding
adding
our
our
Firebase
firebase
credentials.
credentials
Then
then
we
we
should
should
also
also
have
have
the
the
Firebase
firebase
native
native
plug
plug
in
in
as
as
well
well
as
as
our
our
custom
custom
FCM
fcm
provider.
provider
AngularFire
angularfire
goes
goes
in
in
the
the
import
import
section,
section
and
and
our
our
Firebase
firebase
plugin
plugin
goes
goes
down
down
here
here
in
in
the
the
provider
provider
section.
section
Before
before
Before
before
we
we
write
write
any
any
more
more
code,
code
I
i
wanna
wanna
show
show
you
you
exactly
exactly
how
how
this
this
feature
feature
works
works
from
from
the
the
user
user
perspective.
perspective
Here
here
we
we
have
have
an
an
iPhone
iphone
and
and
it's
it's
prompting
prompting
the
the
user
user
to
to
allow
allow
permission
permission
to
to
send
send
push
push
notifications.
notifications
Notifications.
notifications
When
when
the
the
user
user
clicks
clicks
allow,
allow
it's
it's
going
going
to
to
give
give
us
us
a
a
token
token
that
that
will
will
then
then
be
be
saved
saved
in
in
the
the
Firestore
firestore
database.
database
On
on
that
that
document,
document
we'll
we'll
also
also
save
save
the
the
user
user
ID
id
so
so
we
we
can
can
query
query
all
all
of
of
the
the
user's
user's
devices
devices
and
and
send
send
out
out
a
a
notification
notification
to
to
every
every
single
single
device
device
that
that
that
that
user
user
has
has
registered.
registered
If
if
the
the
user
user
has
has
their
their
device
device
open,
open
It's
it's
going
going
to
to
bring
bring
up
up
a
a
Toast
toast
notification
notification
on
on
that
that
device.
device
When
when
the
the
device
device
is
is
open,
open
it's
it's
the
the
developer's
developer's
responsibility
responsibility
to
to
handle
handle
the
the
notification.
notification
When
when
the
the
app
app
is
is
in
in
the
the
background,
background
we'll
we'll
actually
actually
send
send
a
a
push
push
notification
notification
through
through
the
the
native
native
device.
device
Then
then
I'll
i'll
show
show
you
you
how
how
to
to
send
send
push
push
notifications
notifications
directly
directly
from
from
the
the
Firebase
firebase
console
console
and
and
also
also
programmatically
programmatically
via
via
Cloud
cloud
Functions.
functions
Most
most
of
of
the
the
magic
magic
is
is
going
going
to
to
happen
happen
in
in
our
our
FCM
fcm
provider,
provider
so
so
let's
let's
go
go
ahead
ahead
and
and
start
start
there.
there
First,
first
we'll
we'll
bring
bring
in
in
the
the
Firebase
firebase
plug
plug
in
in
as
as
well
well
as
as
platform
platform
and
and
Firestore.
firestore
Then
then
we
we
can
can
inject
inject
these
these
in
in
the
the
constructor.
constructor
From
from
there,
there
its
its
first
first
responsibility
responsibility
is
is
to
to
retrieve
retrieve
the
the
actual
actual
token
token
from
from
the
the
user,
user
which
which
is
is
just
just
permission
permission
to
to
send
send
notifications
notifications
to
to
this
this
device.
device
We'll
we'll
set
set
this
this
up
up
as
as
an
an
async
async
function,
function
And
and
then
then
we
we
need
need
to
to
check
check
for
for
the
the
platform
platform
that
that
we're
we're
actually
actually
retrieving
retrieving
this
this
token
token
from.
from
When
when
it's
it's
Android,
android
we
we
just
just
need
need
to
to
call
call
our
our
native
native
plugin
plugin
Git
git
token,
token
and
and
that's
that's
going
going
to
to
resolve
resolve
with
with
the
the
token.
token
When
when
it's
it's
iOS,
ios
we
we
have
have
one
one
additional
additional
step
step
and
and
that
that
is
is
to
to
request
request
permission
permission
from
from
the
the
user.
user
That's
that's
going
going
to
to
trigger
trigger
the
the
iOS
ios
pop
pop
up
up
modal
modal
that
that
I
i
showed
showed
you
you
earlier.
earlier
Then
then
lastly,
lastly
we
we
could
could
check
check
to
to
see
see
if
if
this
this
is
is
a
a
web
web
application
application
and
and
send
send
a
a
notification
notification
that
that
way
way
as
as
well.
well
For
for
Right
right
now,
now
I'm
i'm
just
just
going
going
to
to
leave
leave
this
this
as
as
a
a
to
to
do
do
because
because
I've
i've
already
already
covered
covered
it
it
in
in
episode
episode
64.
64
And
and
also,
also
AngularFire
angularfire
2
2
is
is
going
going
to
to
be
be
releasing
releasing
a
a
cloud
cloud
messaging
messaging
module
module
in
in
the
the
near
near
future.
future
So
so
you
you
can
can
count
count
on
on
another
another
video
video
when
when
that
that
happens.
happens
Then
then
the
the
final
final
thing
thing
we'll
we'll
do
do
in
in
this
this
method
method
is
is
save
save
that
that
token
token
to
to
Firestore,
firestore
door,
door
which
which
is
is
just
just
a
a
big
big
long
long
string.
string
I'm
i'm
going
going
to
to
extract
extract
this
this
out
out
into
into
a
a
different
different
method.
method
And
and
if
if
we
we
don't
don't
have
have
a
a
token,
token
we'll
we'll
just
just
return.
return
Otherwise,
otherwise
we're
we're
going
going
to
to
make
make
a
a
reference
reference
to
to
the
the
device's
device's
collection
collection
in
in
Firestore.
firestore
The
the
goal
goal
is
is
to
to
send
send
a
a
notification
notification
to
to
every
every
device
device
that
that
a
a
user
user
has
has
registered,
registered
So
so
we
we
also
also
wanna
wanna
save
save
the
the
user
user
ID
id
on
on
this
this
document.
document
I'm
i'm
just
just
hard
hard
coding
coding
a
a
test
test
user,
user
but
but
in
in
real
real
life,
life
you'd
you'd
wanna
wanna
use
use
the
the
Firebase
firebase
auth
auth
UID.
uid
And
and
the
the
token
token
is
is
just
just
a
a
string,
string
so
so
we
we
can
can
actually
actually
use
use
that
that
as
as
the
the
document
document
ID.
id
And
and
that's
that's
important
important
because
because
it
it
ensures
ensures
that
that
every
every
device
device
in
in
Firestore
firestore
has
has
a
a
unique
unique
ID.
id
Lastly,
lastly
to
to
listen
listen
to
to
notifications,
notifications
all
all
we
we
have
have
to
to
do
do
is
is
call
call
on
on
notification
notification
open,
open
and
and
that
that
returns
returns
an
an
observable
observable
that
that
we
we
can
can
use
use
in
in
the
the
front
front
end.
end
And
and
I
i
should
should
point
point
out
out
that
that
specifically
specifically
for
for
native
native
apps,
apps
you'd
you'd
wanna
wanna
use
use
a
a
different
different
method
method
for
for
web
web
apps.
apps
Now
now
we
we
need
need
to
to
run
run
the
the
get
get
token
token
method
method
in
in
one
one
of
of
our
our
components.
components
For
for
now,
now
I'm
i'm
putting
putting
it
it
in
in
the
the
home
home
component,
component
but
but
you
you
could
could
also
also
put
put
it
it
in
in
the
the
app
app
component
component
or
or
some
some
other
other
root
root
level
level
page.
page
Inside
inside
this
this
component,
component
we'll
we'll
want
want
To
to
import
import
our
our
FCM
fcm
provider
provider
as
as
well
well
as
as
the
the
Toast
toast
controller
controller
from
from
Ionic
ionic
and
and
the
the
tap
tap
operator
operator
from
from
RxJS.
rxjs
Then
then
we
we
can
can
inject
inject
those
those
in
in
the
the
constructor.
constructor
Getting
getting
that
that
token
token
from
from
the
the
user
user
is
is
just
just
a
a
matter
matter
of
of
calling
calling
this
this
method,
method
and
and
it's
it's
going
going
to
to
handle
handle
everything
everything
else
else
automatically
automatically
on
on
their
their
device.
device
Once
once
we
we
have
have
the
the
token,
token
we
we
want
want
to
to
listen
listen
for
for
incoming
incoming
messages
messages
and
and
handle
handle
them
them
accordingly.
accordingly
Ionic
ionic
makes
makes
this
this
really
really
easy
easy
because
because
it
it
has
has
a
a
built
built
in
in
Toast
toast
notification
notification
service.
service
So
so
we
we
can
can
listen
listen
to
to
our
our
notifications
notifications
and
and
then
then
use
use
the
the
tap
tap
operator
operator
to
to
show
show
a
a
toast
toast
whenever
whenever
a
a
new
new
message
message
comes
comes
through.
through
Every
every
message
message
will
will
have
have
a
a
body
body
and
and
then
then
we'll
we'll
show
show
it
it
for
for
3
3
seconds
seconds
and
and
then
then
it
it
will
will
automatically
automatically
hide.
hide
That's
that's
an
an
observable,
observable
so
so
the
the
last
last
thing
thing
we
we
have
have
to
to
do
do
is
is
subscribe
subscribe
to
to
it.
it
Let's
let's
go
go
ahead
ahead
and
and
test
test
it
it
out
out
by
by
sending
sending
a
a
message
message
directly
directly
from
from
the
the
Firebase
firebase
console.
console
You'll
you'll
need
need
to
to
have
have
an
an
emulator
emulator
running.
running
In
in
this
this
case,
case
I
i
have
have
Android
android
going.
going
Then
then
I'm
i'm
going
going
to
to
enter
enter
some
some
message
message
text.
text
And
and
when
when
the
the
apps
apps
open
open
for
for
the
the
first
first
time,
time
it
it
should
should
generate
generate
a
a
device
device
token
token
in
in
Firestore.
firestore
Go
go
ahead
ahead
and
and
copy
copy
that
that
token
token
and
and
then
then
return
return
back
back
to
to
the
the
notifications
notifications
tab.
tab
So
so
here
here
you
you
can
can
send
send
the
the
notification
notification
to
to
a
a
single
single
device
device
or
or
to
to
a
a
topic
topic
or
or
to
to
a
a
user
user
segment.
segment
We'll
we'll
get
get
more
more
into
into
that
that
when
when
I
i
release
release
my
my
full
full
Ionic
ionic
course.
course
But
but
for
for
right
right
now,
now
we'll
we'll
just
just
send
send
it
it
to
to
a
a
single
single
device.
device
Click
click
send,
send
and
and
you
you
should
should
see
see
it
it
pop
pop
up
up
in
in
the
the
emulator.
emulator
Cool.
cool
So
so
that's
that's
really
really
convenient.
convenient
But
but
in
in
most
most
cases,
cases
we're
we're
going
going
to
to
send
send
notifications
notifications
programmatically
programmatically
using
using
Cloud
cloud
Functions.
functions
That's
that's
what
what
I'll
i'll
show
show
you
you
next.
next
But
but
first,
first
I
i
wanna
wanna
point
point
out
out
that
that
if
if
you're
you're
building
building
on
on
iOS,
ios
you
you
also
also
need
need
to
to
enable
enable
push
push
notifications
notifications
in
in
your
your
project
project
in
in
Xcode.
xcode
You
you
You
you
also
also
need
need
an
an
Apple
apple
developer
developer
account
account
and
and
things
things
like
like
that,
that
but
but
that's
that's
beyond
beyond
the
the
scope
scope
of
of
this
this
video.
video
What
what
we
we
wanna
wanna
do
do
next
next
is
is
build
build
a
a
cloud
cloud
function
function
that
that
will
will
notify
notify
a
a
user
user
whenever
whenever
they
they
get
get
a
a
new
new
describer
describer
or
or
follower
follower
or
or
some
some
other
other
important
important
event
event
happens
happens
on
on
their
their
account.
account
So
so
run
run
Firebase
firebase
init
init
functions,
functions
which
which
will
will
create
create
a
a
functions
functions
directory
directory
in
in
the
the
root
root
of
of
your
your
project.
project
I'm
i'm
using
using
TypeScript
typescript
for
for
my
my
function,
function
so
so
I'm
i'm
going
going
to
to
go
go
into
into
the
the
functions
functions
directory
directory
to
to
the
the
source
source
index
index
ts
ts
file.
file
Then
then
we
we
need
need
to
to
initialize
initialize
the
the
Firebase
firebase
Admin
admin
SDK,
sdk
and
and
I'm
i'm
exporting
exporting
a
a
function
function
called
called
new
new
subscriber
subscriber
notification.
notification
This
this
function
function
is
is
going
going
to
to
run
run
whenever
whenever
we
we
have
have
a
a
new
new
Firestore
firestore
document
document
created
created
in
in
the
the
subscribers
subscribers
collection.
collection
So
so
you
you
could
could
think
think
of
of
this
this
in
in
the
the
same
same
way
way
that
that
you
you
think
think
of
of
YouTube
youtube
subscribers.
subscribers
What
what
we
we
wanna
wanna
do
do
is
is
notify
notify
the
the
owner
owner
of
of
that
that
channel
channel
whenever
whenever
they
they
get
get
a
a
new
new
subscriber.
subscriber
We
we
can
can
make
make
this
this
an
an
async
async
function
function
to
to
return
return
a
a
promise,
promise
which
which
is
is
required
required
in
in
Cloud
cloud
Functions.
functions
And
and
then
then
we'll
we'll
get
get
the
the
data
data
from
from
that
that
document
document
by
by
calling
calling
event
event
data
data
data.
data
Each
each
document
document
should
should
have
have
a
a
user
user
ID,
id
which
which
is
is
the
the
owner
owner
of
of
the
the
channel,
channel
and
and
a
a
subscriber,
subscriber
which
which
is
is
the
the
user
user
who
who
is
is
subscribing
subscribing
to
to
that
that
channel.
channel
Then
then
we
we
can
can
use
use
this
this
information
information
to
to
format
format
the
the
actual
actual
notification
notification
content.
content
So
so
we'll
we'll
set
set
a
a
title
title
of
of
new
new
subscriber,
subscriber
and
and
then
then
we'll
we'll
say
say
subscriber
subscriber
name
name
is
is
following
following
your
your
content.
content
You
you
can
can
also
also
add
add
an
an
icon
icon
image
image
as
as
well.
well
The
the
next
next
step
step
is
is
to
to
find
find
all
all
the
the
device
device
tokens
tokens
that
that
belong
belong
to
to
a
a
given
given
user.
user
To
to
do
do
that,
that
we
we
make
make
a
a
reference
reference
to
to
Firestore,
firestore
And
and
then
then
we
we
reference
reference
the
the
device's
device's
collection
collection
and
and
filter
filter
it
it
by
by
that
that
user
user
ID
id
by
by
saying
saying
where
where
user
user
ID
id
equals
equals
this
this
user
user
ID.
id
We
we
can
can
retrieve
retrieve
that
that
data
data
one
one
time
time
by
by
calling
calling
get
get
on
on
it,
it
and
and
then
then
we'll
we'll
set
set
up
up
an
an
empty
empty
array
array
for
for
each
each
of
of
the
the
tokens
tokens
that
that
we
we
want
want
to
to
send
send
a
a
message
message
to.
to
Then
then
devices
devices
is
is
a
a
snapshot
snapshot
query,
query
so
so
we
we
need
need
to
to
call
call
for
for
each
each
on
on
it.
it
And
and
then
then
for
for
each
each
token
token
in
in
that
that
query,
query
we're
we're
going
going
to
to
put
put
it
it
in
in
our
our
tokens
tokens
array.
array
Then
then
the
the
final
final
step
step
is
is
to
to
just
just
call
call
admin
admin
messaging,
messaging
send
send
to
to
device
device
with
with
that
that
token's
token's
array
array
and
and
the
the
corresponding
corresponding
payload.
payload
Now
now
go
go
ahead
ahead
and
and
deploy
deploy
your
your
function,
function
and
and
we
we
should
should
be
be
ready
ready
to
to
put
put
it
it
to
to
use.
use
In
in
this
this
case,
case
I
i
have
have
my
my
function
function
set
set
up
up
to
to
trigger
trigger
on
on
the
the
subscriber's
subscriber's
collection.
collection
So
so
I'm
i'm
creating
creating
a
a
new
new
document
document
in
in
that
that
collection
collection
and
and
making
making
sure
sure
the
the
user
user
ID
id
matches
matches
test
test
user,
user
which
which
we
we
set
set
up
up
in
in
our
our
Ionic
ionic
app.
app
And
and
sure
sure
enough,
enough
after
after
we
we
create
create
that
that
document,
document
we
we
get
get
the
the
notification
notification
in
in
the
the
device
device
as
as
expected.
expected
In
in
the
the
next
next
few
few
days,
days
I'm
i'm
going
going
to
to
release
release
a
a
full
full
Ionic
ionic
course
course
that
that
We'll
we'll
go
go
into
into
much
much
greater
greater
detail
detail
on
on
Firebase
firebase
Cloud
cloud
Messaging
messaging
and
and
give
give
you
you
a
a
solid
solid
starter
starter
template
template
for
for
building
building
your
your
own
own
native
native
mobile
mobile
Ionic
ionic
apps.
apps
If
if
you're
you're
an
an
active
active
Pro
pro
member,
member
you'll
you'll
be
be
able
able
to
to
enroll
enroll
in
in
that
that
course
course
for
for
free.
free
Thanks
thanks
for
for
watching,
watching
and
and
I'll
i'll
see
see
you
you
soon.
soon
success
The speakers discuss usingeseech Cloud Messaging for native mobile apps, including push notifications and setting up custom widget IDs. They also explain how to register apps on both iOS and Android, input the necessary information, and create a custom Ionic provider. They also discuss the process of sending push notifications and obtaining a unique user ID. The speakers provide starting templates for building native Ionic apps and encourage those who are active Pro members to enroll in a free course.
Ionic Native Push Notifications + Firebase Cloud Messaging
One of the best ways to keep your users engaged on a native mobile app is to send push notifications. Today, I'm going to show you how to set up Firebase Cloud Messaging with Ionic to do just that. This video is going to be a lot of because it ties together many of the resources in the Firebase platform, including Firestore, Cloud Functions, Messaging, and UserAuth. By the end of this video, you'll have a flexible notifications feature designed to work on both iOS and Android. If you're new here, make sure to like and subscribe, and you can find all of the code at angularfirebase.com and join the Slack team so we can chat about your questions together. The first thing I'll do is generate a brand new Ionic app. I'm using the tabs template, but that part's completely optional. Then I'm going to go into the config dot XML file and make sure that we have a custom widget ID that that we can use to register our project with Firebase. We're targeting native mobile apps on the App Store, so what we're going to do is register our app on the Firebase console for both iOS and Android. For both platforms, the only thing you have to do is enter your ID and click through the steps. You don't need to download the SDK or anything like that. When you finish the process, you'll want to download your config file for both platforms and save it in the root of your Ionic project. For Android, it's the Google services JSON file, and for iOS, it's the Google service dash info plist file. Now that our app is registered with Firebase, let's go ahead and add our dependencies. First, we have AngularFire 2, which gives us access to the Firestore database. Then we have the Firebase Cordova plugin for Ionic, which is going to give us access to native features for iOS and Android. Follow the official install instructions for both packages and then generate a custom Ionic provider called FCM. We'll use this provider to create a tightly integrated cross platform notifications feature. After following these steps, you should have an app module that looks something like this. We're importing AngularFire as well as Firestore, then adding our Firebase credentials. Then we should also have the Firebase native plug in as well as our custom FCM provider. AngularFire goes in the import section, and our Firebase plugin goes down here in the provider section. Before Before we write any more code, I wanna show you exactly how this feature works from the user perspective. Here we have an iPhone and it's prompting the user to allow permission to send push notifications. Notifications. When the user clicks allow, it's going to give us a token that will then be saved in the Firestore database. On that document, we'll also save the user ID so we can query all of the user's devices and send out a notification to every single device that that user has registered. If the user has their device open, It's going to bring up a Toast notification on that device. When the device is open, it's the developer's responsibility to handle the notification. When the app is in the background, we'll actually send a push notification through the native device. Then I'll show you how to send push notifications directly from the Firebase console and also programmatically via Cloud Functions. Most of the magic is going to happen in our FCM provider, so let's go ahead and start there. First, we'll bring in the Firebase plug in as well as platform and Firestore. Then we can inject these in the constructor. From there, its first responsibility is to retrieve the actual token from the user, which is just permission to send notifications to this device. We'll set this up as an async function, And then we need to check for the platform that we're actually retrieving this token from. When it's Android, we just need to call our native plugin Git token, and that's going to resolve with the token. When it's iOS, we have one additional step and that is to request permission from the user. That's going to trigger the iOS pop up modal that I showed you earlier. Then lastly, we could check to see if this is a web application and send a notification that way as well. For Right now, I'm just going to leave this as a to do because I've already covered it in episode 64. And also, AngularFire 2 is going to be releasing a cloud messaging module in the near future. So you can count on another video when that happens. Then the final thing we'll do in this method is save that token to Firestore, door, which is just a big long string. I'm going to extract this out into a different method. And if we don't have a token, we'll just return. Otherwise, we're going to make a reference to the device's collection in Firestore. The goal is to send a notification to every device that a user has registered, So we also wanna save the user ID on this document. I'm just hard coding a test user, but in real life, you'd wanna use the Firebase auth UID. And the token is just a string, so we can actually use that as the document ID. And that's important because it ensures that every device in Firestore has a unique ID. Lastly, to listen to notifications, all we have to do is call on notification open, and that returns an observable that we can use in the front end. And I should point out that specifically for native apps, you'd wanna use a different method for web apps. Now we need to run the get token method in one of our components. For now, I'm putting it in the home component, but you could also put it in the app component or some other root level page. Inside this component, we'll want To import our FCM provider as well as the Toast controller from Ionic and the tap operator from RxJS. Then we can inject those in the constructor. Getting that token from the user is just a matter of calling this method, and it's going to handle everything else automatically on their device. Once we have the token, we want to listen for incoming messages and handle them accordingly. Ionic makes this really easy because it has a built in Toast notification service. So we can listen to our notifications and then use the tap operator to show a toast whenever a new message comes through. Every message will have a body and then we'll show it for 3 seconds and then it will automatically hide. That's an observable, so the last thing we have to do is subscribe to it. Let's go ahead and test it out by sending a message directly from the Firebase console. You'll need to have an emulator running. In this case, I have Android going. Then I'm going to enter some message text. And when the apps open for the first time, it should generate a device token in Firestore. Go ahead and copy that token and then return back to the notifications tab. So here you can send the notification to a single device or to a topic or to a user segment. We'll get more into that when I release my full Ionic course. But for right now, we'll just send it to a single device. Click send, and you should see it pop up in the emulator. Cool. So that's really convenient. But in most cases, we're going to send notifications programmatically using Cloud Functions. That's what I'll show you next. But first, I wanna point out that if you're building on iOS, you also need to enable push notifications in your project in Xcode. You You also need an Apple developer account and things like that, but that's beyond the scope of this video. What we wanna do next is build a cloud function that will notify a user whenever they get a new describer or follower or some other important event happens on their account. So run Firebase init functions, which will create a functions directory in the root of your project. I'm using TypeScript for my function, so I'm going to go into the functions directory to the source index ts file. Then we need to initialize the Firebase Admin SDK, and I'm exporting a function called new subscriber notification. This function is going to run whenever we have a new Firestore document created in the subscribers collection. So you could think of this in the same way that you think of YouTube subscribers. What we wanna do is notify the owner of that channel whenever they get a new subscriber. We can make this an async function to return a promise, which is required in Cloud Functions. And then we'll get the data from that document by calling event data data. Each document should have a user ID, which is the owner of the channel, and a subscriber, which is the user who is subscribing to that channel. Then we can use this information to format the actual notification content. So we'll set a title of new subscriber, and then we'll say subscriber name is following your content. You can also add an icon image as well. The next step is to find all the device tokens that belong to a given user. To do that, we make a reference to Firestore, And then we reference the device's collection and filter it by that user ID by saying where user ID equals this user ID. We can retrieve that data one time by calling get on it, and then we'll set up an empty array for each of the tokens that we want to send a message to. Then devices is a snapshot query, so we need to call for each on it. And then for each token in that query, we're going to put it in our tokens array. Then the final step is to just call admin messaging, send to device with that token's array and the corresponding payload. Now go ahead and deploy your function, and we should be ready to put it to use. In this case, I have my function set up to trigger on the subscriber's collection. So I'm creating a new document in that collection and making sure the user ID matches test user, which we set up in our Ionic app. And sure enough, after we create that document, we get the notification in the device as expected. In the next few days, I'm going to release a full Ionic course that We'll go into much greater detail on Firebase Cloud Messaging and give you a solid starter template for building your own native mobile Ionic apps. If you're an active Pro member, you'll be able to enroll in that course for free. Thanks for watching, and I'll see you soon.
The speakers discuss usingeseech Cloud Messaging for native mobile apps, including push notifications and setting up custom widget IDs. They also explain how to register apps on both iOS and Android, input the necessary information, and create a custom Ionic provider. They also discuss the process of sending push notifications and obtaining a unique user ID. The speakers provide starting templates for building native Ionic apps and encourage those who are active Pro members to enroll in a free course.

        [INST]
        You are youtuber called Fireship you make engaging high-intensity and entertaining coding tutorials and tech news. 
        you covers a wide range of topics relevant to programmers, aiming to help them learn and improve their skills quickly.
        
        Given the title of the video : Ionic Native Push Notifications + Firebase Cloud Messaging 
        and a small summary : The speakers discuss usingeseech Cloud Messaging for native mobile apps, including push notifications and setting up custom widget IDs. They also explain how to register apps on both iOS and Android, input the necessary information, and create a custom Ionic provider. They also discuss the process of sending push notifications and obtaining a unique user ID. The speakers provide starting templates for building native Ionic apps and encourage those who are active Pro members to enroll in a free course.
        [/INST]
        
        Generate the video : One of the best ways to keep your users engaged on a native mobile app is to send push notifications. Today, I'm going to show you how to set up Firebase Cloud Messaging with Ionic to do just that. This video is going to be a lot of because it ties together many of the resources in the Firebase platform, including Firestore, Cloud Functions, Messaging, and UserAuth. By the end of this video, you'll have a flexible notifications feature designed to work on both iOS and Android. If you're new here, make sure to like and subscribe, and you can find all of the code at angularfirebase.com and join the Slack team so we can chat about your questions together. The first thing I'll do is generate a brand new Ionic app. I'm using the tabs template, but that part's completely optional. Then I'm going to go into the config dot XML file and make sure that we have a custom widget ID that that we can use to register our project with Firebase. We're targeting native mobile apps on the App Store, so what we're going to do is register our app on the Firebase console for both iOS and Android. For both platforms, the only thing you have to do is enter your ID and click through the steps. You don't need to download the SDK or anything like that. When you finish the process, you'll want to download your config file for both platforms and save it in the root of your Ionic project. For Android, it's the Google services JSON file, and for iOS, it's the Google service dash info plist file. Now that our app is registered with Firebase, let's go ahead and add our dependencies. First, we have AngularFire 2, which gives us access to the Firestore database. Then we have the Firebase Cordova plugin for Ionic, which is going to give us access to native features for iOS and Android. Follow the official install instructions for both packages and then generate a custom Ionic provider called FCM. We'll use this provider to create a tightly integrated cross platform notifications feature. After following these steps, you should have an app module that looks something like this. We're importing AngularFire as well as Firestore, then adding our Firebase credentials. Then we should also have the Firebase native plug in as well as our custom FCM provider. AngularFire goes in the import section, and our Firebase plugin goes down here in the provider section. Before Before we write any more code, I wanna show you exactly how this feature works from the user perspective. Here we have an iPhone and it's prompting the user to allow permission to send push notifications. Notifications. When the user clicks allow, it's going to give us a token that will then be saved in the Firestore database. On that document, we'll also save the user ID so we can query all of the user's devices and send out a notification to every single device that that user has registered. If the user has their device open, It's going to bring up a Toast notification on that device. When the device is open, it's the developer's responsibility to handle the notification. When the app is in the background, we'll actually send a push notification through the native device. Then I'll show you how to send push notifications directly from the Firebase console and also programmatically via Cloud Functions. Most of the magic is going to happen in our FCM provider, so let's go ahead and start there. First, we'll bring in the Firebase plug in as well as platform and Firestore. Then we can inject these in the constructor. From there, its first responsibility is to retrieve the actual token from the user, which is just permission to send notifications to this device. We'll set this up as an async function, And then we need to check for the platform that we're actually retrieving this token from. When it's Android, we just need to call our native plugin Git token, and that's going to resolve with the token. When it's iOS, we have one additional step and that is to request permission from the user. That's going to trigger the iOS pop up modal that I showed you earlier. Then lastly, we could check to see if this is a web application and send a notification that way as well. For Right now, I'm just going to leave this as a to do because I've already covered it in episode 64. And also, AngularFire 2 is going to be releasing a cloud messaging module in the near future. So you can count on another video when that happens. Then the final thing we'll do in this method is save that token to Firestore, door, which is just a big long string. I'm going to extract this out into a different method. And if we don't have a token, we'll just return. Otherwise, we're going to make a reference to the device's collection in Firestore. The goal is to send a notification to every device that a user has registered, So we also wanna save the user ID on this document. I'm just hard coding a test user, but in real life, you'd wanna use the Firebase auth UID. And the token is just a string, so we can actually use that as the document ID. And that's important because it ensures that every device in Firestore has a unique ID. Lastly, to listen to notifications, all we have to do is call on notification open, and that returns an observable that we can use in the front end. And I should point out that specifically for native apps, you'd wanna use a different method for web apps. Now we need to run the get token method in one of our components. For now, I'm putting it in the home component, but you could also put it in the app component or some other root level page. Inside this component, we'll want To import our FCM provider as well as the Toast controller from Ionic and the tap operator from RxJS. Then we can inject those in the constructor. Getting that token from the user is just a matter of calling this method, and it's going to handle everything else automatically on their device. Once we have the token, we want to listen for incoming messages and handle them accordingly. Ionic makes this really easy because it has a built in Toast notification service. So we can listen to our notifications and then use the tap operator to show a toast whenever a new message comes through. Every message will have a body and then we'll show it for 3 seconds and then it will automatically hide. That's an observable, so the last thing we have to do is subscribe to it. Let's go ahead and test it out by sending a message directly from the Firebase console. You'll need to have an emulator running. In this case, I have Android going. Then I'm going to enter some message text. And when the apps open for the first time, it should generate a device token in Firestore. Go ahead and copy that token and then return back to the notifications tab. So here you can send the notification to a single device or to a topic or to a user segment. We'll get more into that when I release my full Ionic course. But for right now, we'll just send it to a single device. Click send, and you should see it pop up in the emulator. Cool. So that's really convenient. But in most cases, we're going to send notifications programmatically using Cloud Functions. That's what I'll show you next. But first, I wanna point out that if you're building on iOS, you also need to enable push notifications in your project in Xcode. You You also need an Apple developer account and things like that, but that's beyond the scope of this video. What we wanna do next is build a cloud function that will notify a user whenever they get a new describer or follower or some other important event happens on their account. So run Firebase init functions, which will create a functions directory in the root of your project. I'm using TypeScript for my function, so I'm going to go into the functions directory to the source index ts file. Then we need to initialize the Firebase Admin SDK, and I'm exporting a function called new subscriber notification. This function is going to run whenever we have a new Firestore document created in the subscribers collection. So you could think of this in the same way that you think of YouTube subscribers. What we wanna do is notify the owner of that channel whenever they get a new subscriber. We can make this an async function to return a promise, which is required in Cloud Functions. And then we'll get the data from that document by calling event data data. Each document should have a user ID, which is the owner of the channel, and a subscriber, which is the user who is subscribing to that channel. Then we can use this information to format the actual notification content. So we'll set a title of new subscriber, and then we'll say subscriber name is following your content. You can also add an icon image as well. The next step is to find all the device tokens that belong to a given user. To do that, we make a reference to Firestore, And then we reference the device's collection and filter it by that user ID by saying where user ID equals this user ID. We can retrieve that data one time by calling get on it, and then we'll set up an empty array for each of the tokens that we want to send a message to. Then devices is a snapshot query, so we need to call for each on it. And then for each token in that query, we're going to put it in our tokens array. Then the final step is to just call admin messaging, send to device with that token's array and the corresponding payload. Now go ahead and deploy your function, and we should be ready to put it to use. In this case, I have my function set up to trigger on the subscriber's collection. So I'm creating a new document in that collection and making sure the user ID matches test user, which we set up in our Ionic app. And sure enough, after we create that document, we get the notification in the device as expected. In the next few days, I'm going to release a full Ionic course that We'll go into much greater detail on Firebase Cloud Messaging and give you a solid starter template for building your own native mobile Ionic apps. If you're an active Pro member, you'll be able to enroll in that course for free. Thanks for watching, and I'll see you soon.
        