Ionic 4 Push Notification using Firebase Cloud Messaging (FCM) + Source Code

hi everyone I am reading J alpha love Jane welcome today I will show you the comprehensive step-by-step tutorial on receiving a push notification on mobile app using ionic 4 and firebase Cloud messaging fcm we will use a unique for Cordova native fcm plugin for receiving a push notification and using firebase API for sending push notification from the postman this tutorial divided into several steps step number one create a new ironing for app step number 2 setup and configure Google firebase Cloud messaging fcm step number 3 add a unique for Cordova native fcm plugin step number 4 run entails sending and receiving push notification google said that notification is a message that pops up on the user's device notification can be triggered locally by an open application or they can be pushed from the server to the user even when the app is not running they allow your user to up in to timely updates and allow you to effectively engage users with the customized content in this tutorial the message sends from the firebase via API using pulse man they are received by ionic for mobile apps using ionic Kaurava native app cm plugin the following tools frameworks and modules are required for this tutorial not jazz angular age a unique for Cordova Google MCM a unique for Cordova a native MCM plugin pause man terminal for Mac or Linux or command line for Windows IDE or text editor we are using Visual Studio code before going to the main steps we assumes that you have to install no GS next up create or install a new ionic force here I buy open the terminal or not command line then type this command leathers ionic CLI in your terminal or command line check the version by type this command our Ione question is five point four point 15 step number one correct in UI unique for app we will create an ionic for application with type angular using ionic CLI tap this command to create it with default layout the side menu next go to the newly created app folder because Cordova not enabled by default when to create a new ionic 4 app enable this framework manually using this command open this newly created a unique for project with your favorite IDE or text editor to use Visual Studio code simply type this command in the terminal we need to change the package name to match the Google F same setup open and edit config.xml then replace the widget ID to your package or bundle ID we are you seeing bundle ID calm chamber Ione same to activate this new bundle ID remove and add again the platforms that previously added as usual run the unique for air for the first time but before run his lab mode type this command to install ionic lip you the without automatically opened and if you see a normal unique for sideburn application like this that means you're ready to go step number two setup and configure Google firebase Cloud messaging FCM we are losing firebase Cloud messaging FCM because it's a cross-platform edging solution that lets you reliably deliver messages at no cost in your browser then go to Google firebase console by type this URL in the address bar then login using your Google account next click on the add project button they'd fill the project team with Ione for FCM then click continue button live enable Google Analytics for this projects as default then click continue button select an account one that use for Google Analytics we are seeing our existing Google account then click read projects button make click continue button and you will redirect to the project dashboard page click the gear button on the right of the project offer offer view then click project settings click the cloud messaging tab then write down the server key and surfer idea for next uses in the API and ionic 4 app next next to the general tab then click the Android icon in your abs to add Android app we the required fields in the form a squeeze then click the register app button next download the Google services Jason then copied the root of the iodophor project click Next button we can skip at firebase SDK by click Next button again we can skip the step if we don't have any ads in the Google Play Store for iOS back to the general tab there click a tape button into cos button fill the required fields in the form as list then click register app button next download the Google surface info Paley's then copy to the root of a unique for project folder click Next button click Next button again click Next button again we can skip this step if you don't have any ionic F in the Apple or iTunes Connect now we have ionic FCM Android and I only can see em for iOS step number 3 at ionic for Cordova native FCM plugin we will use the latest Google firebase code messaging Cordoba push plug-in that also available as an ionic module to install using for Cordova native firebase machines plug-in type this command to install a unique native FCM module type this comment next open and edit is ROC Abe F module TS then add this import of ionic native of CM and GX at the FCM module to ng module providers next opening edit is our C AB AB component TS then add these imports of MCM ionic native FCM Angie eggs and rotor angular rotor in Jake water module to the constructor it's at platform ready I'll initialize a function and the function to get FCM token then print also browse the console have this function to rephrase the FCM token help these functions to receive a push notification from firebase Cloud messaging FCM this example of receiving a push notification from FCM will redirect to the other page with parms of data for that next we have to add a new page by type this command next modify is a Lucy a high-protein Model Ts then and parameters to the second page module next open and edit is RC yep second second page TS then add this import of activated world angular rotor inject the activated worlds module to the constructor add a variable for whole data from rotor parameters hell this line to get data for the rotor parameters makes opening edit is RCF second second page HTML then replace all HTML tags with this simple page that show the simple text if you plan to send push notification from the group of the lot of the topic of this lines is that platform ready in the app component es to unsubscribe from the topic of this line step number four run entails sending in a recipe push notification before running to Android devices make sure you have connected your device to your computer next run the IOT for app to the Android device by type this command after the app running on device check the console form the Google Chrome by type this address then choose the inspect link suited to the browser inspector just change to the console tab and you will see the registered FCM token makes open the post mint application from your computer change the method to pause and add this address on the he doors at this key content-type with fellow application Jason and all four decisions with failure key your firebase Cloud messaging epic a next adjacent data to the raw body and you will see the notification will direct to your second page for iOS with this ionic 4 app first open the platform iOS my app XE workspace using Xcode click my amp and the cycling team you need your iPod a flopper cones that can support the presented by caption capability we are not showing the demo of iOS because you don't have Apple Developer enrollment that it's the example of receiving push notification using ionic 4 and firebase code messaging FCM you can get the full article and source code link in the description below if you thing this tutorial is useful please like share comment and subscribe to this channel to give me more power to create more ionic for tutorials thank you see you later

Channel: Djamware Tutorial

Views: 11,807

Keywords: ionic, ionic 4, angular, push, notification, firebase, cloud, messaging, fcm

Id: m7jRaRMhxKY

Length: 23min 3sec (1383 seconds)

Published: Mon Dec 30 2019