Firebase Push notifications in Ionic 4
Tags: ionic, firebase, cloud, notifications
Published: 2019-09-24 09:32:51

<main role="main"><article class=" u-minHeight100vhOffset65 u-overflowHidden postArticle postArticle--full is-supplementalPostContentLoaded is-withAccentColors" lang="en"><div class="postArticle-content js-postField js-notesSource editable" id="editor_6" g_editable="true" role="textbox" contenteditable="true" data-default-value="Title
Tell your story…" spellcheck="false"><section name="bbab" class="section section--body section--first section--last"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><p name="1f0b" class="graf graf--p graf-after--figure">In this post, we’ll learn how to setup Push notification in Ionic 4 app using Firebase. We’ll send notification using Firebase console and receive them in the app. We will also learn how to handle push notifications in your Ionic 4 apps. Because all this can get reallllly long, I’ll limit the discussion to Android apps alone. I will post another blog for push in iOS apps in Ionic 4.</p><blockquote name="5b1b" class="graf graf--blockquote graf-after--p"><strong class="markup--strong markup--blockquote-strong">Complete code for this blog can be found totally FREE at </strong><a href="https://github.com/enappd/ionic-4-push"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--blockquote-strong">Github</strong></a></blockquote><figure tabindex="0" contenteditable="false" name="8c1d" class="graf graf--figure graf-after--blockquote"><div class="aspectRatioPlaceholder is-locked" style="max-width: 432px; max-height: 288px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 66.7%;"></div><img class="graf-image" data-image-id="1*B1hXvcHEOESjv5Lxgg56vw.gif" data-width="432" data-height="288" src="https://cdn-images-1.medium.com/max/800/1*B1hXvcHEOESjv5Lxgg56vw.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">No no… not the push we are talking about&nbsp;😐</figcaption></figure><h3 name="08a8" class="graf graf--h3 graf-after--figure is-selected">What are Push Notifications</h3><p name="6af9" class="graf graf--p graf-after--h3">Ok, I’ll try to define it in my own language. How do you know when you get a new message on Whatsapp, Facebook or Twitter, if the app is closed? Yes, those small messages that pop down from the top of the screen, showing new messages, updates or news are called Push notifications (or simply Push)</p><figure tabindex="0" contenteditable="false" name="bd34" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 600px; max-height: 600px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 100%;"></div><img class="graf-image" data-image-id="1*9_TQhgUm16ISGuqQkAcoSQ.gif" data-width="600" data-height="600" src="https://cdn-images-1.medium.com/max/800/1*9_TQhgUm16ISGuqQkAcoSQ.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Yes, those&nbsp;…… are push notifications</figcaption></figure><p name="05ce" class="graf graf--p graf-after--figure">One might wonder why to integrate Push notifications in an app. Let me tell you, push notifications is the <strong class="markup--strong markup--p-strong">single biggest feature </strong>to keep your users engaged with your app. People are obsessed with notifications. People keep checking their phones regularly so they don’t miss any notification. If your app sends regular (and interesting) push, your users will be happy, and you’ll see much less app uninstalls than you’ll see without push.</p><h3 name="ea5f" class="graf graf--h3 graf-after--p">What is Ionic&nbsp;4?</h3><p name="eaae" class="graf graf--p graf-after--h3">You probably already know about Ionic, but I’m putting it here just for the sake of beginners. <strong class="markup--strong markup--p-strong">Ionic</strong> is a complete open-source SDK for hybrid mobile app development created by <a href="https://medium.com/u/a76fa51de1ba"  data-anchor-type="2" data-user-id="a76fa51de1ba" data-action-value="a76fa51de1ba" data-action="show-user-card" data-action-type="hover" class="markup--user markup--p-user" target="_blank">Max Lynch</a>, <a href="https://medium.com/u/14b1be5c1354"  data-anchor-type="2" data-user-id="14b1be5c1354" data-action-value="14b1be5c1354" data-action="show-user-card" data-action-type="hover" class="markup--user markup--p-user" target="_blank">Ben Sperry</a> and Adam Bradley of Drifty Co. in 2013. Ionic provides tools and services for developing hybrid mobile apps using Web technologies like CSS, HTML5, and Sass. Apps can be built with these Web technologies and then distributed through native app stores to be installed on devices by leveraging Cordova.</p><p name="de54" class="graf graf--p graf-after--p">So, in other words&#8202;—&#8202;If you create Native apps in Android, you code in Java. If you create Native apps in iOS, you code in Obj-C or Swift. Both of these are powerful but complex languages. <strong class="markup--strong markup--p-strong">With Cordova (and Ionic) you can write a single piece of code for your app that can run on both iOS and Android </strong>(and windows!), that too with the simplicity of HTML, CSS, and JS.</p><h3 name="e26c" class="graf graf--h3 graf-after--p">Structure</h3><p name="50b1" class="graf graf--p graf-after--h3">I will go ahead in step-by-step fashion so you can follow easily.</p><ol class="postList"><li name="37f5" class="graf graf--li graf-after--p">Create a Firebase project and find Push options</li><li name="9cef" class="graf graf--li graf-after--li">Create a basic Ionic 4 app</li><li name="9138" class="graf graf--li graf-after--li">Connect your Ionic 4 app with Firebase and install Push plugin</li><li name="dec2" class="graf graf--li graf-after--li">Build the app on Android</li><li name="6d67" class="graf graf--li graf-after--li">Send notifications from Firebase console</li><li name="b444" class="graf graf--li graf-after--li">Receive different type of notifications in app</li><li name="aa1b" class="graf graf--li graf-after--li">Handle Push notifications in your app</li></ol><h3 name="e69c" class="graf graf--h3 graf-after--li">1. Create a Firebase project and find Push&nbsp;options</h3><p name="be22" class="graf graf--p graf-after--h3">Go to <a href="https://console.firebase.google.com/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Firebase</a> and create your first project (or use an existing one). Your console should look like this</p><figure tabindex="0" contenteditable="false" name="f144" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 312px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 44.6%;"></div><img class="graf-image" data-image-id="1*Q1tzpM83Uq66TNZ9E28nYA.png" data-width="800" data-height="357" src="https://cdn-images-1.medium.com/max/800/1*Q1tzpM83Uq66TNZ9E28nYA.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Your Firebase projects all in one&nbsp;place</figcaption></figure><p name="0358" class="graf graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">Note</strong>&#8202;—&#8202;It’s really easy to create a Firebase project, but if you still face any issue, follow step 1–4 of <a href="https://enappd.com/blog/how-to-integrate-firebase-in-ionic-4-apps/23/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">this blog</a></p><p name="8711" class="graf graf--p graf-after--p">Click on your project and you’ll enter the project’s dashboard. Look for <strong class="markup--strong markup--p-strong">Cloud Messaging</strong> tab. This is where the magic will happen&nbsp;!</p><figure tabindex="0" contenteditable="false" name="b5d9" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 387px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 55.300000000000004%;"></div><img class="graf-image" data-image-id="1*BBLOAdiHBI_PngzQdVS-BQ.png" data-width="1388" data-height="768" src="https://cdn-images-1.medium.com/max/800/1*BBLOAdiHBI_PngzQdVS-BQ.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Cloud messaging section of Firebase console&#8202;—&#8202;You can send push notifications from&nbsp;here</figcaption></figure><h4 name="9722" class="graf graf--h4 graf-after--figure">Push Notifications Settings</h4><p name="0c48" class="graf graf--p graf-after--h4">Firebase console also contains push notifications settings for web, android and iOS. Here you can find your <strong class="markup--strong markup--p-strong">sender_id, </strong>upload iOS push certificates etc. For setting up options, you’ll first have to create an Android app in Firebase console.</p><figure tabindex="0" contenteditable="false" name="0d4e" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 217px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 31%;"></div><img class="graf-image" data-image-id="1*kZaRFHlVlWW03I_2XC6F5g.png" data-width="1389" data-height="430" src="https://cdn-images-1.medium.com/max/800/1*kZaRFHlVlWW03I_2XC6F5g.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Add a new Android app in&nbsp;Firebase</figcaption></figure><p name="46d8" class="graf graf--p graf-after--figure">During the process, it will ask you to enter app’s <strong class="markup--strong markup--p-strong">package name</strong> and provide <strong class="markup--strong markup--p-strong">google-services.json. </strong>Make sure you keep the package name same as what you are setting in <code class="markup--code markup--p-code">config.xml</code> of your app. (Ionic 4 default package name is io.ionic.starter, don’t use the default package name)</p><figure tabindex="0" contenteditable="false" name="ac2a" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 350px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 50%;"></div><img class="graf-image" data-image-id="1*rtd51fTn_frvjGxUEkhiow.png" data-width="1390" data-height="695" src="https://cdn-images-1.medium.com/max/800/1*rtd51fTn_frvjGxUEkhiow.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Download google-services.json</figcaption></figure><h3 name="c000" class="graf graf--h3 graf-after--figure">2. Create a basic Ionic 4&nbsp;app</h3><p name="f682" class="graf graf--p graf-after--h3">Creating a basic Ionic 4 app is very easy. Assuming you have all basic requirements installed in your system, run</p><pre name="edac" class="graf graf--pre graf-after--p">$ ionic start MyApp blank</pre><p name="2fb6" class="graf graf--p graf-after--pre">This creates your app with title<code class="markup--code markup--p-code">MyApp</code> and blank template.</p><blockquote name="166d" class="graf graf--blockquote graf-after--p">For more details on how to create a basic Ionic 4 app, refer to my blog <a href="https://enappd.com/blog/how-to-create-an-ionic-4-app-for-beginners/13"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank">How to create an Ionic 4 app</a></blockquote><p name="5853" class="graf graf--p graf-after--blockquote">With slight modifications, your homepage will look like this.</p><figure tabindex="0" contenteditable="false" name="3f24" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 376px; max-height: 669px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 177.89999999999998%;"></div><img class="graf-image" data-image-id="1*n6eBfaKEboE4l33oRZKnAg.png" data-width="376" data-height="669" src="https://cdn-images-1.medium.com/max/800/1*n6eBfaKEboE4l33oRZKnAg.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Slight modification in the homepage to send and receive&nbsp;Push</figcaption></figure><p name="cf5c" class="graf graf--p graf-after--figure">The file structure looks something like this, just for an idea</p><figure tabindex="0" contenteditable="false" name="5036" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 336px; max-height: 559px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 166.4%;"></div><img class="graf-image" data-image-id="1*oNy0Sx2x2FrhyFHn0Ut9zQ.png" data-width="336" data-height="559" src="https://cdn-images-1.medium.com/max/800/1*oNy0Sx2x2FrhyFHn0Ut9zQ.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">File structure for Ionic 4 Push sample&nbsp;app</figcaption></figure><h3 name="fa45" class="graf graf--h3 graf-after--figure">3. Install Push plugin in your&nbsp;app</h3><p name="b30b" class="graf graf--p graf-after--h3">We will implement Push using Ionic Native FCM plugin. To install this plugin, run</p><pre name="5181" class="graf graf--pre graf-after--p">$ ionic cordova plugin add cordova-plugin-fcm-with-dependecy-updated<br>$ npm install @ionic-native/fcm</pre><p name="9afc" class="graf graf--p graf-after--pre">This will install the plugin. Import the plugin in <code class="markup--code markup--p-code">app.module.ts</code></p><figure tabindex="0" contenteditable="false" name="242d" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 338px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 48.3%;"></div><img class="graf-image" data-image-id="1*vIdA5wO4UnTuchAMjwTc5w.png" data-width="849" data-height="410" src="https://cdn-images-1.medium.com/max/800/1*vIdA5wO4UnTuchAMjwTc5w.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Import push plugin in app.moudle.ts</figcaption></figure><p name="0be0" class="graf graf--p graf-after--figure">Also, import the plugin in your <code class="markup--code markup--p-code">home.page.ts</code> where we’ll implement certain actions. <code class="markup--code markup--p-code">home.page.ts</code> code will look like following</p><figure tabindex="0" contenteditable="false" name="f498" class="graf graf--figure graf--iframe graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/2ac354d3ff47d6fa7e2d2dd1b9133c3c.js %}</div></div></figure><p name="3a89" class="graf graf--p graf-after--figure">Note that we are calling the push plugin methods after platform is ready. This is a good practice when you are initializing the push plugin right after the app starts.</p><p name="2843" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">IMPORTANT</strong>&#8202;—&#8202;Place the <strong class="markup--strong markup--p-strong">google-services.json </strong>file you downloaded from Firebase in root of your project. This is extremely important, as this is how the app and Firebase recognize each other. Without this, the app will not build on device.</p><p name="af56" class="graf graf--p graf-after--p">More plugin details can be found in its <a href="https://github.com/andrehtissot/cordova-plugin-fcm-with-dependecy-updated"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Github repository</a></p><h3 name="2b2b" class="graf graf--h3 graf-after--p">4. Build the app on&nbsp;Android</h3><p name="5492" class="graf graf--p graf-after--h3">If you have carried out the above steps correctly, Android build should be a breeze.</p><p name="6245" class="graf graf--p graf-after--p">Run following command to create Android platform</p><pre name="9f9d" class="graf graf--pre graf-after--p">$ ionic cordova platform add android</pre><p name="f883" class="graf graf--p graf-after--pre">Once platform is added, run the app on device (Make sure you have a device attached to the system. Push notifications might not work on simulator)</p><pre name="8b73" class="graf graf--pre graf-after--p">$ ionic cordova run android</pre><p name="7820" class="graf graf--p graf-after--pre">Once your app is up and running on the device, we’ll send notifications from Firebase console.</p><h3 name="35f5" class="graf graf--h3 graf-after--p">5. Send notifications from Firebase&nbsp;console</h3><p name="06dc" class="graf graf--p graf-after--h3">Now that the app is ready to receive Push notification, let’s see how to send them.</p><p name="dcfd" class="graf graf--p graf-after--p">Head to your Firebase console → Cloud messaging section → Get started</p><p name="c89a" class="graf graf--p graf-after--p">You’ll see a form with which you can send a push notification</p><figure tabindex="0" contenteditable="false" name="96e5" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 364px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 52%;"></div><img class="graf-image" data-image-id="1*V0jYd4YD1zbDpyI2XzF3tQ.png" data-width="1389" data-height="722" src="https://cdn-images-1.medium.com/max/800/1*V0jYd4YD1zbDpyI2XzF3tQ.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Firebase cloud messaging dahboard</figcaption></figure><p name="ed2d" class="graf graf--p graf-after--figure">I won’t go into details of all the options available in the dashboard. Let’s setup the basics</p><ul class="postList"><li name="f35e" class="graf graf--li graf-after--p">Enter a Notification title</li><li name="55b7" class="graf graf--li graf-after--li">Enter a Notification text</li></ul><p name="d22a" class="graf graf--p graf-after--li">Leave all the options as is, for now. Now hit <strong class="markup--strong markup--p-strong">Review → Publish</strong> the notification. Make sure your app is closed at this point in the device. Your device will receive a notification within a few seconds</p><figure tabindex="0" contenteditable="false" name="e956" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 350px; max-height: 622px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 177.7%;"></div><img class="graf-image" data-image-id="1*zCIO3YAWPEH7ql4wEBIm7g.png" data-width="350" data-height="622" src="https://cdn-images-1.medium.com/max/800/1*zCIO3YAWPEH7ql4wEBIm7g.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Push received in the&nbsp;app</figcaption></figure><p name="3fa0" class="graf graf--p graf-after--figure">Notice there is no icon for the push because we haven’t defined any icon yet. The notification is showing the default icon of ionic apps.</p><p name="e530" class="graf graf--p graf-after--p">Congratulations! You just sent your first Push in Ionic 4 🎉 🎉</p><h3 name="527e" class="graf graf--h3 graf-after--p">6. Receive different types of Push in Ionic&nbsp;apps</h3><p name="3f67" class="graf graf--p graf-after--h3">With FCM, you can send two types of messages to clients:</p><ul class="postList"><li name="8fd0" class="graf graf--li graf-after--p"><strong class="markup--strong markup--li-strong">Notification Messages</strong>, sometimes thought of as “display messages.” These are handled by the FCM SDK automatically. This is what we just sent.</li><li name="620d" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">Data Messages</strong>, which are handled by the client app. You can send custom data with these messages, but these require custom back-end (or Firebase cloud functions) to be sent</li></ul><p name="f852" class="graf graf--p graf-after--li">Notification messages contain a predefined set of user-visible keys. Data messages, by contrast, contain only your user-defined custom key-value pairs. Notification messages can contain an optional data payload. Maximum payload for both message types is 4KB, except when sending messages from the Firebase console, which enforces a 1024 character limit.</p><h4 name="f3e5" class="graf graf--h4 graf-after--p">Sending and Receiving a Notification message</h4><p name="621e" class="graf graf--p graf-after--h4">This is what we just did in the above section&#8202;—&#8202;the first notification we sent. Let’s see how it looks in the browser console.</p><figure tabindex="0" contenteditable="false" name="b96d" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 212px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 30.3%;"></div><img class="graf-image" data-image-id="1*wVMMWsicbFUPa-DIZJphuA.png" data-width="756" data-height="229" src="https://cdn-images-1.medium.com/max/800/1*wVMMWsicbFUPa-DIZJphuA.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Data sent along with Notification message</figcaption></figure><p name="8468" class="graf graf--p graf-after--figure">Note, you don’t have any custom data fields here that you can handle</p><h4 name="20c4" class="graf graf--h4 graf-after--p">Sending and Receiving a Data&nbsp;message</h4><p name="5d2c" class="graf graf--p graf-after--h4">To send a data message, head over to <strong class="markup--strong markup--p-strong">Additional Options</strong> section in Firebase cloud messaging form</p><figure tabindex="0" contenteditable="false" name="48ff" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 386px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 55.2%;"></div><img class="graf-image" data-image-id="1*tMREc9TfPfReLi-JxfCnkw.png" data-width="1388" data-height="766" src="https://cdn-images-1.medium.com/max/800/1*tMREc9TfPfReLi-JxfCnkw.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Add additional field to be sent as Data&nbsp;message</figcaption></figure><p name="6a24" class="graf graf--p graf-after--figure">When the notification is received, the data appears as follows</p><figure tabindex="0" contenteditable="false" name="c815" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 563px; max-height: 192px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 34.1%;"></div><img class="graf-image" data-image-id="1*LXKvgDlN7lCaRDWsxj1-UQ.png" data-width="563" data-height="192" src="https://cdn-images-1.medium.com/max/800/1*LXKvgDlN7lCaRDWsxj1-UQ.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Notice the new data fields in the&nbsp;message</figcaption></figure><p name="7f2c" class="graf graf--p graf-after--figure">These new data fields can be used by the app for any purpose. Currently, all these fields come as <strong class="markup--strong markup--p-strong">String</strong> field only, so be careful</p><h3 name="5176" class="graf graf--h3 graf-after--p">7. Handle Push notifications in your&nbsp;app</h3><p name="fd45" class="graf graf--p graf-after--h3">Push notification can be received in three states in your Ionic app</p><ul class="postList"><li name="66c4" class="graf graf--li graf-after--p">When app is in the foreground (open and visible)</li><li name="f227" class="graf graf--li graf-after--li">When app is in the background (open but minimized)</li><li name="c223" class="graf graf--li graf-after--li">When app is closed (killed)</li></ul><p name="b26c" class="graf graf--p graf-after--li">As you know from daily experience, notifications are required to work in all 3 cases. So we handle them a little differently for each case</p><h4 name="58c7" class="graf graf--h4 graf-after--p">7a. When app is in foreground</h4><p name="9a5a" class="graf graf--p graf-after--h4">The plugin we are using, allows foreground notifications to be received silently by default. That means, you do get the data sent by the push, but there is no notification shown in the app.</p><p name="3b13" class="graf graf--p graf-after--p">If you want to show a notification in such case, you can show an alert or customized modal message to the user, like what Tinder shows when you get a match.</p><figure tabindex="0" contenteditable="false" name="bfcc" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 480px; max-height: 270px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 56.3%;"></div><img class="graf-image" data-image-id="1*BEINKCafHPubDeIl8XooQA.gif" data-width="480" data-height="270" src="https://cdn-images-1.medium.com/max/800/1*BEINKCafHPubDeIl8XooQA.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">It’s a match&nbsp;…. and it’s a notification&nbsp;!!</figcaption></figure><h4 name="ee28" class="graf graf--h4 graf-after--figure">7b. When app is in background</h4><p name="5e59" class="graf graf--p graf-after--h4">When the app is in background, your phone shows a standard notification popping from the top (for most devices&nbsp;! ). When you tap the notification, you won’t receive any data 😐</p><p name="50b0" class="graf graf--p graf-after--p">Turns out Firebase does not support all the options of Data notifications currently. To receive a callback in the app for this type of notification, you need a key-value pair <code class="markup--code markup--p-code">click-action: FCM_PLUGIN_ACTIVITY</code>&nbsp;. But this is not possible to view Firebase console.</p><p name="6a87" class="graf graf--p graf-after--p">Ideally, a notification comprises of a lot of data. Following JSON shows most of it. If you are using a custom back-end, you can send all of this data in the notification, and your app will then receive the callback with data.</p><figure tabindex="0" contenteditable="false" name="eb74" class="graf graf--figure graf--iframe graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/a9ecf213aed10e6c139bdb7760c4793a.js %}</div></div></figure><p name="949c" class="graf graf--p graf-after--figure">You can find more details on push notification content syntax in <a href="https://firebase.google.com/docs/cloud-messaging/http-server-ref#send-downstream"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Firebase’s official documentation</a>.</p><p name="fb2d" class="graf graf--p graf-after--p">Don’t worry if you don’t have custom back-end for now. You can use <a href="https://cordova-plugin-fcm.appspot.com/"  class="markup--anchor markup--p-anchor" rel="noopener" target="_blank">https://cordova-plugin-fcm.appspot.com/</a> to send notifications for testing.</p><figure tabindex="0" contenteditable="false" name="ca0f" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 448px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 64%;"></div><img class="graf-image" data-image-id="1*oNzXLE-nQJu_zH39IgPvMw.png" data-width="1158" data-height="741" src="https://cdn-images-1.medium.com/max/800/1*oNzXLE-nQJu_zH39IgPvMw.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Send test push from <a href="https://cordova-plugin-fcm.appspot.com/"  class="markup--anchor markup--figure-anchor" rel="noopener"    target="_blank">cordova-plugin-fcm.appspot.com</a></figcaption></figure><p name="93bf" class="graf graf--p graf-after--figure">Get the API key from Firebase console → Project Settings → Cloud Messaging → Legacy server Key</p><p name="79fc" class="graf graf--p graf-after--p">Now when you receive the notification in background, and tap the notification, you receive the data inside the app like following</p><figure tabindex="0" contenteditable="false" name="3b1f" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 225px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 32.2%;"></div><img class="graf-image" data-image-id="1*gyNseSpWMXw45JSgA3LkUg.png" data-width="764" data-height="246" src="https://cdn-images-1.medium.com/max/800/1*gyNseSpWMXw45JSgA3LkUg.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Data receive in Background push</figcaption></figure><h4 name="c985" class="graf graf--h4 graf-after--figure">7c. When app is&nbsp;closed</h4><p name="ecbc" class="graf graf--p graf-after--h4">When the app is closed, your phone shows a standard notification popping from the top (for most devices&nbsp;! ). If you have sent the notification from Firebase, again, the data won’t show up in the callback.</p><p name="c6b8" class="graf graf--p graf-after--p">But if you are sending the notification from <a href="https://cordova-plugin-fcm.appspot.com/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">cordova-plugin-fcm.appspot.com</a>, or with your custom back-end, you receive the data in the same format as above. Now you can use the data to perform any action inside the app.</p><p name="543e" class="graf graf--p graf-after--p">You are probably wondering how does our push notification list look like now. Since we are not saving anything in local storage, it will only record the current session’s push notification. The list looks like this after a few notifications.</p><figure tabindex="0" contenteditable="false" name="6a12" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 350px; max-height: 622px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 177.7%;"></div><img class="graf-image" data-image-id="1*9L7EB8ZEfurdLTQCYNs9GA.png" data-width="350" data-height="622" src="https://cdn-images-1.medium.com/max/800/1*9L7EB8ZEfurdLTQCYNs9GA.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">List of push notifications received in the&nbsp;app</figcaption></figure><h3 name="99ee" class="graf graf--h3 graf-after--figure">Conclusion</h3><p name="48c6" class="graf graf--p graf-after--h3">In this post, we learned how to setup Firebase push notifications in an Ionic 4 app, how to send notifications, how to receive different types of notifications and how to handle them in the app. We learned what is the syntax for push notifications is if you want to send it from a custom back-end. We also created a small Ionic 4 app with provisions to show the received push notifications as a list.</p><blockquote name="9d13" class="graf graf--blockquote graf-after--p"><strong class="markup--strong markup--blockquote-strong">Complete code for this blog can be found totally FREE at </strong><a href="https://github.com/enappd/ionic-4-push"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--blockquote-strong">Github</strong></a></blockquote><p name="8598" class="graf graf--p graf-after--blockquote">Stay tuned for more Ionic blogs!</p><h3 name="ec59" class="graf graf--h3 graf-after--p">Next Steps</h3><p name="178a" class="graf graf--p graf-after--h3">Now that you have learned the implementation of Firebase push notifications in Ionic 4, you can also try</p><ul class="postList"><li name="9f48" class="graf graf--li graf-after--p"><a href="https://enappd.com/blog/ionic-4-paypal-payment-integration-for-apps-and-pwa/16"  class="markup--anchor markup--li-anchor" rel="nofollow noopener noopener noopener noopener"    target="_blank">Ionic 4 PayPal payment integration&#8202;—&#8202;for Apps and PWA</a></li><li name="aa95" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/ionic-4-stripe-payment-integration-with-firebase-for-apps-and-pwa/17"  class="markup--anchor markup--li-anchor" rel="nofollow noopener noopener noopener noopener"    target="_blank">Ionic 4 Stripe payment integration&#8202;—&#8202;for Apps and PWA</a></li><li name="fc67" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/how-to-integrate-apple-pay-in-ionic-4-apps/21"  class="markup--anchor markup--li-anchor" rel="nofollow noopener noopener noopener noopener"    target="_blank">Ionic 4 Apple Pay integration</a></li><li name="b1fc" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/twitter-login-in-ionic-4-apps-using-firebase/24"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Twitter login in Ionic 4 with Firebase</a></li><li name="57fe" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/facebook-login-in-ionic-4-apps-using-firebase/25"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Facebook login in Ionic 4 with Firebase</a></li><li name="97f4" class="graf graf--li graf-after--li"><a href="https://medium.com/enappd/using-geolocation-and-beacon-plugins-in-ionic-4-754b41304007"  class="markup--anchor markup--li-anchor"    target="_blank">Geolocation</a> in Ionic 4</li><li name="34a6" class="graf graf--li graf-after--li"><a href="https://medium.com/enappd/qr-code-scanning-and-optical-character-recognition-ocr-in-ionic-4-95fd46be91dd"  class="markup--anchor markup--li-anchor"    target="_blank">QR Code and scanners</a> in Ionic 4 and</li><li name="de81" class="graf graf--li graf-after--li"><a href="https://medium.com/enappd/how-to-translate-in-ionic-4-globalization-internationalization-and-localization-31ec5807a8bc"  class="markup--anchor markup--li-anchor"    target="_blank">Translations in Ionic 4</a></li></ul><p name="2930" class="graf graf--p graf-after--li">If you need a base to start your next Ionic 4 app, you can make your next awesome app using <a href="https://store.enappd.com/product/ionic-4-full-app/"  class="markup--anchor markup--p-anchor" rel="noopener nofollow noopener noopener nofollow noopener noopener nofollow noopener noopener noopener noopener"    target="_blank">Ionic 4 Full App</a></p><figure tabindex="0" contenteditable="false" name="89dc" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 442px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 63.2%;"></div><img class="graf-image" data-image-id="1*2BzL8TesnBHuazHr3VA4SQ.jpeg" data-width="760" data-height="480" src="https://cdn-images-1.medium.com/max/800/1*2BzL8TesnBHuazHr3VA4SQ.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Use Ionic 4 Full app for your next awesome&nbsp;app</figcaption></figure><h3 name="1b1c" class="graf graf--h3 graf-after--figure">References</h3><ul class="postList"><li name="bb4a" class="graf graf--li graf-after--h3"><a href="https://ionicframework.com/docs"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener nofollow noopener noopener nofollow noopener noopener noopener noopener"    target="_blank">Ionic documentation</a></li></ul><p name="8641" class="graf graf--p graf-after--li graf--trailing">This blog was originally published on <a href="http://enappd.com"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">enappd.com</a></p></div></div></section></div></article></main>