Send topic-based web push notifications using FCM and Ionic 4. Broadcast messages to millions of users with just a few simple cloud functions https://angularfirebase.com/lessons/fcm-topic-notifications-angularfire-and-callable-functions/

- FCM https://firebase.google.com/docs/cloud-messaging/
- Ionic 4 https://blog.ionicframework.com/announcing-ionic-4-beta/
2024-02-04T07:16:15.112Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
8f75d46e-aa49-46b8-ab7c-564dab6c5850
cef9f0846d10033f10b09b8be245d3e3e8d42b9b340d921efacb90d66328b2b4
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
Push notifications are a great way to keep your users engaged and you can send them directly through your progressive web app on almost all major browsers now.
In today's video, you'll learn how to set up Firebase Cloud Messaging for the web from scratch, and we'll do it in an Ionic 4 progressive web app.
The reason I chose this topic is because AngularFire 2 has now now become AngularFire and it lives under the at Angular namespace.
It's now a stable release with support for messaging and callable functions which you'll learn all about in this video.
If you're new, like and subscribe.
And for this video, I'm giving away a one of a kind Ionic Fire t shirt.
All you have to do is leave a comment below, and I'll pick a random winner by Friday.
So today we're talking about web push notifications, which differ from notifications on native installed apps like iOS and Android.
Web notifications work in all major browsers and will feel just like regular push notifications on Android devices.
The big holdout is iOS Safari, so you won't be able to send web notifications to iPhone users.
In my upcoming full course, I'll show you how to set up native iOS notifications for an installed iPhone app.
But the lesson today strictly focuses on web notifications.
Let's start by taking a look at what we're building and how it actually works under the hood.
The first thing that happens is the user grants permission to this app to send notifications.
When that happens, Firebase will give us a token that we can send messages to.
We could use that token to send a notification to an individual user, Or we can subscribe our users to a specific topic and broadcast notifications out to everybody at the same time.
There are use cases is for both, but sending topic based notifications tends to be a little more complicated.
So that's what I'm gonna show you how to set up today.
We'll use callable functions so that we can trigger a Cloud Function directly from our front end by clicking a button that will subscribe the user to a topic or unsubscribe them from a topic.
And lastly, we'll set up a Firestore Cloud Function that will actually broadcast out the messages every time a new document is created in the database.
To To get started, you'll need to have an existing project and you'll run Firebase init functions to initialize your back end.
I'm using Ionic 4, but you could write this code in any progressive web app.
So I've created a file here called FCM that's specifically for my Messaging Cloud Functions.
And these Cloud Functions are some of the easiest functions that you'll ever write.
We are going to use callable functions, which are just like HTTP functions, except that we can pass in information directly from the Firebase SDK.
So they're much easier to work with from your front end UI as we'll see here when we get into the front end code.
When you trigger an on call function, it gives you access to a data object which contains any custom data that you wanna pass in through your front end.
So in our case, we want to subscribe the user to a messaging topic.
So we'll send this function the token or the browser that the user's granted permission to and then also the topic that they wanna subscribe to.
We can subscribe a user to topic based notifications with this easy one liner of admin messaging, subscribe to topic with the token and the topic as arguments.
Then to handle unsubscribing, we can just repeat the same pattern.
But instead of calling messaging subscribe to topic, we call unsubscribe from topic.
Firebase will keep track of all the tokens subscribed to a topic and then broadcast out push notifications to them simultaneously.
So it's a really easy way to broadcast out notifications to millions of devices simultaneously.
The last thing we need to do on the back end is create an event that will send out a message to the subscribers to a topic.
For this demo, I'm pretending that we have a discounts collection.
And every time a new discount document is added, will broadcast a notification to all the users.
For that, we can use the Firestore document on create trigger.
And the first thing we'll do is set up a variable for the and data, which we'll use to format the notification content.
Then just to show you the end of this function, the last thing we'll do is call admin messaging send with a notification payload.
Formatting that notification payload is where you're gonna be doing most of the work.
As I mentioned earlier, iOS, Android, and the web all have different notification APIs And the main thing that they share in common is the title and body.
I'm gonna create a notification object that we can share on all platforms and then I'll customize things for the web from there.
And I highly recommend that you strong type these because you'll definitely want Versus Code IntelliSense when formatting these messages.
At a bare minimum, The payload needs to have the notification content as well as the topic that you're sending to.
And you could actually stop here and just have a basic notification, but we wanna customize things a little bit more for the web.
I want my notification to have a custom icon.
I want it to vibrate in a certain way, and I want it to have multiple options with emojis that the user can click.
So we can do this by setting up a Web Push object, which will have the parameters that follow the Web Push Notification API.
We can pass in an array of numbers to have the notification vibrate with a specific pattern.
We can pass in a URL for the icon.
And we can even pass in an array of actions so the user can do different things based on a button that they click specifically on the notification solve.
There are even more options than that, but I think that's good enough for now.
The next thing we'll do is deploy our functions, then we'll get into our front end Angular Ionic 4 code.
You should have functions that look like this on the Firebase console.
And you wanna make a note of the names of the callable functions because we'll need them in the front end code.
Web push notifications are made possible by a service worker that sits in the background of your progressive web app and listens for messages.
To create the Worker, all you have to do is go into the source directory, create a file called firebase messaging dash sw.js, and then you can copy and paste this code which is directly from the Fire docs.
The only thing you're required to change is the sender ID for your specific Firebase project.
Then with an Ionic Angular project, you'll need to go into the Angular JSON file, And you'll need to add the path to this file to the assets array.
This tells Angular to include this file in your production build.
The next thing we'll wanna do is make sure that we have AngularFire installed in our project.
You can follow the official install instructions in the main repo.
Then the next thing I'm doing is generating a service in my app called FCM.
This will handle pretty much all of our front end code including getting permission from the user, showing the notification while the app is active, and subscribing to specific topics.
I'm working from an existing app with additional services, but you don't have to worry about those.
In this service, we'll be using AngularFire Messaging, AngularFire functions and Ionic's Toast controller.
Now, currently, there's a bug with AngularFire messaging which might already be fixed by the time you're watching net.
But if not, this is some code you can use to fix it.
I'll add a link to the GitHub issue in the description.
The first thing we'll do is set up a token as a property on the service, Then we can inject our dependencies in the constructor.
When a message is sent with the app running in the foreground, we're not going to send the notification to the device, but we'll just handle it directly in the app.
We can do that really easily out of the box with Ionic's ToastController.
So I'll create an async function here called make toast, then we just call the ToastController create and add whatever parameters we want on that Toast message.
This will give us a Toast message at the top of the screen that fades out after 5 seconds and has the option to dismiss.
The next thing we need to do is get permission from the user.
You can run this method when your app is first initialized or you can run it on a button click.
Basically, it's just gonna bring up this pop up window asking the user to grant permission to your app to send notifications.
AngularFire Messaging has a method called request token that turns an observable.
And when we subscribe to it, I'm going to set the token as a property on this service so we can use it later with our callable functions.
The other thing we wanna do is listen to the stream of incoming messages and then handle them accordingly in our front end.
We've already set up a method to show a Toast message, so we'll go ahead and make use of that.
We'll pipe in the tap operator, then take the notification body and use that as the content for the Toast message.
So every time Firebase broadcast out a new message, it will be handled by Ionix Toast controller in the UI.
Then the last piece of the puzzle is to create a couple of methods to call our callable functions.
And this is actually almost as easy as writing the function itself.
We can say AngularFire functions, H T T P S Callable and then the function name.
If you remember, subscribe to topic is the function name that we've already deployed to our back end.
And then we can pass in the topic and also the token that we have set up for this device.
This also returns an observable, so I'm going to again make use of our make Toast method to show a Toast message once this request has completed.
Then we'll do the exact same thing to unsubscribe from a topic, but just calling a different function.
So that handles all the complicated stuff.
Now we just need to go into a page, inject our service, and put it to use.
For this demo, which is part of my Ionic Of course, we have an FCM page.
Then I also have a database service which will create a document in Firestore in the discounts collection triggering a message to be sent to all subscribers to that topic.
But that code is not very important.
It's just a simple Firestore document, right?
And the way I have it Set up for this demo is that it will create a random discount percentage.
Then if you remember from our function, it's looking for a headline property on the document to format the content for the push notification.
So this way, we'll get a different random number for every notification so we can verify that everything's working as intended.
Now we can just call our FCM methods directly on Ionic Buttons.
So we have 3 different buttons set up in here.
1 to request permission, 1 to subscribe to a topic, and then one to broadcast the message.
When we open the app and click the grant permission button, it will up the pop up giving us the option to allow or block notifications.
Then I'm displaying the token in the UI which is just a big long string.
Then I'll click subscribe to topic to call our callable function, and that will bring up a toast letting us know that we're now subscribed to the discounts topic.
And lastly, I will send the notification by creating a document in Firestore, which then triggers the Cloud function to send them a message.
When the app is in the foreground like it is now, it will just show the Ionic toast message, but when it happens with the app in the background it will trigger the notification on the browser itself or on your phone if you're running Android.
I'm gonna go ahead and wrap things up there.
If this video helped you, please like and subscribe.
And if you wanna learn how to set up notifications on iOS and Android, I'd recommend upgrading to a Pro membership to get access to my full Ionic which covers native features in a little more detail.
Thanks for watching and I'll talk to you soon.

Speaker 0: Push notifications are a great way to keep your users engaged and you can send them directly through your progressive web app on almost all major browsers now. In today's video, you'll learn how to set up Firebase Cloud Messaging for the web from scratch, and we'll do it in an Ionic 4 progressive web app. The reason I chose this topic is because AngularFire 2 has now now become AngularFire and it lives under the at Angular namespace. It's now a stable release with support for messaging and callable functions which you'll learn all about in this video. If you're new, like and subscribe.

And for this video, I'm giving away a one of a kind Ionic Fire t shirt. All you have to do is leave a comment below, and I'll pick a random winner by Friday. So today we're talking about web push notifications, which differ from notifications on native installed apps like iOS and Android. Web notifications work in all major browsers and will feel just like regular push notifications on Android devices. The big holdout is iOS Safari, so you won't be able to send web notifications to iPhone users.

In my upcoming full course, I'll show you how to set up native iOS notifications for an installed iPhone app. But the lesson today strictly focuses on web notifications. Let's start by taking a look at what we're building and how it actually works under the hood. The first thing that happens is the user grants permission to this app to send notifications. When that happens, Firebase will give us a token that we can send messages to.

We could use that token to send a notification to an individual user, Or we can subscribe our users to a specific topic and broadcast notifications out to everybody at the same time. There are use cases is for both, but sending topic based notifications tends to be a little more complicated. So that's what I'm gonna show you how to set up today. We'll use callable functions so that we can trigger a Cloud Function directly from our front end by clicking a button that will subscribe the user to a topic or unsubscribe them from a topic. And lastly, we'll set up a Firestore Cloud Function that will actually broadcast out the messages every time a new document is created in the database.

To To get started, you'll need to have an existing project and you'll run Firebase init functions to initialize your back end. I'm using Ionic 4, but you could write this code in any progressive web app. So I've created a file here called FCM that's specifically for my Messaging Cloud Functions. And these Cloud Functions are some of the easiest functions that you'll ever write. We are going to use callable functions, which are just like HTTP functions, except that we can pass in information directly from the Firebase SDK.

So they're much easier to work with from your front end UI as we'll see here when we get into the front end code. When you trigger an on call function, it gives you access to a data object which contains any custom data that you wanna pass in through your front end. So in our case, we want to subscribe the user to a messaging topic. So we'll send this function the token or the browser that the user's granted permission to and then also the topic that they wanna subscribe to. We can subscribe a user to topic based notifications with this easy one liner of admin messaging, subscribe to topic with the token and the topic as arguments.

Then to handle unsubscribing, we can just repeat the same pattern. But instead of calling messaging subscribe to topic, we call unsubscribe from topic. Firebase will keep track of all the tokens subscribed to a topic and then broadcast out push notifications to them simultaneously. So it's a really easy way to broadcast out notifications to millions of devices simultaneously. The last thing we need to do on the back end is create an event that will send out a message to the subscribers to a topic.

For this demo, I'm pretending that we have a discounts collection. And every time a new discount document is added, will broadcast a notification to all the users. For that, we can use the Firestore document on create trigger. And the first thing we'll do is set up a variable for the and data, which we'll use to format the notification content. Then just to show you the end of this function, the last thing we'll do is call admin messaging send with a notification payload.

Formatting that notification payload is where you're gonna be doing most of the work. As I mentioned earlier, iOS, Android, and the web all have different notification APIs And the main thing that they share in common is the title and body. I'm gonna create a notification object that we can share on all platforms and then I'll customize things for the web from there. And I highly recommend that you strong type these because you'll definitely want Versus Code IntelliSense when formatting these messages. At a bare minimum, The payload needs to have the notification content as well as the topic that you're sending to.

And you could actually stop here and just have a basic notification, but we wanna customize things a little bit more for the web. I want my notification to have a custom icon. I want it to vibrate in a certain way, and I want it to have multiple options with emojis that the user can click. So we can do this by setting up a Web Push object, which will have the parameters that follow the Web Push Notification API. We can pass in an array of numbers to have the notification vibrate with a specific pattern.

We can pass in a URL for the icon. And we can even pass in an array of actions so the user can do different things based on a button that they click specifically on the notification solve. There are even more options than that, but I think that's good enough for now. The next thing we'll do is deploy our functions, then we'll get into our front end Angular Ionic 4 code. You should have functions that look like this on the Firebase console.

And you wanna make a note of the names of the callable functions because we'll need them in the front end code. Web push notifications are made possible by a service worker that sits in the background of your progressive web app and listens for messages. To create the Worker, all you have to do is go into the source directory, create a file called firebase messaging dash sw.js, and then you can copy and paste this code which is directly from the Fire docs. The only thing you're required to change is the sender ID for your specific Firebase project. Then with an Ionic Angular project, you'll need to go into the Angular JSON file, And you'll need to add the path to this file to the assets array.

This tells Angular to include this file in your production build. The next thing we'll wanna do is make sure that we have AngularFire installed in our project. You can follow the official install instructions in the main repo. Then the next thing I'm doing is generating a service in my app called FCM. This will handle pretty much all of our front end code including getting permission from the user, showing the notification while the app is active, and subscribing to specific topics.

I'm working from an existing app with additional services, but you don't have to worry about those. In this service, we'll be using AngularFire Messaging, AngularFire functions and Ionic's Toast controller. Now, currently, there's a bug with AngularFire messaging which might already be fixed by the time you're watching net. But if not, this is some code you can use to fix it. I'll add a link to the GitHub issue in the description.

The first thing we'll do is set up a token as a property on the service, Then we can inject our dependencies in the constructor. When a message is sent with the app running in the foreground, we're not going to send the notification to the device, but we'll just handle it directly in the app. We can do that really easily out of the box with Ionic's ToastController. So I'll create an async function here called make toast, then we just call the ToastController create and add whatever parameters we want on that Toast message. This will give us a Toast message at the top of the screen that fades out after 5 seconds and has the option to dismiss.

The next thing we need to do is get permission from the user. You can run this method when your app is first initialized or you can run it on a button click. Basically, it's just gonna bring up this pop up window asking the user to grant permission to your app to send notifications. AngularFire Messaging has a method called request token that turns an observable. And when we subscribe to it, I'm going to set the token as a property on this service so we can use it later with our callable functions.

The other thing we wanna do is listen to the stream of incoming messages and then handle them accordingly in our front end. We've already set up a method to show a Toast message, so we'll go ahead and make use of that. We'll pipe in the tap operator, then take the notification body and use that as the content for the Toast message. So every time Firebase broadcast out a new message, it will be handled by Ionix Toast controller in the UI. Then the last piece of the puzzle is to create a couple of methods to call our callable functions.

And this is actually almost as easy as writing the function itself. We can say AngularFire functions, H T T P S Callable and then the function name. If you remember, subscribe to topic is the function name that we've already deployed to our back end. And then we can pass in the topic and also the token that we have set up for this device. This also returns an observable, so I'm going to again make use of our make Toast method to show a Toast message once this request has completed.

Then we'll do the exact same thing to unsubscribe from a topic, but just calling a different function. So that handles all the complicated stuff. Now we just need to go into a page, inject our service, and put it to use. For this demo, which is part of my Ionic Of course, we have an FCM page. Then I also have a database service which will create a document in Firestore in the discounts collection triggering a message to be sent to all subscribers to that topic.

But that code is not very important. It's just a simple Firestore document, right? And the way I have it Set up for this demo is that it will create a random discount percentage. Then if you remember from our function, it's looking for a headline property on the document to format the content for the push notification. So this way, we'll get a different random number for every notification so we can verify that everything's working as intended.

Now we can just call our FCM methods directly on Ionic Buttons. So we have 3 different buttons set up in here. 1 to request permission, 1 to subscribe to a topic, and then one to broadcast the message. When we open the app and click the grant permission button, it will up the pop up giving us the option to allow or block notifications. Then I'm displaying the token in the UI which is just a big long string.

Then I'll click subscribe to topic to call our callable function, and that will bring up a toast letting us know that we're now subscribed to the discounts topic. And lastly, I will send the notification by creating a document in Firestore, which then triggers the Cloud function to send them a message. When the app is in the foreground like it is now, it will just show the Ionic toast message, but when it happens with the app in the background it will trigger the notification on the browser itself or on your phone if you're running Android. I'm gonna go ahead and wrap things up there. If this video helped you, please like and subscribe.

And if you wanna learn how to set up notifications on iOS and Android, I'd recommend upgrading to a Pro membership to get access to my full Ionic which covers native features in a little more detail. Thanks for watching and I'll talk to you soon.
Push notifications are a great way to keep your users engaged and you can send them directly through your progressive web app on almost all major browsers now. In today's video, you'll learn how to set up Firebase Cloud Messaging for the web from scratch, and we'll do it in an Ionic 4 progressive web app. The reason I chose this topic is because AngularFire 2 has now now become AngularFire and it lives under the at Angular namespace. It's now a stable release with support for messaging and callable functions which you'll learn all about in this video.
If you're new, like and subscribe. And for this video, I'm giving away a one of a kind Ionic Fire t shirt. All you have to do is leave a comment below, and I'll pick a random winner by Friday. So today we're talking about web push notifications, which differ from notifications on native installed apps like iOS and Android.
advertising
social media
Web notifications work in all major browsers and will feel just like regular push notifications on Android devices. The big holdout is iOS Safari, so you won't be able to send web notifications to iPhone users. In my upcoming full course, I'll show you how to set up native iOS notifications for an installed iPhone app.
But the lesson today strictly focuses on web notifications. Let's start by taking a look at what we're building and how it actually works under the hood. The first thing that happens is the user grants permission to this app to send notifications. When that happens, Firebase will give us a token that we can send messages to. We could use that token to send a notification to an individual user, Or we can subscribe our users to a specific topic and broadcast notifications out to everybody at the same time.
security
There are use cases is for both, but sending topic based notifications tends to be a little more complicated. So that's what I'm gonna show you how to set up today. We'll use callable functions so that we can trigger a Cloud Function directly from our front end by clicking a button that will subscribe the user to a topic or unsubscribe them from a topic.
And lastly, we'll set up a Firestore Cloud Function that will actually broadcast out the messages every time a new document is created in the database. To To get started, you'll need to have an existing project and you'll run Firebase init functions to initialize your back end. I'm using Ionic 4, but you could write this code in any progressive web app. So I've created a file here called FCM that's specifically for my Messaging Cloud Functions.
software development
databases
And these Cloud Functions are some of the easiest functions that you'll ever write. We are going to use callable functions, which are just like HTTP functions, except that we can pass in information directly from the Firebase SDK. So they're much easier to work with from your front end UI as we'll see here when we get into the front end code. When you trigger an on call function, it gives you access to a data object which contains any custom data that you wanna pass in through your front end. So in our case, we want to subscribe the user to a messaging topic. So we'll send this function the token or the browser that the user's granted permission to and then also the topic that they wanna subscribe to. We can subscribe a user to topic based notifications with this easy one liner of admin messaging, subscribe to topic with the token and the topic as arguments. Then to handle unsubscribing, we can just repeat the same pattern. But instead of calling messaging subscribe to topic, we call unsubscribe from topic. Firebase will keep track of all the tokens subscribed to a topic and then broadcast out push notifications to them simultaneously.
So it's a really easy way to broadcast out notifications to millions of devices simultaneously. The last thing we need to do on the back end is create an event that will send out a message to the subscribers to a topic. For this demo, I'm pretending that we have a discounts collection.
phones
multimedia
telecommunications
streaming
media
And every time a new discount document is added, will broadcast a notification to all the users. For that, we can use the Firestore document on create trigger. And the first thing we'll do is set up a variable for the and data, which we'll use to format the notification content. Then just to show you the end of this function, the last thing we'll do is call admin messaging send with a notification payload. Formatting that notification payload is where you're gonna be doing most of the work. As I mentioned earlier, iOS, Android, and the web all have different notification APIs And the main thing that they share in common is the title and body. I'm gonna create a notification object that we can share on all platforms and then I'll customize things for the web from there. And I highly recommend that you strong type these because you'll definitely want Versus Code IntelliSense when formatting these messages. At a bare minimum, The payload needs to have the notification content as well as the topic that you're sending to. And you could actually stop here and just have a basic notification, but we wanna customize things a little bit more for the web. I want my notification to have a custom icon. I want it to vibrate in a certain way, and I want it to have multiple options with emojis that the user can click. So we can do this by setting up a Web Push object, which will have the parameters that follow the Web Push Notification API. We can pass in an array of numbers to have the notification vibrate with a specific pattern. We can pass in a URL for the icon. And we can even pass in an array of actions so the user can do different things based on a button that they click specifically on the notification solve. There are even more options than that, but I think that's good enough for now. The next thing we'll do is deploy our functions, then we'll get into our front end Angular Ionic 4 code. You should have functions that look like this on the Firebase console. And you wanna make a note of the names of the callable functions because we'll need them in the front end code. Web push notifications are made possible by a service worker that sits in the background of your progressive web app and listens for messages. To create the Worker, all you have to do is go into the source directory, create a file called firebase messaging dash sw.js, and then you can copy and paste this code which is directly from the Fire docs. The only thing you're required to change is the sender ID for your specific Firebase project. Then with an Ionic Angular project, you'll need to go into the Angular JSON file, And you'll need to add the path to this file to the assets array. This tells Angular to include this file in your production build. The next thing we'll wanna do is make sure that we have AngularFire installed in our project.
You can follow the official install instructions in the main repo. Then the next thing I'm doing is generating a service in my app called FCM. This will handle pretty much all of our front end code including getting permission from the user, showing the notification while the app is active, and subscribing to specific topics.
software
I'm working from an existing app with additional services, but you don't have to worry about those. In this service, we'll be using AngularFire Messaging, AngularFire functions and Ionic's Toast controller. Now, currently, there's a bug with AngularFire messaging which might already be fixed by the time you're watching net. But if not, this is some code you can use to fix it. I'll add a link to the GitHub issue in the description. The first thing we'll do is set up a token as a property on the service, Then we can inject our dependencies in the constructor. When a message is sent with the app running in the foreground, we're not going to send the notification to the device, but we'll just handle it directly in the app. We can do that really easily out of the box with Ionic's ToastController. So I'll create an async function here called make toast, then we just call the ToastController create and add whatever parameters we want on that Toast message. This will give us a Toast message at the top of the screen that fades out after 5 seconds and has the option to dismiss. The next thing we need to do is get permission from the user. You can run this method when your app is first initialized or you can run it on a button click. Basically, it's just gonna bring up this pop up window asking the user to grant permission to your app to send notifications. AngularFire Messaging has a method called request token that turns an observable. And when we subscribe to it, I'm going to set the token as a property on this service so we can use it later with our callable functions. The other thing we wanna do is listen to the stream of incoming messages and then handle them accordingly in our front end. We've already set up a method to show a Toast message, so we'll go ahead and make use of that. We'll pipe in the tap operator, then take the notification body and use that as the content for the Toast message. So every time Firebase broadcast out a new message, it will be handled by Ionix Toast controller in the UI. Then the last piece of the puzzle is to create a couple of methods to call our callable functions. And this is actually almost as easy as writing the function itself. We can say AngularFire functions, H T T P S Callable and then the function name. If you remember, subscribe to topic is the function name that we've already deployed to our back end. And then we can pass in the topic and also the token that we have set up for this device. This also returns an observable, so I'm going to again make use of our make Toast method to show a Toast message once this request has completed.
Then we'll do the exact same thing to unsubscribe from a topic, but just calling a different function. So that handles all the complicated stuff. Now we just need to go into a page, inject our service, and put it to use. For this demo, which is part of my Ionic Of course, we have an FCM page. Then I also have a database service which will create a document in Firestore in the discounts collection triggering a message to be sent to all subscribers to that topic. But that code is not very important. It's just a simple Firestore document, right? And the way I have it Set up for this demo is that it will create a random discount percentage.
databases
programming
customer support
commerce
Then if you remember from our function, it's looking for a headline property on the document to format the content for the push notification. So this way, we'll get a different random number for every notification so we can verify that everything's working as intended. Now we can just call our FCM methods directly on Ionic Buttons. So we have 3 different buttons set up in here. 1 to request permission, 1 to subscribe to a topic, and then one to broadcast the message. When we open the app and click the grant permission button, it will up the pop up giving us the option to allow or block notifications. Then I'm displaying the token in the UI which is just a big long string. Then I'll click subscribe to topic to call our callable function, and that will bring up a toast letting us know that we're now subscribed to the discounts topic. And lastly, I will send the notification by creating a document in Firestore, which then triggers the Cloud function to send them a message. When the app is in the foreground like it is now, it will just show the Ionic toast message, but when it happens with the app in the background it will trigger the notification on the browser itself or on your phone if you're running Android. I'm gonna go ahead and wrap things up there. If this video helped you, please like and subscribe. And if you wanna learn how to set up notifications on iOS and Android, I'd recommend upgrading to a Pro membership to get access to my full Ionic which covers native features in a little more detail. Thanks for watching and I'll talk to you soon.
Push notifications are a great way to keep your users engaged and you can send them directly through your progressive web app on almost all major browsers now. In today's video, you'll learn how to set up Firebase Cloud Messaging for the web from scratch, and we'll do it in an Ionic 4 progressive web app. The reason I chose this topic is because AngularFire 2 has now now become AngularFire and it lives under the at Angular namespace. It's now a stable release with support for messaging and callable functions which you'll learn all about in this video. If you're new, like and subscribe. And for this video, I'm giving away a one of a kind Ionic Fire t shirt. All you have to do is leave a comment below, and I'll pick a random winner by Friday. So today we're talking about web push notifications, which differ from notifications on native installed apps like iOS and Android. Web notifications work in all major browsers and will feel just like regular push notifications on Android devices. The big holdout is iOS Safari, so you won't be able to send web notifications to iPhone users. In my upcoming full course, I'll show you how to set up native iOS notifications for an installed iPhone app. But the lesson today strictly focuses on web notifications. Let's start by taking a look at what we're building and how it actually works under the hood. The first thing that happens is the user grants permission to this app to send notifications. When that happens, Firebase will give us a token that we can send messages to. We could use that token to send a notification to an individual user, Or we can subscribe our users to a specific topic and broadcast notifications out to everybody at the same time. There are use cases is for both, but sending topic based notifications tends to be a little more complicated. So that's what I'm gonna show you how to set up today. We'll use callable functions so that we can trigger a Cloud Function directly from our front end by clicking a button that will subscribe the user to a topic or unsubscribe them from a topic. And lastly, we'll set up a Firestore Cloud Function that will actually broadcast out the messages every time a new document is created in the database. To To get started, you'll need to have an existing project and you'll run Firebase init functions to initialize your back end. I'm using Ionic 4, but you could write this code in any progressive web app. So I've created a file here called FCM that's specifically for my Messaging Cloud Functions. And these Cloud Functions are some of the easiest functions that you'll ever write. We are going to use callable functions, which are just like HTTP functions, except that we can pass in information directly from the Firebase SDK. So they're much easier to work with from your front end UI as we'll see here when we get into the front end code. When you trigger an on call function, it gives you access to a data object which contains any custom data that you wanna pass in through your front end. So in our case, we want to subscribe the user to a messaging topic. So we'll send this function the token or the browser that the user's granted permission to and then also the topic that they wanna subscribe to. We can subscribe a user to topic based notifications with this easy one liner of admin messaging, subscribe to topic with the token and the topic as arguments. Then to handle unsubscribing, we can just repeat the same pattern. But instead of calling messaging subscribe to topic, we call unsubscribe from topic. Firebase will keep track of all the tokens subscribed to a topic and then broadcast out push notifications to them simultaneously. So it's a really easy way to broadcast out notifications to millions of devices simultaneously. The last thing we need to do on the back end is create an event that will send out a message to the subscribers to a topic. For this demo, I'm pretending that we have a discounts collection. And every time a new discount document is added, will broadcast a notification to all the users. For that, we can use the Firestore document on create trigger. And the first thing we'll do is set up a variable for the and data, which we'll use to format the notification content. Then just to show you the end of this function, the last thing we'll do is call admin messaging send with a notification payload. Formatting that notification payload is where you're gonna be doing most of the work. As I mentioned earlier, iOS, Android, and the web all have different notification APIs And the main thing that they share in common is the title and body. I'm gonna create a notification object that we can share on all platforms and then I'll customize things for the web from there. And I highly recommend that you strong type these because you'll definitely want Versus Code IntelliSense when formatting these messages. At a bare minimum, The payload needs to have the notification content as well as the topic that you're sending to. And you could actually stop here and just have a basic notification, but we wanna customize things a little bit more for the web. I want my notification to have a custom icon. I want it to vibrate in a certain way, and I want it to have multiple options with emojis that the user can click. So we can do this by setting up a Web Push object, which will have the parameters that follow the Web Push Notification API. We can pass in an array of numbers to have the notification vibrate with a specific pattern. We can pass in a URL for the icon. And we can even pass in an array of actions so the user can do different things based on a button that they click specifically on the notification solve. There are even more options than that, but I think that's good enough for now. The next thing we'll do is deploy our functions, then we'll get into our front end Angular Ionic 4 code. You should have functions that look like this on the Firebase console. And you wanna make a note of the names of the callable functions because we'll need them in the front end code. Web push notifications are made possible by a service worker that sits in the background of your progressive web app and listens for messages. To create the Worker, all you have to do is go into the source directory, create a file called firebase messaging dash sw.js, and then you can copy and paste this code which is directly from the Fire docs. The only thing you're required to change is the sender ID for your specific Firebase project. Then with an Ionic Angular project, you'll need to go into the Angular JSON file, And you'll need to add the path to this file to the assets array. This tells Angular to include this file in your production build. The next thing we'll wanna do is make sure that we have AngularFire installed in our project. You can follow the official install instructions in the main repo. Then the next thing I'm doing is generating a service in my app called FCM. This will handle pretty much all of our front end code including getting permission from the user, showing the notification while the app is active, and subscribing to specific topics. I'm working from an existing app with additional services, but you don't have to worry about those. In this service, we'll be using AngularFire Messaging, AngularFire functions and Ionic's Toast controller. Now, currently, there's a bug with AngularFire messaging which might already be fixed by the time you're watching net. But if not, this is some code you can use to fix it. I'll add a link to the GitHub issue in the description. The first thing we'll do is set up a token as a property on the service, Then we can inject our dependencies in the constructor. When a message is sent with the app running in the foreground, we're not going to send the notification to the device, but we'll just handle it directly in the app. We can do that really easily out of the box with Ionic's ToastController. So I'll create an async function here called make toast, then we just call the ToastController create and add whatever parameters we want on that Toast message. This will give us a Toast message at the top of the screen that fades out after 5 seconds and has the option to dismiss. The next thing we need to do is get permission from the user. You can run this method when your app is first initialized or you can run it on a button click. Basically, it's just gonna bring up this pop up window asking the user to grant permission to your app to send notifications. AngularFire Messaging has a method called request token that turns an observable. And when we subscribe to it, I'm going to set the token as a property on this service so we can use it later with our callable functions. The other thing we wanna do is listen to the stream of incoming messages and then handle them accordingly in our front end. We've already set up a method to show a Toast message, so we'll go ahead and make use of that. We'll pipe in the tap operator, then take the notification body and use that as the content for the Toast message. So every time Firebase broadcast out a new message, it will be handled by Ionix Toast controller in the UI. Then the last piece of the puzzle is to create a couple of methods to call our callable functions. And this is actually almost as easy as writing the function itself. We can say AngularFire functions, H T T P S Callable and then the function name. If you remember, subscribe to topic is the function name that we've already deployed to our back end. And then we can pass in the topic and also the token that we have set up for this device. This also returns an observable, so I'm going to again make use of our make Toast method to show a Toast message once this request has completed. Then we'll do the exact same thing to unsubscribe from a topic, but just calling a different function. So that handles all the complicated stuff. Now we just need to go into a page, inject our service, and put it to use. For this demo, which is part of my Ionic Of course, we have an FCM page. Then I also have a database service which will create a document in Firestore in the discounts collection triggering a message to be sent to all subscribers to that topic. But that code is not very important. It's just a simple Firestore document, right? And the way I have it Set up for this demo is that it will create a random discount percentage. Then if you remember from our function, it's looking for a headline property on the document to format the content for the push notification. So this way, we'll get a different random number for every notification so we can verify that everything's working as intended. Now we can just call our FCM methods directly on Ionic Buttons. So we have 3 different buttons set up in here. 1 to request permission, 1 to subscribe to a topic, and then one to broadcast the message. When we open the app and click the grant permission button, it will up the pop up giving us the option to allow or block notifications. Then I'm displaying the token in the UI which is just a big long string. Then I'll click subscribe to topic to call our callable function, and that will bring up a toast letting us know that we're now subscribed to the discounts topic. And lastly, I will send the notification by creating a document in Firestore, which then triggers the Cloud function to send them a message. When the app is in the foreground like it is now, it will just show the Ionic toast message, but when it happens with the app in the background it will trigger the notification on the browser itself or on your phone if you're running Android. I'm gonna go ahead and wrap things up there. If this video helped you, please like and subscribe. And if you wanna learn how to set up notifications on iOS and Android, I'd recommend upgrading to a Pro membership to get access to my full Ionic which covers native features in a little more detail. Thanks for watching and I'll talk to you soon.
Push
push
notifications
notifications
are
are
a
a
great
great
way
way
to
to
keep
keep
your
your
users
users
engaged
engaged
and
and
you
you
can
can
send
send
them
them
directly
directly
through
through
your
your
progressive
progressive
web
web
app
app
on
on
almost
almost
all
all
major
major
browsers
browsers
now.
now
In
in
today's
today's
video,
video
you'll
you'll
learn
learn
how
how
to
to
set
set
up
up
Firebase
firebase
Cloud
cloud
Messaging
messaging
for
for
the
the
web
web
from
from
scratch,
scratch
and
and
we'll
we'll
do
do
it
it
in
in
an
an
Ionic
ionic
4
4
progressive
progressive
web
web
app.
app
The
the
reason
reason
I
i
chose
chose
this
this
topic
topic
is
is
because
because
AngularFire
angularfire
2
2
has
has
now
now
now
now
become
become
AngularFire
angularfire
and
and
it
it
lives
lives
under
under
the
the
at
at
Angular
angular
namespace.
namespace
It's
it's
now
now
a
a
stable
stable
release
release
with
with
support
support
for
for
messaging
messaging
and
and
callable
callable
functions
functions
which
which
you'll
you'll
learn
learn
all
all
about
about
in
in
this
this
video.
video
If
if
you're
you're
new,
new
like
like
and
and
subscribe.
subscribe
And
and
for
for
this
this
video,
video
I'm
i'm
giving
giving
away
away
a
a
one
one
of
of
a
a
kind
kind
Ionic
ionic
Fire
fire
t
t
shirt.
shirt
All
all
you
you
have
have
to
to
do
do
is
is
leave
leave
a
a
comment
comment
below,
below
and
and
I'll
i'll
pick
pick
a
a
random
random
winner
winner
by
by
Friday.
friday
So
so
today
today
we're
we're
talking
talking
about
about
web
web
push
push
notifications,
notifications
which
which
differ
differ
from
from
notifications
notifications
on
on
native
native
installed
installed
apps
apps
like
like
iOS
ios
and
and
Android.
android
Web
web
notifications
notifications
work
work
in
in
all
all
major
major
browsers
browsers
and
and
will
will
feel
feel
just
just
like
like
regular
regular
push
push
notifications
notifications
on
on
Android
android
devices.
devices
The
the
big
big
holdout
holdout
is
is
iOS
ios
Safari,
safari
so
so
you
you
won't
won't
be
be
able
able
to
to
send
send
web
web
notifications
notifications
to
to
iPhone
iphone
users.
users
In
in
my
my
upcoming
upcoming
full
full
course,
course
I'll
i'll
show
show
you
you
how
how
to
to
set
set
up
up
native
native
iOS
ios
notifications
notifications
for
for
an
an
installed
installed
iPhone
iphone
app.
app
But
but
the
the
lesson
lesson
today
today
strictly
strictly
focuses
focuses
on
on
web
web
notifications.
notifications
Let's
let's
start
start
by
by
taking
taking
a
a
look
look
at
at
what
what
we're
we're
building
building
and
and
how
how
it
it
actually
actually
works
works
under
under
the
the
hood.
hood
The
the
first
first
thing
thing
that
that
happens
happens
is
is
the
the
user
user
grants
grants
permission
permission
to
to
this
this
app
app
to
to
send
send
notifications.
notifications
When
when
that
that
happens,
happens
Firebase
firebase
will
will
give
give
us
us
a
a
token
token
that
that
we
we
can
can
send
send
messages
messages
to.
to
We
we
could
could
use
use
that
that
token
token
to
to
send
send
a
a
notification
notification
to
to
an
an
individual
individual
user,
user
Or
or
we
we
can
can
subscribe
subscribe
our
our
users
users
to
to
a
a
specific
specific
topic
topic
and
and
broadcast
broadcast
notifications
notifications
out
out
to
to
everybody
everybody
at
at
the
the
same
same
time.
time
There
there
are
are
use
use
cases
cases
is
is
for
for
both,
both
but
but
sending
sending
topic
topic
based
based
notifications
notifications
tends
tends
to
to
be
be
a
a
little
little
more
more
complicated.
complicated
So
so
that's
that's
what
what
I'm
i'm
gonna
gonna
show
show
you
you
how
how
to
to
set
set
up
up
today.
today
We'll
we'll
use
use
callable
callable
functions
functions
so
so
that
that
we
we
can
can
trigger
trigger
a
a
Cloud
cloud
Function
function
directly
directly
from
from
our
our
front
front
end
end
by
by
clicking
clicking
a
a
button
button
that
that
will
will
subscribe
subscribe
the
the
user
user
to
to
a
a
topic
topic
or
or
unsubscribe
unsubscribe
them
them
from
from
a
a
topic.
topic
And
and
lastly,
lastly
we'll
we'll
set
set
up
up
a
a
Firestore
firestore
Cloud
cloud
Function
function
that
that
will
will
actually
actually
broadcast
broadcast
out
out
the
the
messages
messages
every
every
time
time
a
a
new
new
document
document
is
is
created
created
in
in
the
the
database.
database
To
to
To
to
get
get
started,
started
you'll
you'll
need
need
to
to
have
have
an
an
existing
existing
project
project
and
and
you'll
you'll
run
run
Firebase
firebase
init
init
functions
functions
to
to
initialize
initialize
your
your
back
back
end.
end
I'm
i'm
using
using
Ionic
ionic
4,
4
but
but
you
you
could
could
write
write
this
this
code
code
in
in
any
any
progressive
progressive
web
web
app.
app
So
so
I've
i've
created
created
a
a
file
file
here
here
called
called
FCM
fcm
that's
that's
specifically
specifically
for
for
my
my
Messaging
messaging
Cloud
cloud
Functions.
functions
And
and
these
these
Cloud
cloud
Functions
functions
are
are
some
some
of
of
the
the
easiest
easiest
functions
functions
that
that
you'll
you'll
ever
ever
write.
write
We
we
are
are
going
going
to
to
use
use
callable
callable
functions,
functions
which
which
are
are
just
just
like
like
HTTP
http
functions,
functions
except
except
that
that
we
we
can
can
pass
pass
in
in
information
information
directly
directly
from
from
the
the
Firebase
firebase
SDK.
sdk
So
so
they're
they're
much
much
easier
easier
to
to
work
work
with
with
from
from
your
your
front
front
end
end
UI
ui
as
as
we'll
we'll
see
see
here
here
when
when
we
we
get
get
into
into
the
the
front
front
end
end
code.
code
When
when
you
you
trigger
trigger
an
an
on
on
call
call
function,
function
it
it
gives
gives
you
you
access
access
to
to
a
a
data
data
object
object
which
which
contains
contains
any
any
custom
custom
data
data
that
that
you
you
wanna
wanna
pass
pass
in
in
through
through
your
your
front
front
end.
end
So
so
in
in
our
our
case,
case
we
we
want
want
to
to
subscribe
subscribe
the
the
user
user
to
to
a
a
messaging
messaging
topic.
topic
So
so
we'll
we'll
send
send
this
this
function
function
the
the
token
token
or
or
the
the
browser
browser
that
that
the
the
user's
user's
granted
granted
permission
permission
to
to
and
and
then
then
also
also
the
the
topic
topic
that
that
they
they
wanna
wanna
subscribe
subscribe
to.
to
We
we
can
can
subscribe
subscribe
a
a
user
user
to
to
topic
topic
based
based
notifications
notifications
with
with
this
this
easy
easy
one
one
liner
liner
of
of
admin
admin
messaging,
messaging
subscribe
subscribe
to
to
topic
topic
with
with
the
the
token
token
and
and
the
the
topic
topic
as
as
arguments.
arguments
Then
then
to
to
handle
handle
unsubscribing,
unsubscribing
we
we
can
can
just
just
repeat
repeat
the
the
same
same
pattern.
pattern
But
but
instead
instead
of
of
calling
calling
messaging
messaging
subscribe
subscribe
to
to
topic,
topic
we
we
call
call
unsubscribe
unsubscribe
from
from
topic.
topic
Firebase
firebase
will
will
keep
keep
track
track
of
of
all
all
the
the
tokens
tokens
subscribed
subscribed
to
to
a
a
topic
topic
and
and
then
then
broadcast
broadcast
out
out
push
push
notifications
notifications
to
to
them
them
simultaneously.
simultaneously
So
so
it's
it's
a
a
really
really
easy
easy
way
way
to
to
broadcast
broadcast
out
out
notifications
notifications
to
to
millions
millions
of
of
devices
devices
simultaneously.
simultaneously
The
the
last
last
thing
thing
we
we
need
need
to
to
do
do
on
on
the
the
back
back
end
end
is
is
create
create
an
an
event
event
that
that
will
will
send
send
out
out
a
a
message
message
to
to
the
the
subscribers
subscribers
to
to
a
a
topic.
topic
For
for
this
this
demo,
demo
I'm
i'm
pretending
pretending
that
that
we
we
have
have
a
a
discounts
discounts
collection.
collection
And
and
every
every
time
time
a
a
new
new
discount
discount
document
document
is
is
added,
added
will
will
broadcast
broadcast
a
a
notification
notification
to
to
all
all
the
the
users.
users
For
for
that,
that
we
we
can
can
use
use
the
the
Firestore
firestore
document
document
on
on
create
create
trigger.
trigger
And
and
the
the
first
first
thing
thing
we'll
we'll
do
do
is
is
set
set
up
up
a
a
variable
variable
for
for
the
the
and
and
data,
data
which
which
we'll
we'll
use
use
to
to
format
format
the
the
notification
notification
content.
content
Then
then
just
just
to
to
show
show
you
you
the
the
end
end
of
of
this
this
function,
function
the
the
last
last
thing
thing
we'll
we'll
do
do
is
is
call
call
admin
admin
messaging
messaging
send
send
with
with
a
a
notification
notification
payload.
payload
Formatting
formatting
that
that
notification
notification
payload
payload
is
is
where
where
you're
you're
gonna
gonna
be
be
doing
doing
most
most
of
of
the
the
work.
work
As
as
I
i
mentioned
mentioned
earlier,
earlier
iOS,
ios
Android,
android
and
and
the
the
web
web
all
all
have
have
different
different
notification
notification
APIs
apis
And
and
the
the
main
main
thing
thing
that
that
they
they
share
share
in
in
common
common
is
is
the
the
title
title
and
and
body.
body
I'm
i'm
gonna
gonna
create
create
a
a
notification
notification
object
object
that
that
we
we
can
can
share
share
on
on
all
all
platforms
platforms
and
and
then
then
I'll
i'll
customize
customize
things
things
for
for
the
the
web
web
from
from
there.
there
And
and
I
i
highly
highly
recommend
recommend
that
that
you
you
strong
strong
type
type
these
these
because
because
you'll
you'll
definitely
definitely
want
want
Versus
versus
Code
code
IntelliSense
intellisense
when
when
formatting
formatting
these
these
messages.
messages
At
at
a
a
bare
bare
minimum,
minimum
The
the
payload
payload
needs
needs
to
to
have
have
the
the
notification
notification
content
content
as
as
well
well
as
as
the
the
topic
topic
that
that
you're
you're
sending
sending
to.
to
And
and
you
you
could
could
actually
actually
stop
stop
here
here
and
and
just
just
have
have
a
a
basic
basic
notification,
notification
but
but
we
we
wanna
wanna
customize
customize
things
things
a
a
little
little
bit
bit
more
more
for
for
the
the
web.
web
I
i
want
want
my
my
notification
notification
to
to
have
have
a
a
custom
custom
icon.
icon
I
i
want
want
it
it
to
to
vibrate
vibrate
in
in
a
a
certain
certain
way,
way
and
and
I
i
want
want
it
it
to
to
have
have
multiple
multiple
options
options
with
with
emojis
emojis
that
that
the
the
user
user
can
can
click.
click
So
so
we
we
can
can
do
do
this
this
by
by
setting
setting
up
up
a
a
Web
web
Push
push
object,
object
which
which
will
will
have
have
the
the
parameters
parameters
that
that
follow
follow
the
the
Web
web
Push
push
Notification
notification
API.
api
We
we
can
can
pass
pass
in
in
an
an
array
array
of
of
numbers
numbers
to
to
have
have
the
the
notification
notification
vibrate
vibrate
with
with
a
a
specific
specific
pattern.
pattern
We
we
can
can
pass
pass
in
in
a
a
URL
url
for
for
the
the
icon.
icon
And
and
we
we
can
can
even
even
pass
pass
in
in
an
an
array
array
of
of
actions
actions
so
so
the
the
user
user
can
can
do
do
different
different
things
things
based
based
on
on
a
a
button
button
that
that
they
they
click
click
specifically
specifically
on
on
the
the
notification
notification
solve.
solve
There
there
are
are
even
even
more
more
options
options
than
than
that,
that
but
but
I
i
think
think
that's
that's
good
good
enough
enough
for
for
now.
now
The
the
next
next
thing
thing
we'll
we'll
do
do
is
is
deploy
deploy
our
our
functions,
functions
then
then
we'll
we'll
get
get
into
into
our
our
front
front
end
end
Angular
angular
Ionic
ionic
4
4
code.
code
You
you
should
should
have
have
functions
functions
that
that
look
look
like
like
this
this
on
on
the
the
Firebase
firebase
console.
console
And
and
you
you
wanna
wanna
make
make
a
a
note
note
of
of
the
the
names
names
of
of
the
the
callable
callable
functions
functions
because
because
we'll
we'll
need
need
them
them
in
in
the
the
front
front
end
end
code.
code
Web
web
push
push
notifications
notifications
are
are
made
made
possible
possible
by
by
a
a
service
service
worker
worker
that
that
sits
sits
in
in
the
the
background
background
of
of
your
your
progressive
progressive
web
web
app
app
and
and
listens
listens
for
for
messages.
messages
To
to
create
create
the
the
Worker,
worker
all
all
you
you
have
have
to
to
do
do
is
is
go
go
into
into
the
the
source
source
directory,
directory
create
create
a
a
file
file
called
called
firebase
firebase
messaging
messaging
dash
dash
sw.js,
sw.js
and
and
then
then
you
you
can
can
copy
copy
and
and
paste
paste
this
this
code
code
which
which
is
is
directly
directly
from
from
the
the
Fire
fire
docs.
docs
The
the
only
only
thing
thing
you're
you're
required
required
to
to
change
change
is
is
the
the
sender
sender
ID
id
for
for
your
your
specific
specific
Firebase
firebase
project.
project
Then
then
with
with
an
an
Ionic
ionic
Angular
angular
project,
project
you'll
you'll
need
need
to
to
go
go
into
into
the
the
Angular
angular
JSON
json
file,
file
And
and
you'll
you'll
need
need
to
to
add
add
the
the
path
path
to
to
this
this
file
file
to
to
the
the
assets
assets
array.
array
This
this
tells
tells
Angular
angular
to
to
include
include
this
this
file
file
in
in
your
your
production
production
build.
build
The
the
next
next
thing
thing
we'll
we'll
wanna
wanna
do
do
is
is
make
make
sure
sure
that
that
we
we
have
have
AngularFire
angularfire
installed
installed
in
in
our
our
project.
project
You
you
can
can
follow
follow
the
the
official
official
install
install
instructions
instructions
in
in
the
the
main
main
repo.
repo
Then
then
the
the
next
next
thing
thing
I'm
i'm
doing
doing
is
is
generating
generating
a
a
service
service
in
in
my
my
app
app
called
called
FCM.
fcm
This
this
will
will
handle
handle
pretty
pretty
much
much
all
all
of
of
our
our
front
front
end
end
code
code
including
including
getting
getting
permission
permission
from
from
the
the
user,
user
showing
showing
the
the
notification
notification
while
while
the
the
app
app
is
is
active,
active
and
and
subscribing
subscribing
to
to
specific
specific
topics.
topics
I'm
i'm
working
working
from
from
an
an
existing
existing
app
app
with
with
additional
additional
services,
services
but
but
you
you
don't
don't
have
have
to
to
worry
worry
about
about
those.
those
In
in
this
this
service,
service
we'll
we'll
be
be
using
using
AngularFire
angularfire
Messaging,
messaging
AngularFire
angularfire
functions
functions
and
and
Ionic's
ionic's
Toast
toast
controller.
controller
Now,
now
currently,
currently
there's
there's
a
a
bug
bug
with
with
AngularFire
angularfire
messaging
messaging
which
which
might
might
already
already
be
be
fixed
fixed
by
by
the
the
time
time
you're
you're
watching
watching
net.
net
But
but
if
if
not,
not
this
this
is
is
some
some
code
code
you
you
can
can
use
use
to
to
fix
fix
it.
it
I'll
i'll
add
add
a
a
link
link
to
to
the
the
GitHub
github
issue
issue
in
in
the
the
description.
description
The
the
first
first
thing
thing
we'll
we'll
do
do
is
is
set
set
up
up
a
a
token
token
as
as
a
a
property
property
on
on
the
the
service,
service
Then
then
we
we
can
can
inject
inject
our
our
dependencies
dependencies
in
in
the
the
constructor.
constructor
When
when
a
a
message
message
is
is
sent
sent
with
with
the
the
app
app
running
running
in
in
the
the
foreground,
foreground
we're
we're
not
not
going
going
to
to
send
send
the
the
notification
notification
to
to
the
the
device,
device
but
but
we'll
we'll
just
just
handle
handle
it
it
directly
directly
in
in
the
the
app.
app
We
we
can
can
do
do
that
that
really
really
easily
easily
out
out
of
of
the
the
box
box
with
with
Ionic's
ionic's
ToastController.
toastcontroller
So
so
I'll
i'll
create
create
an
an
async
async
function
function
here
here
called
called
make
make
toast,
toast
then
then
we
we
just
just
call
call
the
the
ToastController
toastcontroller
create
create
and
and
add
add
whatever
whatever
parameters
parameters
we
we
want
want
on
on
that
that
Toast
toast
message.
message
This
this
will
will
give
give
us
us
a
a
Toast
toast
message
message
at
at
the
the
top
top
of
of
the
the
screen
screen
that
that
fades
fades
out
out
after
after
5
5
seconds
seconds
and
and
has
has
the
the
option
option
to
to
dismiss.
dismiss
The
the
next
next
thing
thing
we
we
need
need
to
to
do
do
is
is
get
get
permission
permission
from
from
the
the
user.
user
You
you
can
can
run
run
this
this
method
method
when
when
your
your
app
app
is
is
first
first
initialized
initialized
or
or
you
you
can
can
run
run
it
it
on
on
a
a
button
button
click.
click
Basically,
basically
it's
it's
just
just
gonna
gonna
bring
bring
up
up
this
this
pop
pop
up
up
window
window
asking
asking
the
the
user
user
to
to
grant
grant
permission
permission
to
to
your
your
app
app
to
to
send
send
notifications.
notifications
AngularFire
angularfire
Messaging
messaging
has
has
a
a
method
method
called
called
request
request
token
token
that
that
turns
turns
an
an
observable.
observable
And
and
when
when
we
we
subscribe
subscribe
to
to
it,
it
I'm
i'm
going
going
to
to
set
set
the
the
token
token
as
as
a
a
property
property
on
on
this
this
service
service
so
so
we
we
can
can
use
use
it
it
later
later
with
with
our
our
callable
callable
functions.
functions
The
the
other
other
thing
thing
we
we
wanna
wanna
do
do
is
is
listen
listen
to
to
the
the
stream
stream
of
of
incoming
incoming
messages
messages
and
and
then
then
handle
handle
them
them
accordingly
accordingly
in
in
our
our
front
front
end.
end
We've
we've
already
already
set
set
up
up
a
a
method
method
to
to
show
show
a
a
Toast
toast
message,
message
so
so
we'll
we'll
go
go
ahead
ahead
and
and
make
make
use
use
of
of
that.
that
We'll
we'll
pipe
pipe
in
in
the
the
tap
tap
operator,
operator
then
then
take
take
the
the
notification
notification
body
body
and
and
use
use
that
that
as
as
the
the
content
content
for
for
the
the
Toast
toast
message.
message
So
so
every
every
time
time
Firebase
firebase
broadcast
broadcast
out
out
a
a
new
new
message,
message
it
it
will
will
be
be
handled
handled
by
by
Ionix
ionix
Toast
toast
controller
controller
in
in
the
the
UI.
ui
Then
then
the
the
last
last
piece
piece
of
of
the
the
puzzle
puzzle
is
is
to
to
create
create
a
a
couple
couple
of
of
methods
methods
to
to
call
call
our
our
callable
callable
functions.
functions
And
and
this
this
is
is
actually
actually
almost
almost
as
as
easy
easy
as
as
writing
writing
the
the
function
function
itself.
itself
We
we
can
can
say
say
AngularFire
angularfire
functions,
functions
H
h
T
t
T
t
P
p
S
s
Callable
callable
and
and
then
then
the
the
function
function
name.
name
If
if
you
you
remember,
remember
subscribe
subscribe
to
to
topic
topic
is
is
the
the
function
function
name
name
that
that
we've
we've
already
already
deployed
deployed
to
to
our
our
back
back
end.
end
And
and
then
then
we
we
can
can
pass
pass
in
in
the
the
topic
topic
and
and
also
also
the
the
token
token
that
that
we
we
have
have
set
set
up
up
for
for
this
this
device.
device
This
this
also
also
returns
returns
an
an
observable,
observable
so
so
I'm
i'm
going
going
to
to
again
again
make
make
use
use
of
of
our
our
make
make
Toast
toast
method
method
to
to
show
show
a
a
Toast
toast
message
message
once
once
this
this
request
request
has
has
completed.
completed
Then
then
we'll
we'll
do
do
the
the
exact
exact
same
same
thing
thing
to
to
unsubscribe
unsubscribe
from
from
a
a
topic,
topic
but
but
just
just
calling
calling
a
a
different
different
function.
function
So
so
that
that
handles
handles
all
all
the
the
complicated
complicated
stuff.
stuff
Now
now
we
we
just
just
need
need
to
to
go
go
into
into
a
a
page,
page
inject
inject
our
our
service,
service
and
and
put
put
it
it
to
to
use.
use
For
for
this
this
demo,
demo
which
which
is
is
part
part
of
of
my
my
Ionic
ionic
Of
of
course,
course
we
we
have
have
an
an
FCM
fcm
page.
page
Then
then
I
i
also
also
have
have
a
a
database
database
service
service
which
which
will
will
create
create
a
a
document
document
in
in
Firestore
firestore
in
in
the
the
discounts
discounts
collection
collection
triggering
triggering
a
a
message
message
to
to
be
be
sent
sent
to
to
all
all
subscribers
subscribers
to
to
that
that
topic.
topic
But
but
that
that
code
code
is
is
not
not
very
very
important.
important
It's
it's
just
just
a
a
simple
simple
Firestore
firestore
document,
document
right?
right
And
and
the
the
way
way
I
i
have
have
it
it
Set
set
up
up
for
for
this
this
demo
demo
is
is
that
that
it
it
will
will
create
create
a
a
random
random
discount
discount
percentage.
percentage
Then
then
if
if
you
you
remember
remember
from
from
our
our
function,
function
it's
it's
looking
looking
for
for
a
a
headline
headline
property
property
on
on
the
the
document
document
to
to
format
format
the
the
content
content
for
for
the
the
push
push
notification.
notification
So
so
this
this
way,
way
we'll
we'll
get
get
a
a
different
different
random
random
number
number
for
for
every
every
notification
notification
so
so
we
we
can
can
verify
verify
that
that
everything's
everything's
working
working
as
as
intended.
intended
Now
now
we
we
can
can
just
just
call
call
our
our
FCM
fcm
methods
methods
directly
directly
on
on
Ionic
ionic
Buttons.
buttons
So
so
we
we
have
have
3
3
different
different
buttons
buttons
set
set
up
up
in
in
here.
here
1
1
to
to
request
request
permission,
permission
1
1
to
to
subscribe
subscribe
to
to
a
a
topic,
topic
and
and
then
then
one
one
to
to
broadcast
broadcast
the
the
message.
message
When
when
we
we
open
open
the
the
app
app
and
and
click
click
the
the
grant
grant
permission
permission
button,
button
it
it
will
will
up
up
the
the
pop
pop
up
up
giving
giving
us
us
the
the
option
option
to
to
allow
allow
or
or
block
block
notifications.
notifications
Then
then
I'm
i'm
displaying
displaying
the
the
token
token
in
in
the
the
UI
ui
which
which
is
is
just
just
a
a
big
big
long
long
string.
string
Then
then
I'll
i'll
click
click
subscribe
subscribe
to
to
topic
topic
to
to
call
call
our
our
callable
callable
function,
function
and
and
that
that
will
will
bring
bring
up
up
a
a
toast
toast
letting
letting
us
us
know
know
that
that
we're
we're
now
now
subscribed
subscribed
to
to
the
the
discounts
discounts
topic.
topic
And
and
lastly,
lastly
I
i
will
will
send
send
the
the
notification
notification
by
by
creating
creating
a
a
document
document
in
in
Firestore,
firestore
which
which
then
then
triggers
triggers
the
the
Cloud
cloud
function
function
to
to
send
send
them
them
a
a
message.
message
When
when
the
the
app
app
is
is
in
in
the
the
foreground
foreground
like
like
it
it
is
is
now,
now
it
it
will
will
just
just
show
show
the
the
Ionic
ionic
toast
toast
message,
message
but
but
when
when
it
it
happens
happens
with
with
the
the
app
app
in
in
the
the
background
background
it
it
will
will
trigger
trigger
the
the
notification
notification
on
on
the
the
browser
browser
itself
itself
or
or
on
on
your
your
phone
phone
if
if
you're
you're
running
running
Android.
android
I'm
i'm
gonna
gonna
go
go
ahead
ahead
and
and
wrap
wrap
things
things
up
up
there.
there
If
if
this
this
video
video
helped
helped
you,
you
please
please
like
like
and
and
subscribe.
subscribe
And
and
if
if
you
you
wanna
wanna
learn
learn
how
how
to
to
set
set
up
up
notifications
notifications
on
on
iOS
ios
and
and
Android,
android
I'd
i'd
recommend
recommend
upgrading
upgrading
to
to
a
a
Pro
pro
membership
membership
to
to
get
get
access
access
to
to
my
my
full
full
Ionic
ionic
which
which
covers
covers
native
native
features
features
in
in
a
a
little
little
more
more
detail.
detail
Thanks
thanks
for
for
watching
watching
and
and
I'll
i'll
talk
talk
to
to
you
you
soon.
soon
success
The speaker explains how to set up pages and notifications on Android using the progressive web app, including setting up web push notifications and creating a variable for notification content to send to subscribers. They also recommend setting up functions and creating a web API to send notifications to subscribers. The process of sending a message to subscribers to a topic and subscribing to a new topic is discussed, along with setting up a variable and data to format notifications and send notification payloads to subscribers. The speaker also explains how to create a Web app, including copying and pasting a code from the Fire app, setting up a token, and listening to incoming messages. Finally, upgrading to Pro membership for more information on Ionic is mentioned.
Push Notifications with Ionic4 and Firebase Cloud Messaging
Push notifications are a great way to keep your users engaged and you can send them directly through your progressive web app on almost all major browsers now. In today's video, you'll learn how to set up Firebase Cloud Messaging for the web from scratch, and we'll do it in an Ionic 4 progressive web app. The reason I chose this topic is because AngularFire 2 has now now become AngularFire and it lives under the at Angular namespace. It's now a stable release with support for messaging and callable functions which you'll learn all about in this video. If you're new, like and subscribe. And for this video, I'm giving away a one of a kind Ionic Fire t shirt. All you have to do is leave a comment below, and I'll pick a random winner by Friday. So today we're talking about web push notifications, which differ from notifications on native installed apps like iOS and Android. Web notifications work in all major browsers and will feel just like regular push notifications on Android devices. The big holdout is iOS Safari, so you won't be able to send web notifications to iPhone users. In my upcoming full course, I'll show you how to set up native iOS notifications for an installed iPhone app. But the lesson today strictly focuses on web notifications. Let's start by taking a look at what we're building and how it actually works under the hood. The first thing that happens is the user grants permission to this app to send notifications. When that happens, Firebase will give us a token that we can send messages to. We could use that token to send a notification to an individual user, Or we can subscribe our users to a specific topic and broadcast notifications out to everybody at the same time. There are use cases is for both, but sending topic based notifications tends to be a little more complicated. So that's what I'm gonna show you how to set up today. We'll use callable functions so that we can trigger a Cloud Function directly from our front end by clicking a button that will subscribe the user to a topic or unsubscribe them from a topic. And lastly, we'll set up a Firestore Cloud Function that will actually broadcast out the messages every time a new document is created in the database. To To get started, you'll need to have an existing project and you'll run Firebase init functions to initialize your back end. I'm using Ionic 4, but you could write this code in any progressive web app. So I've created a file here called FCM that's specifically for my Messaging Cloud Functions. And these Cloud Functions are some of the easiest functions that you'll ever write. We are going to use callable functions, which are just like HTTP functions, except that we can pass in information directly from the Firebase SDK. So they're much easier to work with from your front end UI as we'll see here when we get into the front end code. When you trigger an on call function, it gives you access to a data object which contains any custom data that you wanna pass in through your front end. So in our case, we want to subscribe the user to a messaging topic. So we'll send this function the token or the browser that the user's granted permission to and then also the topic that they wanna subscribe to. We can subscribe a user to topic based notifications with this easy one liner of admin messaging, subscribe to topic with the token and the topic as arguments. Then to handle unsubscribing, we can just repeat the same pattern. But instead of calling messaging subscribe to topic, we call unsubscribe from topic. Firebase will keep track of all the tokens subscribed to a topic and then broadcast out push notifications to them simultaneously. So it's a really easy way to broadcast out notifications to millions of devices simultaneously. The last thing we need to do on the back end is create an event that will send out a message to the subscribers to a topic. For this demo, I'm pretending that we have a discounts collection. And every time a new discount document is added, will broadcast a notification to all the users. For that, we can use the Firestore document on create trigger. And the first thing we'll do is set up a variable for the and data, which we'll use to format the notification content. Then just to show you the end of this function, the last thing we'll do is call admin messaging send with a notification payload. Formatting that notification payload is where you're gonna be doing most of the work. As I mentioned earlier, iOS, Android, and the web all have different notification APIs And the main thing that they share in common is the title and body. I'm gonna create a notification object that we can share on all platforms and then I'll customize things for the web from there. And I highly recommend that you strong type these because you'll definitely want Versus Code IntelliSense when formatting these messages. At a bare minimum, The payload needs to have the notification content as well as the topic that you're sending to. And you could actually stop here and just have a basic notification, but we wanna customize things a little bit more for the web. I want my notification to have a custom icon. I want it to vibrate in a certain way, and I want it to have multiple options with emojis that the user can click. So we can do this by setting up a Web Push object, which will have the parameters that follow the Web Push Notification API. We can pass in an array of numbers to have the notification vibrate with a specific pattern. We can pass in a URL for the icon. And we can even pass in an array of actions so the user can do different things based on a button that they click specifically on the notification solve. There are even more options than that, but I think that's good enough for now. The next thing we'll do is deploy our functions, then we'll get into our front end Angular Ionic 4 code. You should have functions that look like this on the Firebase console. And you wanna make a note of the names of the callable functions because we'll need them in the front end code. Web push notifications are made possible by a service worker that sits in the background of your progressive web app and listens for messages. To create the Worker, all you have to do is go into the source directory, create a file called firebase messaging dash sw.js, and then you can copy and paste this code which is directly from the Fire docs. The only thing you're required to change is the sender ID for your specific Firebase project. Then with an Ionic Angular project, you'll need to go into the Angular JSON file, And you'll need to add the path to this file to the assets array. This tells Angular to include this file in your production build. The next thing we'll wanna do is make sure that we have AngularFire installed in our project. You can follow the official install instructions in the main repo. Then the next thing I'm doing is generating a service in my app called FCM. This will handle pretty much all of our front end code including getting permission from the user, showing the notification while the app is active, and subscribing to specific topics. I'm working from an existing app with additional services, but you don't have to worry about those. In this service, we'll be using AngularFire Messaging, AngularFire functions and Ionic's Toast controller. Now, currently, there's a bug with AngularFire messaging which might already be fixed by the time you're watching net. But if not, this is some code you can use to fix it. I'll add a link to the GitHub issue in the description. The first thing we'll do is set up a token as a property on the service, Then we can inject our dependencies in the constructor. When a message is sent with the app running in the foreground, we're not going to send the notification to the device, but we'll just handle it directly in the app. We can do that really easily out of the box with Ionic's ToastController. So I'll create an async function here called make toast, then we just call the ToastController create and add whatever parameters we want on that Toast message. This will give us a Toast message at the top of the screen that fades out after 5 seconds and has the option to dismiss. The next thing we need to do is get permission from the user. You can run this method when your app is first initialized or you can run it on a button click. Basically, it's just gonna bring up this pop up window asking the user to grant permission to your app to send notifications. AngularFire Messaging has a method called request token that turns an observable. And when we subscribe to it, I'm going to set the token as a property on this service so we can use it later with our callable functions. The other thing we wanna do is listen to the stream of incoming messages and then handle them accordingly in our front end. We've already set up a method to show a Toast message, so we'll go ahead and make use of that. We'll pipe in the tap operator, then take the notification body and use that as the content for the Toast message. So every time Firebase broadcast out a new message, it will be handled by Ionix Toast controller in the UI. Then the last piece of the puzzle is to create a couple of methods to call our callable functions. And this is actually almost as easy as writing the function itself. We can say AngularFire functions, H T T P S Callable and then the function name. If you remember, subscribe to topic is the function name that we've already deployed to our back end. And then we can pass in the topic and also the token that we have set up for this device. This also returns an observable, so I'm going to again make use of our make Toast method to show a Toast message once this request has completed. Then we'll do the exact same thing to unsubscribe from a topic, but just calling a different function. So that handles all the complicated stuff. Now we just need to go into a page, inject our service, and put it to use. For this demo, which is part of my Ionic Of course, we have an FCM page. Then I also have a database service which will create a document in Firestore in the discounts collection triggering a message to be sent to all subscribers to that topic. But that code is not very important. It's just a simple Firestore document, right? And the way I have it Set up for this demo is that it will create a random discount percentage. Then if you remember from our function, it's looking for a headline property on the document to format the content for the push notification. So this way, we'll get a different random number for every notification so we can verify that everything's working as intended. Now we can just call our FCM methods directly on Ionic Buttons. So we have 3 different buttons set up in here. 1 to request permission, 1 to subscribe to a topic, and then one to broadcast the message. When we open the app and click the grant permission button, it will up the pop up giving us the option to allow or block notifications. Then I'm displaying the token in the UI which is just a big long string. Then I'll click subscribe to topic to call our callable function, and that will bring up a toast letting us know that we're now subscribed to the discounts topic. And lastly, I will send the notification by creating a document in Firestore, which then triggers the Cloud function to send them a message. When the app is in the foreground like it is now, it will just show the Ionic toast message, but when it happens with the app in the background it will trigger the notification on the browser itself or on your phone if you're running Android. I'm gonna go ahead and wrap things up there. If this video helped you, please like and subscribe. And if you wanna learn how to set up notifications on iOS and Android, I'd recommend upgrading to a Pro membership to get access to my full Ionic which covers native features in a little more detail. Thanks for watching and I'll talk to you soon.
The speaker explains how to set up pages and notifications on Android using the progressive web app, including setting up web push notifications and creating a variable for notification content to send to subscribers. They also recommend setting up functions and creating a web API to send notifications to subscribers. The process of sending a message to subscribers to a topic and subscribing to a new topic is discussed, along with setting up a variable and data to format notifications and send notification payloads to subscribers. The speaker also explains how to create a Web app, including copying and pasting a code from the Fire app, setting up a token, and listening to incoming messages. Finally, upgrading to Pro membership for more information on Ionic is mentioned.