How To: Send Push Notifications

[Music] [Applause] [Music] what's going on everybody welcome back to another episode of trade codes my name is trey hope as always and today's topic of discussion will be push notifications i'm sure everyone already knows what push notifications are or you've seen it somewhere um pretty much if you get a message on instagram and your phone is off or you might not be in the app currently you'll get a notification saying so and so sent you a message on instagram push notifications is a way that you can continuously update your users activity in the app without them being present so today i'm going to discuss how to set up for both ios and android and show you how to send notifications to both users specifically as well as topics so let's go ahead and jump into it [Music] all right so in order to download our packages we need to go into our spec dot yaml file of our flutter project and as you can see here we have five uh packages that we're using we don't need cupertino icons this just comes by default so just ignore this but the ones that we need to focus on is cloud firestore firebase core firebase messaging and http so with cloud firestore this allows us to use the cloud firestore database and we need this because we're going to be storing the fcm tokens of each device into a database and we need that because we uh we need the fcm token to know where the push notification is going to go firebase core package is necessary because in order to connect our apps to firebase we need this package without it we can't use firestore firebase messaging or any other other firebase applications uh firebase messaging is needed because in order to configure our app uh to know what to do when we receive messages we need this package right here it also allows us to subscribe and unsubscribe from topics and i'll explain a little bit more about that a little bit later and then finally we need the http package because when we send a push notification we're essentially making a a restful request and we need this package in order to send that request so these are the four packages that you need once you have those in there run flutter pub get it's going to download all of our packages for us good now we're ready to start the configuration for our ios device [Music] all right so to configure ios for push notifications um first we need to enable push notifications and background modes uh within xcode so in order to open up xcode we can just double click ios and hit open in xcode as you see as you can see here i already have xcode open so i'll save a little bit of the time but what we want to do is we want to select runner and then make sure that we have targets selected in runner and then from there we need to go to signing in capabilities so right here you'll see this button that says capability we're going to add the background modes capability so we'll double click that and we want to make sure we turn on background fetch and remote notifications and then we want to look for push notifications double click that all right so now we've added both of these capabilities so we're good on that part now what we need to do is we need to link a pns with fcm ap apns is apple push notifications fcm is firebase cloud messaging so first we need to register a key so we need to come over to our apple developer account as you can see here i'm already logged in and we need to register a key so we need to go to keys and right here we already have i already have the key available for like other products i've been using and you can use the same same apn s key for different projects uh as you can see here i use the same one but basically what you'll do is you'll select the key give it a name and then make sure that apple push notification service is selected so from there it'll generate a key and then you'll be able to download it so make sure that you store it in a secure location uh that way you can use it for later um so once you have the key you then can come over to firebase uh your firebase project right so uh we're in the demo project which is what we'll be using for our example we'll click select this cog right here go to project settings select cloud messaging and then down here for uh ios we will upload our apns alt key now i won't do it for this example because when you upload it you have to input the key id and team id and i want to keep those private so i won't show that but just know when you download that apns key that you just it from the apple developer account it'll provide that information so you want to make sure you store all that so that's how you register the key from there you need to register an app identifier so we'll come back to the app apple developer console go to identifiers and as you can see here here are some identifiers for other products i have i already have one made for this example um com example patreon x but the process for creating an identifier is you click this it's going to be app ids select app [Music] and then you're going to enter the bundle id now the bundle id is simply the bundle identifier right here so you can just copy that put it in um and then add a description and then make sure that you come down and select push notifications once you do that uh you'll be able to hit continue and then your identifier will be present right here so that's all you do on that end and then finally we need to generate a provisioning profile the provisioning profile enables signed communication between apple and your application and this is really for um since messaging can only be used on real devices a sign certificate ensures that the app is being installed on a device that is genuine has the correct permissions enabled so what we need to do is go to profiles [Music] and then we will select uh plus profile and then um for this example you can do ios app development um but if you're you know distributing to the app store you will select the app store instead um hit continue and then you will select the app id that you made which would be that patreon x1 i'm not going to go all through this because we've already done that but essentially once you do that then you'll hit continue and then you'll have your provisioning profile available and it'll be listed here now as i mentioned it's only for uh you only really need that when you're actually distributing um since this is just development we don't need to do that so that's why you don't see one for the patreon x but essentially those are the three things that you need to do when you're configuring for ios so now that that's out the way let's go ahead and talk about the configuration for android [Music] so for android integration there's some good news if you are using flutter android embedding v2 which is a flutter version that is greater than or equal to 1.12 then there's no additional integration steps that are required and so since uh we are currently on flutter version are we on let's see um 2.53 so yeah we're way beyond 1.12 so android integration really is only necessary if you're using an older version of flutter so luckily um you should be on a pretty recent recent version of flutter so we'll go ahead and skip this step and we can actually just go ahead and jump into the coding aspect of this example [Music] all right so for our notification service i created four methods here one method is going to send a notification to a user the other is going to send it to a group of devices and then we have methods for unsubscribing and subscribing to topics which essentially says hey give me notifications for this topic or don't give me notifications for this topic so first thing we need to do is uh instantiate the firebase messaging class so we do that right here then we create the endpoint that we'll be sending the notifications to which is fcm.googleapis.com fcm send then we specify the content type which is application json and then for the authorization that's going to be key equals that server key that we get from firebase so this key right here for server key this is under cloud messaging in your firebase project you want to copy that and say key equals that key uh if you don't do that then you won't be able to send notifications uh to this endpoint so the send notification method is pretty simple we just create a json object uh with uh these fields two which is going to be where um the notification is going to set the priority to high i assume that means that this notification takes uh presidents over the other notifications that you might be receiving and then we have a notification body which we just pass in the title and body and then set content available to true from there we make a http call make sure it's a post and then we call the endpoint pass in the data for the body and then our headers is going to be the content type that we specified uh up top and the authorization that we specified at the top as well um and then from there uh we have like i said we have our unsubscribe from topic so we call firebase messagings dot unsubscribe from topic and then the inverse for subscribing to a topic and then for um sending a notification to a user we pass in the fcm token um and then for sending it to a group we call slash topic slash whatever that topic was so it would read like this topic slash news but since we're passing in the group we're concatenating it this way so we'll just leave it like that so that's all you have to do for the service now in our demo page where the ui is actually at uh we're going to uh first instantiate firebase messaging again we created a text controller because we're going to be typing in the notification that we want to send to the other user then we need to make a reference to our database uh in firebase where we keep uh those tokens so as you see here uh we're going to have a token for the android device we're using and a token for the ios device we're using so that's what that's for and then we need to uh make a an instance of our firebase cloud messaging notification service also we need to um create a late stream variable that represents the device of the fcm token of the device we'll be sending to so if i'm on android the other device token will be the fcm token of the ios device i believe i said they're right if i'm on android i want the ios token if i'm on ios i want the android token so we come down to our knit state first thing we want to do is subscribe to the news topic because i'll be showing that in an example in a little bit of how when we send a notification to the news topic we want both devices to receive a notification so then we come down here i made this load method that's simply going to do some async calls uh first thing that we want to do is request permission on ios devices uh on android you don't do this but on ios you have to ask if the user can if the app can send the user notifications then we want to fetch the fcm token of this device so we call fcm.gettoken then we need to validate that it's not null so we call assert token does not equal null if it is no he'll throw air otherwise we'll keep going and then we need to determine which device we're wrong so we have uh strings this device and other device we check to see which device we're on by calling platform.is ios if it is ios this device is ios the other one android and vice versa from there we need to update the fcm token for this device in firebase so we call tokensdb.doc whatever this device is so if it's ios we're going to set ios the token for ios and we're going to set the token for android then we want to fetch the fcm token for the other device because we're going to be sending it to the notification to that other device so we'll call uh tokensdb.other device get and we'll get that token value and set it to our other device token variable and then down here is just the ui uh within the build method uh we have a text field where we will be typing in the text that we're sending and then we have a button that says send notification and basically the notification we're going to send it to a user on the app so we'll say new notification for the title and then the body is going to be whatever text we enter and then the fcm token is going to be that of the device token uh and then when we send it to when we send a notification to the group i'll be using um thunder client and vs code that way we can send it to all devices so let's go ahead and try this out [Music] all right so hopefully you got a better understanding of how push notifications work for both ios and android you now know how to send notifications to user devices as well as through topics so hopefully this video was helpful as always please like comment subscribe and if you need any help for any other topics related to flutter or anything outside of flutter rather just development in general please leave me a comment or send me a message and hopefully i can make that happen in my next video until next time talk to you later have a great day [Music]

Channel: Trey Codes

Views: 189

Keywords: flutter, ios, android, developer, code, coding, development, programmer, dart, notifications, fcm, apns, cloud messaging, push notifications, tech, apps, developers, youtubechannel, youtube, youtuber, subscribe, youtubevideos, sub, youtubevideo, like, instagram

Id: 9G4dvcW7UkI

Length: 16min 9sec (969 seconds)

Published: Wed Dec 08 2021