Flutter Android, Web & iOS Push notifications with Firebase messaging

for adding Firebase messaging for our Android iOS and web applications that we made with flutter we have some little steps first of all I recommend you to use this documentation it's about flutter fire and in here you have a CLI that help you do configurations very easily and in very short time before before check this documentation I I wanna use this get started and overview here we want to initialize our flutter fire CLI before we can use this command we need to add Firebase CLI you can see this info and in here you can see this is a Firebase website and you can very easily add it in your application for example I'm in Mac OS I use Mac OS and in here I need only copy and paste this line in my terminal I do this before and after that after you install your Firebase CLI you need to add flutter fire CLI let's do this and you can see I have currently activated if you have some problem you need to export this path I do this and after that I can flutter fire configure when I use list command I have nothing because I'm not in a directory that's contain flutter application okay let's before before configure our application we need to create new flutter project I use whiscode new window and here I use command shift and P and new project application I use these yes this folder and I called [Music] yes I added you can see it's creating my application and after that in this terminal I go to my project and flutter Firebase message and you can see I'm in this folder but flutter fire con fee cure I use this comment and after that you see a flutter fire are fetching available throttle project I have these project it doesn't matter I use Ctrl C but before you can do this I wanna we know that we have a Firebase comment I want to log out from my current account log out and you can see I'm logged out from all my accounts but when I'm in Firebase log out I can flutter fire configure I can do this because you can see because I don't have any flutter fire if I use for example Firebase project s that's Dash list maybe I get error because I don't have any login account okay Firebase login after you use these I can put yes and after that you can see I go to my browser to sign in with one of my accounts I use this account hello and yeah it's configured yes and in here I'm I'm logged in and after you log in successful you can use flutter fire configure after that you can see you have some applications and projects in your Firebase but you can create a new project but I tried these and I get error because of that I prefer to create projects in Firebase console by myself and do other steps in here okay come and see and go to my Firebase account okay in here I I am in my console firebase.google this is my user that I log in in my with my flutter fire and add new project I use flutter Firebase I need to add Dash and continue I use enable Google analytics it doesn't matter for this course I use this account and create project alright after that you can see this and my projects are built I'm minimize this and if I check again flutter file configure you can see my application and my project my my project is added in here flutter Firebase messaging this is an ID for that I go that and press enter and after that you can see configurations for Platforms in this course we don't need Mac OS I use space and uncheck Mac OS but we have Android iOS and web and press enter if we can do this manually but it's take a time and we can use this I explain you what happened in here and when you when we use flutter fire flutter fires are which code added with flutter fire to our project I will explain you some codes in here filter Firebase is because we have Android it's need to update Gradle I use y to handle these you can see it's done and when we done these you can see we have a file in here that add web Android and iOS configurations for us but we have error and why because before doing anything I we need flutter we need flutter Firebase core and flutter Firebase messaging let's add it I used as it stands for that Firebase core Firebase Korea we need that and variable score is added and we need Firebase message yes Firebase Firebase messaging and yeah it's added okay my dependencies are good and in here we don't have any Arrow okay we have some configuration and what is these configurations let's start with Android when you configure Firebase for your Android application first of all you need Google service Json this files are made this file is made with flutterfire if you want to manually configure your Firebase for your Android we need to go to your you can see you need to add your Android but if I refresh that you can see filter fire made three applications for me flutter Firebase for Android iOS and web you can do this by yourself and manually you can add it in here if I use these you can see in here I'm in Android if I press this button you need to add your package name and after that Firebase give you a Google serves.json you can see this in here and you need to add it in your app folder and if you want to add for your iOS these applications are made with flutterfire and in here see the sticker instruction you can see in here we have a download Google service Dash info please this file is for iOS if I go to iOS folder you can in runner you can see I have a Google service info pillis it's for iOS and in Android googleservice.json for Android for web we don't have a file but I tell you in Next Step what we need to do okay we have a configurations for three platforms and for checking that's everything works fine let's start with Android before before I run my application I need to handle some step in your main.dart you need to add initialize Firebase for your application first of all I need to widget binding widget flutterbinding dot in share initialize and after that I wanna async my Main function and oh wait for Firebase dot initialize app and in here we have it options I use default Firebase options current platform and what's was that and what and what is the lease this is Firebase options that flutter fire make for us you can see current player colored current platform maybe it's Android and you can see if if it's Android we have at least configurations apart you can see these items in your console and we can only add current platform and everything work for us this is fine for Android let's run our application in Android I bring my emulator in here okay my emulator is up and let's start our application and check what happened I get error because I need to change my mini sticker version to 19 for boot ads I go to my build Gradle in app and in here I have a mistake and I just remove this and passed 19. and run again okay for checking our code we need to go to background I explain you because if you are in foreground you need to handle messages in Firebase with another way but if you are in background you can see notifications for check that I go to my Firebase panel and in here I go to build I'm sorry I go to engage messaging you can send message from Postman or your server but I will explain you later in first step I want to add and push my notifications from Firebase console okay create your first Firebase notifications and create okay okay in here I need the title I add title for Android this is Android and here we can send notification bar also for testing but I will explain you later next in here we need to add your apps we have three apps you know that Android iOS and web but in here I need to check Android click Android next scheduling it's for now next and these are optional we don't need that for now and click review and publish in here you can see we have flutter icon and if I check this title for Android and we get our notifications in Android if I tap that you can see our application is up we see that with very very short implementation we have a notifications in our application we can do more things I will tell you in this video but before do extra things let's check notifications on web for implementations notification Firebase notifications in web and iOS we need request permissions let's do this in here I have a Firebase messaging messaging and its new Firebase aging dot instance and in here I wanna await messaging dot request permissions these request permissions not need for Android but for iOS and app and web we need that I use LR true we need alert this config is doesn't matter for now true need badge carplay Falls alert false and pro false and sound three okay Blitz run in web I disconnect this and choose my Chrome web and run it again okay you can see my applications is up and it's loading yeah you can see this is the permissions that in where we need that I choose hello and we have our applications okay for handle this I create another tab because when when you are in browser and goes to another tab that means your current applications is background and I tell you I need background for now but this is not work now because we need add two specifications to code to our applications because flutter currently need add some JavaScript code to works correctly and to handle that goes to web folder create another another file and called Firebase Dash aging bash SW dot Json and we need to fill these I we go to the documentations and in here you can see for usage I go down for creating this yeah background message for web we need to add this code to our JS file this Imports some scripts and in here we need to fill these data with our configurations I go to my Firebase console and if you go to your project settings go to Cloud messaging I'm sorry go to your general and in here if you go to your web apps you can see the configurations for JavaScript we have a Firebase config these items here is for or for your application I copy these and after that I add my const final and replace with this Json Firebase config and saved and we need to add these in my index HTML with you can see in here after you add these you can see in here you need this script in end of your tags in your index HTML in body I have another script and after that I add this script and saved Firebase send and create a token for each device and we can store it store this token in our database in our local database or server database and send notifications to each user or each device for check for checking these I use developers.google of playground enter and in here you can see we have a three step I go to third step and in here I need authorize API for Firebase messaging authorize API and after that it's need to sign in with my one of my accounts I know that this account is for my Firebase and my applications and projects are initialized in this account I choose these and hello and after that Exchange click exchange and here you can see I have some times and after that this token is expire you can see this access token these configurations is it's not for uh for for us because we are only care about VR only care about clients but I show you example that how you can test for yourself change get to post and you need add this request projects these sections is for project ID and where you can find this you can go to your general your project settings and general and here you have project ID copy these and paste it in here and after that you can see after slash message sent we need a create request buddy this this is a default request body I remove this token this token it's about and for each device I remove these and let's change body and title this is for web test and fcm message is okay and how I can get this token for web for default you can run this Firebase messaging dot get we have messaging I can messaging.get token and this is async future I can await and get final token and this is stored in this the in this variable but before that you can see we have a weapon key this weapit key it's for web and for Generate these you you need to go to your project setting and Cloud messaging and after that in VIP and in web pushed certificate generate new key and you you need to copy these and goes to your project and paste here and this is my token let's print it to use that until I can okay and run again my application my application is up let's wait to hello notification hello and I want to go to background create another Tab and in here if I go to my debug console you can see I have my token copy and in here I need to put my token in here and close send this request you can see we have not error and my request is sent and let's check my notifications and you can see where I am in Mac in Windows it's different but I have a notifications bar and in here I have a SIM message this is my website this is localhost for now and this is for webtest exactly this body let's configure for iOS we we know that we we know that we use flutterfire and we have a Google info playlist but we need some more steps for iOS and first of all I need to mention you can't test iOS notifications with simulator this is not support in iOS simulation you need to check in real device but you need to buy and you need to have a developer account or you have to join in a team for example for your company to test that currently I don't have but I explain you how you can configure first of all open xcode I am opening my project in my project I know that my flutter Firebase messaging in iOS and workspace open okay in here in your Runner first of all you need to add capabilities I click that push notifications you need you have to edit these capabilities in your applications and after push notifications click again and background mods after add background modes you have to check background Fetch and remote notifications okay we are done in xcode and final step for iOS is in here you need go to your Apple developer Member Center and create apn's certificate and download it and after you download it you need to upload your p8 file and after that everything fine and you can run your project in your real device or you can send it in test flight or App Store and test but if you have a developer account you can connect your device to your Mac and from xcode you can run it your in your mobile device you can't run in simulator it's not like Android until now we'll learn how to show notifications in Android web and iOS we see some configurations we see weapit key and how we can send notifications in background but how we can notice user in foreground Firebase block notifications when you are in foreground but you can handle it with another listener I go to my home page and in my initi state in here I use Firebase messaging that's on message Dot listen and in here I can listen to new messages you can see in here we have a remote message for example if I get a new message I check if events.notifications it's equals null I use return and otherwise I want to return uh for example I want to show a dialog this is a dialog I wanna for example return a column and this column is main access alignment but Center cross access alignment Dot Center and it's have a one chart for example the container with 200 and height 200 and for example color colors.white and for child I wanna use a column again and here I have a text this text is about events that notifications dot title it's maybe null I use these and another text for body okay body and some space we can add in here for example eight and it's good for now let's run first and run and check first in uh Android my application is up and you can see we have a we have a token I copy this token and yeah I can I have it I think yeah I can put it in here and send request you can see I have my message this is this need to be changed but if I'm in background and again sand you can see I get a notifications and let's check when I'm in foreground it's need to wrap with a widget I call it material because we don't have material we have a weird things oh my God we need to refresh again and send and you can see I get my Firebase notification it's need to have some some decoration I it's it's maybe take a time I need to change the size but we can handle it in the foreground and let's check in web okay I'm here in web and let's hello notifications permission low and I think yeah in my debug yeah I have my token let's copy and change the token in here and paste and close and send request and you can see I get the Fuller screen dialogue in my website and in here we can handle message in foreground okay let's add another feature I want to create features that help me when I tap to the notifications forward and redirect me to a specific page for example I can consider we have a chat chat application and when we receive a message and user press the notifications we want a redirect user to this chat page not home page because default behavior of notifications when you click on that you redirect to home page and start application if if your application is dismissed and terminate your application will open but if you are in background not for example if I you press home you back to foreground but I I wanna handle redirect and navigation let's create another page for example I have chat page.ort and this is a stateless widget chat page let's import material yes and it's very simple scaffold with app bar and Apple title this is a text I send for example chat page we have these page and let's add roads I know that I have a my home page I bring this title in here and we know that we have a chat a chat and chat page nice and we need to remove home and add initial roads and for the first we go to my home page okay it's good and how I can handle this I know that okay I have a chat page but when and where we need to specify listen listening to new notifications Tab and redirect user okay for handle for handle lease in my home page I want to create a for example void handle navigations this is a method that it's get remote message remote message this sent from our notifications and we can check what data in that let's let's check an example in here when I want to add my body I have a notifications okay this is body title and some specific items but I want to add another object to my Json these objects called data and with data I wanna handle extra things for example let's add a type and this type is chat we can receive this data and this Json in my remote message I have this let's check if you check message.data you can see when you put data object you can receive it in your flutter okay I have this data and let's get type but before that let's check if message.data type equals chat that means we get chat notifications okay and in here I use Navigator you can use for example get X Navigator or everything you have for example you can use go router but it's I want to pick it I want to keep it simple Navigator dot push named we have a push name because we Define that and chat you can for example send some specification for example you have you have a username in here or some data in that for example ID chat ID you can receive these and put as an argument to your page Bots let's keep it simple okay I handle this but I need to call this and where okay I want to create another method future void this is a feature but void okay for example setup message this is the async because we have a future and in here let's check in remote message we have a remote message equals await Firebase messaging dot instance dot get initial message we get message and after that we have to check if this message not null V handle navigations we know that okay we have a get initial message and handle it but we need a listener to open app and that means okay maybe we have yet initial message which we handle it but we need to listen to to opening app we have another concept fiber messaging Dot on message open app we need to listen these and we know that this event is remote message and we can just handle navigation here and we have this okay let's run our application and check what happened run but I'm sorry we have a more steps we don't call it in my initial initial State setup message I call it in here and again run okay my application is up I need to go to background because when I'm in foreground until now we don't have any notifications we have a dialog let's put it in background let's get token copy the second and add in here okay we know that we have a data chat close and send request and we get a notifications I click that and you can see I redirect to chat page but if I remove this data or for example we have a portal file type this need to go to profile but we don't have profile let's close send it again and when I click that just open application but we can handle it in here and add another if or switch if type is profile push to profile final things that I want to mention that you see that when we are in foreground we didn't receive notifications we just can handle and listen new notifications and and do something but Firebase blocked notifications in foreground we can add it by ourselves with a package we have a floater look in here we have a lot of local notifications and with that we can handle it let's copy and add it on in our project with plotter local notifications you can send local notifications it it's not depend on Firebase and it is a package that's very helpful for for example you have an alarm application you can add it to your project and use it for example in each time you need send notification to user but I want to use it for my foreground notifications in public speak yaml I add my dependency okay we have this but let's check documentation and this is not for web this is for Android iOS Linux and Mac OS let's bring IOS and Android config in our application in here I wanna go to first of all are you a setup I go to iOS setup and in here if your Objective C Unit add these otherwise in Swift you need to add this line and where is this I copy this because I have a Swift and in my project I need to go to iOS run error app delegate.swift and you can see I have these and after that I add my code in here cleaning and in here yeah I have these and yeah I can fix for so it's done it's done and in Android we have some more steps but it's in Android setup I go to Android setup we have these you can add for example Window Manager it's it's some complicated things you can edit but it not important in this course let's use this you need to request permission in Android 13 and everything is worked let's go to main and initialize something in my initial state for flutter notifications in local you can change and put your these configurations in another method to keep things everything is clean but I do it in here I have a final flutter local notifications plugin and flutter local notification plugin equals flutter plugin I have this okay we have initial settings for that I want to add initial settings for Android and iOS I have const Android initialize settings equals initialize Android initialize settings equals Android initialize settings we need a default icon default icons we know that in mid map in Android app SRC in main res and in mid map we know that we have ice launcher for access to these ice ISO launcher unit add piece and Meep map I see literature nice let's add Darvin Darvin initialization settings is for for iOS [Music] initialization setting and after that we have initialized settings initialization setting equals initialization and in here you can see you can add or your configurations for that we have for Android and iOS Android Android and iOS IO or Darwin yeah we can put it const everything is correct we have our initialization setting but before we initialize flutter local notifications let's create a channel we know that in Android we have notifications Channel okay let's add an Android notification Channel with flutter local notifications const Android notification Channel a channel equals Android notification Channel I want to add for example message name is message I'm sorry it's here we can add a description I want to add description for that please these four flutter Firebase and it's very important add importance importance to Max in here I want to create my channel this is a method because it's async and we can't async or any test State I put it in other in another method I add it in here void create channel and this channel it's neat to get Android notification channel channel and in here final flutter local notification plugin plugin calls flutter local notification plugin yeah and after that oh wait plugin dots resolve result platform specific implementation okay and this is the Android flutter fiction plugin and in here we can create notification Channel and we have this Channel and everything is work we need add async in here and yeah in here we create a notification Channel because we know that in Android in in Android we have to create channel and in all channels we can send notifications okay in here I need to put channel in here and yeah and after that let's her notification plugin and initialize with initialize settings we initialized everything for our notifications okay but before add some code in here let's remove this because I don't want to show dialog I want to show notifications but before that we need to go to Android manifest in Android app source and in Main kotlin I don't Android manifest in here in end of your application before application is closed you need added metadata you have to add this metadata to pass your to a specific to specify and tell to Firebase use this channel for your notifications if you don't do that it doesn't problem but I wanna put importance maximum to background and foreground notifications I tell the Firebase Firebase notification I tell to Firebase use my channel I I need to add a message this is my ID you need you you see that in here I using messages unit add this metadata in your manifest two tilt the Firebase use this for default notification Channel let's go to yeah and after I listen new message in foreground I check if event let's change events to okay I know that I have a remote I have a final notification it's events dot notification and I have a final Android it's for Android specific it's for Android specific Android event dot notification Dot Android and if notification and if notifications not null and Android not null flutter local notifications plugin dot show okay we need ID I use notification dot hash code for ID and for title notification.title and in here notification.body a notification detail where is that we need to create it notification details in here I have Android Android notification details and what is my channel ID I have my channel dot ID and channel Dot name and channel description I have a channel lot description and I have a icon Android dot small icon but in web this is that this doesn't work you need check if you are in web for example you can handle it with dialogue you see that but we know that local notifications not worked in web okay and make sure you test in on in on your iOS your I tell you you need to buy and have apple membership and test that to work correctly on iOS maybe you need to add some details and specifications for iOS but it's very simple to that okay let's close and run again okay my app is up and let's send notifications send request and you can see my notification because it's important to Max shows in here and I have my notification let's dismiss it goes to background and you can see I hope this is useful for you I'm sorry I don't have uh iOS and apple membership you can test it it's not very hard if you have any questions please tell me in comments

Channel: Mahdi Mirzadeh

Views: 16,104

Keywords: flutter development, mahdi mirzadeh, android development, ios development, flutter, flutter tutorial, flutter tutorial for beginners, flutter development tutorial, flutter development full course, flutter development course, firebase tutorial, firebase flutter, firebase messaging flutter, firebase messaging android, firebase message notification flutter, flutter notification firebase, flutter notification, local notification in flutter, flutter web, flutter web development

Id: NwNSooG4FNA

Length: 50min 54sec (3054 seconds)

Published: Sun Apr 09 2023