Ionic Native Push Notifications + Firebase Cloud Messaging

[Music] 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 fun because it ties together many of the resources in the firebase platform including firestore cloud functions messaging and user aw 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 source code at angular firebase comm 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 is 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 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 - 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 will 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 an angular fire as well as firestorm then adding our firebase credentials then we should also have the firebase native plugin as well as our custom FCM provider angular fire goes in the import section and our firebase plug-in goes down here in the providers section before we write any more code I want to 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 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 the users 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 will 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 get 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 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 devices collection in fire store the goal is to send a notification to every device that a user has registered so we also want to save the user ID on this document I'm just hard coding a test user but in real life you'd want to 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 want to 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 that 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 three 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 I on it 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 want to point out that if your build i OS you also need to enable push notifications in your project in Xcode you also need an Apple Developer account and things like that but that's beyond the scope of this video what we want to do next is build a cloud function that will notify a user whenever they get a new subscriber or follower or some other important event happens on their account so run firebase and net 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 want to 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 firestorm 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 tokens 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 subscribers 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 fully on a course that will 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

Channel: Fireship

Views: 138,126

Keywords: angular, angular 2, firebase, webdev, app development, typescript, javascript, lesson, tutorial, ionic, ionic native, fcm, firebase cloud messaging, firebase push notifications, ios fcm, android fcm, ionic fcm, ionic native notifications, cloud functions, firestore, angular 5, firebase ionic, ionic 3, ionic 4, cordova

Id: SOOjamH1bAA

Length: 9min 38sec (578 seconds)

Published: Mon Mar 12 2018