Part 5 - How to implement iOS push notification in flutter || Flutter Firebase push notification

hello everyone welcome back to the channel and welcome back to the flutter Firebase post notification Series so in in in this series we have seen uh how to configure the Firebase console that is the part one then how to get the device token how to receive flutter Firebase notifications then we have also seen how to show a notification when app is in the background the Terminator this is the part five in which we are going to see how to implement iOS post notification in the flutter so basically we are going to see how to create certificates in the Apple developer account as well as how to import those certificate from the Apple developer account to the Firebase console in order to receive the notifications in the iOS so before moving forward let's first review what we have done and also let's review the configuration we have done properly or not so in this scenario I'll go to uh our notification service class where we have uh it is it is a util class where we have implemented the notifications to receive the notifications in the background and the foreground so we till till now we have we have completed all our implementations uh I meant to say that we have completed all our we have completed all our coding parts so in this tutorial we will not see what to code because that part is already we have covered in the previous videos if you have not seen those videos I would request to start from the uh from the first video of these playlist so you will get more idea on how to start for the fire uh Firebase flutter post notifications if you remember that we had uh we have implemented for the particular class the first thing is we had uh implemented the request notification permissions when the user is uh using the iOS devices so this particular portions is required to ask for the permissions uh to receive the notifications for the app then uh the main functions that is required to receive a notification in iOS devices foreground message this is basically uh it will receive a foreground uh message where we have set the alerts uh Badges and the sound equal to true so this will enable uh enable the device to receive a notifications by uh playing playing the notification sound and it will also show a badge on the application icon right so once you implement you have implemented this method go back to your home screen where we have initiate our the main home screen class under the init State and then call that functions for foreground message so whenever this app will will be loaded and the home screen will be loaded it will call this foreground message that will enable it to receive the notifications then next part is again uh this foreground message will be called when the Firebase is in it for time being we are calling this uh we are calling this method twice when the fire will be in it in the main main. file and when uh the main home screen will be initiated okay so this is all the configurations or we can say that this is all the implementations from the coding side is required in order to receive the notifications right now our next part is we have to verify that whether we have properly integrated uh properly integrated the configuration in our in our Tex code or not so in this SK what you have to do is you have to open your project you have to go in the finder and open your project in the xcode so when you when you will double click on the runner. X Workshop uh sorry workspace file then it will open your uh this project in the xcode so once the project is open in the xcode click on the first icon if it is if the project file is not visible and there you have to verify the bundle identifier the Bund bundle identifier is nothing but it's a unique ID of an applications that will be mapped with the Firebase console as well as we'll add this bundle identified in the uh Apple developer account so in order to verify this go again click on the runner and there you will find the bundle ident ifier as uh this value right now go back to your Firebase console and there if you remember we have created two projects we can say that uh two applications one for the Android and one for the iOS so in that in that case you have to open the iOS one and there you will file the bundle ID so so make sure that this bundle ID and the bundle identifier in your app uh in your xcode is uh is the same it should be match so this way that we are going to connect the uh Firebase and our iOS Pro sorry flutter project and also if you have not downloaded this Google service info p pist file then download this file and in inex xcode you have to paste that file under under the runner so once you will you will paste this file after downloading then that file will uh that file will be appear in the xcode and with the it will have the key and it value here you will also find that the same bundle ID is displayed there with some other configurations so these API key and all are the confidential key so they should not be exposed now we have configure sorry now we have verified that our bundle identifier index code and the bundle ID in the Firebase console is the same so as of now we are good with the our project so now the next step is we have to go to we have to open the Apple developer account so let's first see the what is Apple developer account Apple developer account is nothing but uh it is the one account where user can manage or publish the iOS applications so in this case first you will have you should have have the Apple ID with the help of the Apple ID you can create your Apple developer account Apple developer account comes at a cost of the $99 per year so you have to subscribe to the Apple developer account then and only you will be able to publish and then and only you you will be able to create the keys and the certificate for the Post notifications once you have the app developer account then you can start the configuration for the Post notifications uh I would say that it is required that you subscribe for the app developer account at cost of the $99 per year then and only you will be able to proceed in this video another thing I would like to mention that it is not necessary that if you are working for for client then the client may have the Apple developer account to publish their applications then they can invite you to this account so that you can work on that account in order to build the applications right I'm assuming that you have Apple developer account then you have to go to this website that is the developer.apple.com account and resources so that is this is the first point from where we can start the configuration for the iOS post notifications and configurations to publish the applications uh in your app store I will paste this link in the uh this video's descriptions so you can find from there and you can navigate to this link if you see that I have already open to the Apple developer account and here you will find that I have some created certificates for the I have some I have already some certificates which I have created for uh my other projects here the first step is we have to add the device uh device is nothing but it is a unique iding that you have to get from your uh iPad or iPhone so that you can t test the applications you are developing right so in this case what you have to do is you will need a one identifier of your phone and then you can add those device with the help of the identifier so first you will need a identifier from your from your device so how to get that identifier I have already created one video to get the device uu ID so in this video you will you will get how you can get the device uu ID that is universal unique identifier and this device uu ID is required by every developer who want to test in their the applications which they are developing so I will also paste this uh URL check out this video and you will get to know how you can get The UU ID for your device and you can start work on it so I will I will uh I will just copy this my identifier so I will I will show you how to add a new device here so first uh come to the devices sections and then click on the plus icon so in order to add a new device go to uh plus icon devices and then there you can select the pl platform if you're going to add a device for your Mac OS then you can select Mac OS otherwise for your iPhone iPad the first options would work then in a device name so I would say that Jin's device and then I will P my uh uu ID there so since uh this device is already there present so it will not allow me to add a new device of it will not with the same uid so this the one this the this is how you can add your device there to test uh applications once the the the new device is added then next step is we have to add a new identifier identifier is nothing but the application here and it is added with the help of the bundle ID that we have already verified in our xcode so again I'll click on this plus icon and then here we have the different types that for what identifier we are registering so for a time being we are going to register in applications because obviously we are developing an application so it is app iding so make sure that you have selected app ID then click on continue and here it will ask what is the type so it is app then continue and then here we have to write descriptions so let's say we can write the flutter notifications right and then to get the bundle ID you can go to uh your Firebase console or you can get it from the xcode so I'll go to xcode and select my bundle ID and paste it here then here uh you can select the what capabilities you want for this particular applications here we are going to select the push notifications because uh we want that post notifications should work for this application so here we will find the post notifications selecting and click on continue then again click on register now you can see that the new identifier has been added that is flutter notifications with this identifier after adding the identifier our next step is to create the certificates so in order to add the certificate first open your sorry first you can you can open the keychain applications on from the Mac device once uh kitchen access is open then click on this kitchen access then go to a yes go to a certificate assistant and then request a certificate from the keychain Authority once this will open you have to use your current Apple ID from which you have registered in your Macbook so it will automatically select that email address username then click on save to dis because we have to uh save this certificate to our disk and click on continue so if you see that this will be uh the certificate will be created on the desk desktop click on Save and certificate is a created now what you have to do is go uh you have to create a new certificate here so click on this then again it will ask for the different software for what so uh for a time being we are developing the uh iOS application so we can select the Apple development or we are also if we are planning to distribute these applications on the app store then you can we can also select the Apple distributions right so in this case I'll select the Apple distributions you can select the different options based on your requirement so let's say that uh you want I iOS distributions that is that will require the uh sign in sign up for the submissions to the App Store and other AD hog distributions so ad up distributions can be uh Distributing via uh test flight and all this stuff so I'll go with the Apple distributions then click on continue then here we have to choose the certificate file that we have created from the uh keychain access right so I know that it was on the Des desktop I'll select that one and upload then continue it it will create one new certificate here so we have to download the certificate so once the certificates are downloaded double click on it and it will install uh that certificate in your uh local system that is uh in the keychain now okay so we are good with the certification now now come back to uh all certificate options and then we have to create a profiles that is the provision profile so again click on the options that is a profile and then here we will have to create a new profile click on profile now again uh here we have to select the different options so that is uh development options or a distribution option that's based on the what profile we are going to do so as of now we are developing so we'll see the iOS development so also when you are planning to publish these applications to the app store then you have to select the App Store distribution also so if you will select the distributions on app store then it will deselect this one so right now first we'll create the development one that is our app development then click on continue now to generate the provisional profile select the applications so our application is this one flutter notification I'll select this profile then continue it it will ask that what certificate we want to uh use so we have already uploaded one certificate so it is says that it should be from the my account my bankbook so I'll use it one and then continue it will ask that what device you want to go to include for the provisional profile because this is uh if you include this then it will allow us to uh type that app development on our devices so we can select this one we do not have any Mac devices so I will deselect this and I will select only my iPhone then continue and here is the provisional profile name so let's say that is the flutter notification Dev and generate so once we create the provisional profile profile we need to add this provisional profile in the xcode so once you download this you have downloaded this provisional profile make sure that your project is open in the xcode once your project is opening open in xcode uh then you can you can double click on the downloaded provisional profile you will uh download click on this downloaded provisional profile you will see that the provisional profile is added in your xcode here in this section right okay so as we have seen that once you install the provisional profile then on on on the first on the uh under the runner then in the signning capabilities and then on again Target Runner you will have you will have the provisional profile installed there so if you do not have the automatically manage sign in click on the automatically manage sign in now in this case you will see see that there are the team and the bundle identifier now what happens here in your in your MacBook you might have logged in with your own account that is with your own Apple ID but sometimes what happens client may have give you an access to the Apple developer account so in that case what happened you first you will have to add that client Apple developer account uh in the xcode and then you can select the uh that account for the team because if you see that right now I'm using the different account right because this this client has given me an Access and I have created the keys and the uh I have creaded the profile and the certificates under this account so what I will have to do is I should select this Royal uh this one account that is Royal Turnbridge well uh Skin Clinic account because we have created the profile and all for this account so once make sure that you select the team uh sorry the first make sure that you that is automatically it manage the automatically manage Sig in and then make sure that you select the right team from where you have created provisional profile provisioning profile so if you see that once when I select this one it has automatically updated the signing certificate uh that I have which I have created this is done click on the capabilities and then here you have to search for the push notification and again we we we need to add a new capability that is background modes and double click on it once you select the background modes here we have to select the two new modes that is uh background Fetch and the remote notifications because we have to fetch the back background data as well as we have to fetch the remote notifications that Firebase will send uh the notifications to the apple and uh to the Apple APN that is fire Apple post notification service and then our device will have those notifications right so please make sure that you are doing all these properly uh because if you if you forget any one step here then uh the notifications in the real time will not work properly now if you see that we have enabled two capabilities here one is the background notes and another one is the post notifications right so again when you come back to your project then go to Runner and then open info. p p list here you will see that the two uh two capabilities are added the first is UI background modes in which we have added Fetch and the remote notifications so once these two things are added that means you have all properly added the uh capabilities for the notifications now again you have to come back to the Apple developer account under that go to Case and then create a new key so again I will I will add that post notifications I will give a name as flutter app and then I'll select the Apple post notifications then click on continue then register okay so uh in this case you have to make sure that you download key prop uh download this file properly because that is the uh K8 file that we are going to import this file in the Firebase console because if you read this that this file cannot be redownloaded as the server copy will be removed so make sure that whenever you download this file and save this file in your G repository or any secure place so whenever it required then you uh then you can retrieve this properly otherwise you will have to create a new uh new key okay so I'll download this key once uh this key is downloaded the second thing is you have to save this app key ID so I'll copy this key ID again make sure that you you save this key ID properly at uh in a secure place it can be a GitHub or wherever you are managing your code so next time you will have the idea that okay uh whatever uh the credentials and all stuffs are stored here so you will get you will you can retrieve it properly so for a time being I will uh I will Saving here you can ignore this one and I will say as it as a key now uh if you see that we have downloaded that Au API key right come back to your flutter notifications and then click on the Cloud messaging because if you remember we have created the key for the APN so uh if you read that then it says that the fcm can use either APN authentication key or APN certificate to connect with the APN so what is the scenario is whenever we send push notification from the Firebase then it will make a call to the Apple post notifications and there we have the certificates and the key so that authenticate each applications and then it will send the notifications to the Apple device with the help of the bundle ID and the device ID that when we have that that we have generated previously okay so here it says that no APN o key so we can upload APN o key browse we have it in the download I'll select this one and open here it says the key ID is required that we can get this key ID contr C then the team ID is required so you can get the team ID uh from the Apple developer account you will see that your account then there is a team ID so I remember that this is the team ID I have I had already copied it and I will add team ID and upload okay so uh we have successfully added APN APN key that is p8 key so this is the most important step which is required for the push notifications in the uh iOS devices okay so we have made all the connections in order to uh send notifications because notifications was working very well uh for the iOS devices so these were the this was the additional configurations which is required uh to send the post notifications when you deploy app on the app store or when you publish the app on the App Store so from the now onwards what you can do is you can create your test flight in the Apple developer account because I will not I will know I will not go deep dive in the what is the test file uh sorry what is the test flight and all stuff so once you have the test flight then you can export your applications to the text file uh sorry to the text flight and from from of your register device that we have register one device here right from the register device you can download the uh these applications from the test flight and and the test on your local device so once it is working properly then you can again uh publish this application or you can publish your applications to the App Store so this was the part five for the how to implement iOS push certification in flutter which is again I will say that it is the most important part to create the certificate to create the profiles identifiers in the app connect so we can also say that in this video it shows the how to create the identifier and how to create the applications in the uh app developer account so uh that's all for this video thanks for watching and please if you like this video please like share and subs subscribe and have a nice [Music] day

Channel: byte array

Views: 778

Keywords:

Id: wyMx5SRYKxM

Length: 28min 12sec (1692 seconds)

Published: Mon Jan 22 2024