Send Push Notifications in Angular with Firebase Cloud Messaging

Key Takeaways

Firebase Cloud Messaging allows you to send push notifications throughout multiple devices even after an app's been closed. It does this on the web by registering a service worker that listens for messages from Firebase in the background. As you can see here, we've completely closed our Angular app in the browser, but we still get this push notification on our operating system directly from Firebase. Many apps do this to notify their users of important information such as Slack, which will notify users when they have a new mention on a channel. Let's get started by building this worker into our Angular app. Create a new file in the source directory called Cloud Messaging SW.js. Then inside that file, we'll import the Firebase SDK and initialize it with only the messaging sender ID. Then we set a variable with the Firebase messaging library. That's actually all we need to do to set up the background worker. Everything else will happen automatically. However, to ensure compatibility with modern browsers, we need to add a manifest.json file. Inside this file, we include the GCM sender ID, which is the same for all applications. So, keep it the same as it appears in this video. And then you'll want to link the manifest in the head of your index.html file. To ensure these two newly created files get included when we build the app, we want to add them to the Angular CLI.json file. With the initial setup done, we can start building the service. We're going to need both the Angular Fire database and Angular Fire O modules as well as the Firebase SDK. We're going to keep track of the most recent message with a behavior subject, which is just an observable that we can push new data to. So the way cloud messaging works is the browser will first ask the user for permission for an app to send them cloud messages and then Firebase will give us a token once that permission has been granted. What we need to do is save that token with the user's O ID on the Firebase database so we can use it on the back end when we start sending messages with Firebase Cloud Functions. To do that, we will subscribe to the Angular Fire O state taking only one just to prevent a longunning subscription. Then we'll save the O ID as the key with the token as the value in a collection called FCM tokens in the database. The token will change anytime the user clears their browser cache. So it's important to update this token periodically. In this example, we're going to update the token every time this get permission function runs. This will happen whenever the browser asks the user for permission to send them notifications. The request permission function will trigger that popup that the user has to confirm and then from there we can get the token and update the token in the database. The last thing we need to do is listen for new messages and then we'll update that behavior subject whenever a new message is received. We do this by calling on message which will return the message from Firebase and then we can call next on our behavior subject and pass it that value. So now we can use these functions in the app component or any other component that you want to set up messaging with. When the user is actively using the app, we want to show the notification inside the app itself. We don't want it to come from some external source which would be distracting. So to do that, we inject the messaging service and first get permission and then we set up the receive message function and then set a variable on the component to that behavior subject. Again, a behavior subject is just an observable. So we can unwrap it in the template with the async pipe. So here we're handling the notification in Angular and it should look something like this. Notice the message appears directly in our Angular app and not coming from the external browser or operating system. If the app were closed at the time this message was sent, the service worker would take over and send the message to the external browser or operating system. Now that we know how to receive messages, we need a way to send them, which I'm going to do with a Firebase Cloud function. If you don't want to deploy a cloud function, check out the link in the description where I provide a curl command to send push messages over HTTP, but in most cases, you're going to be sending push notifications when something happens in your database. So, it's a perfect fit for Firebase Cloud Functions. In this example, we're going to create a function called FCM send, and it's going to run during the onreate trigger in the database. So, anytime new data is added to the messages for a given user, this function will run. So, we'll define a variable called payload, and that's the actual message that's going to be seen by the user. From there, we'll tap into the admin database and get the token for that user. So, we'll chain together a couple promises and then once we have the actual token, we can send that to the Firebase messaging library. We call send to device and send it the token as well as the payload or the message. This is what will actually trigger the message to be sent to that device. And that's pretty much it. Pretty simple cloud function. Go ahead and deploy the function and you should be ready to start sending messages to your users. As you can see here, we update some data on the messages node and the user is automatically updated with that push notification. If this video helped you, please like and subscribe. And if you're serious about Angular and Firebase, consider becoming a pro member at angular firebase.com where you'll get a free copy of my book, The Angular Firebase Survival Guide. Thanks for watching and I'll talk to you soon. [Applause] [Music]