Implement Local Notifications in Ionic 5 with Capacitor
Tags: ionic, notifications, capacitor, angular
Published: 2020-04-14 02:36:24

<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="a833" 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"><blockquote name="947a" class="graf graf--blockquote graf-after--figure"><strong class="markup--strong markup--blockquote-strong">For an Ionic 4 Cordova implementation of Local Notifications, check out </strong><a href="https://enappd.com/blog/local-notifications-in-ionic-4/69"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--blockquote-strong">this blog</strong></a></blockquote><p name="7cea" class="graf graf--p graf-after--blockquote">Ionic 5 is here&nbsp;! And so is Capacitor 2.0 (beta). In this post you are going to learn how to implement local notifications in Ionic 5 app with Capacitor. We will see a variety of notification types that can be generated using Local Notifications. We will use a simple Cordova plugin, that works for Capacitor as well, and test the functionality on an Android and iOS app.</p><blockquote name="cdeb" class="graf graf--blockquote graf-after--p"><strong class="markup--strong markup--blockquote-strong">Complete code of this blog post can be found at this github repo&#8202;—</strong><a href="https://github.com/enappd/ionic-5-capacitor-local-notification"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--blockquote-strong">&#8202;ionic-5-local-notifications</strong></a></blockquote><h3 name="c1d1" class="graf graf--h3 graf-after--blockquote">What is Local Notification&nbsp;?</h3><p name="7689" class="graf graf--p graf-after--h3">We have all heard of notifications, and push notifications mostly. These are the notifications app servers send to apps for regular reminders. For example, a chat app server sends notification to user to update of a latest message. These notifications are received in closed app, minimized app or open app.</p><figure tabindex="0" contenteditable="false" name="6f7b" 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)">`Push notifications&nbsp;….. necessary evil</figcaption></figure><p name="e7cb" class="graf graf--p graf-after--figure">Push notifications cause burden on Server, as well as, cost you money if you are using a service like <a href="https://onesignal.com"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">OneSignal</a> etc. Hence, for each action or reminder, you might not want the server to send push notifications to all users. Especially if you have millions of users.</p><p name="e0a1" class="graf graf--p graf-after--p">This is where <strong class="markup--strong markup--p-strong">Local Notifications</strong> come in handy. These look and feel exactly like push notifications, but are not sent from server. Instead, they are generated locally on your device. E.g. If you want an app to remind you of your tasks at a certain time of the day, it makes sense that the app does so using the in-built clock or timer in the device. The app then sends you Local Notification, which looks same as a push.</p><blockquote name="4f08" class="graf graf--blockquote graf-after--p">You don’t feel the difference between Local and Push notification, and the server saves a lot of overhead.</blockquote><p name="c7b8" class="graf graf--p graf-after--blockquote">In this post, we will learn how to implement Local notifications features in Ionic 5apps. First, let’s see what Ionic 5 is all about.</p><h3 name="984b" class="graf graf--h3 graf-after--p">What is&nbsp;Ionic?</h3><p name="56d0" 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?source=post_page---------------------------"  class="markup--anchor markup--p-anchor"    target="_blank">Max Lynch</a>, <a href="https://medium.com/u/14b1be5c1354?source=post_page---------------------------"  class="markup--anchor markup--p-anchor"    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="010c" 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><p name="2384" class="graf graf--p graf-after--p">Ionic’s latest version&#8202;—&#8202;Ionic 5, was released in March 2020, and is what we are using for this blog post.</p><h3 name="8e89" class="graf graf--h3 graf-after--p">Capacitor&#8202;—&#8202;How is it different from Cordova&nbsp;?</h3><p name="de4c" class="graf graf--p graf-after--h3">Cordova helps build Ionic web app into a mobile device installable app. But there are some limitations of Cordova, which Capacitor tries to overcome with a new App workflow.</p><p name="a042" class="graf graf--p graf-after--p">Here are the differences between Cordova and Capacitor</p><ol class="postList"><li name="6d11" class="graf graf--li graf-after--p">Capacitor considers each platform project a <em class="markup--em markup--li-em">source asset</em> instead of a <em class="markup--em markup--li-em">build time asset</em>. That means, Capacitor wants you to keep the platform source code in the repository, unlike Cordova which always assumes that you will generate the platform code on build time</li><li name="0b58" class="graf graf--li graf-after--li">Because of the above, Capacitor does not use <code class="markup--code markup--li-code">config.xml</code> or a similar custom configuration for platform settings. Instead, configuration changes are made by editing <code class="markup--code markup--li-code">AndroidManifest.xml</code> for Android and <code class="markup--code markup--li-code">Info.plist</code> for Xcode</li><li name="abb7" class="graf graf--li graf-after--li">Capacitor does not “run on device” or emulate through the command line. Instead, such operations occur through the platform-specific IDE. So you cannot run an Ionic-capacitor app using a command like <code class="markup--code markup--li-code">ionic run ios</code>&nbsp;. You will have to run iOS apps using Xcode, and Android apps using Android studio</li><li name="dfe5" class="graf graf--li graf-after--li">Since platform code is not a <em class="markup--em markup--li-em">source asset, </em>you can directly change the native code using Xcode or Android Studio. This give more flexibility to developers</li></ol><p name="dd6d" class="graf graf--p graf-after--li">In essence, Capacitor is like a fresh, more flexible version of Corodva.</p><h3 name="d2ca" class="graf graf--h3 graf-after--p">Plugins</h3><p name="d50d" class="graf graf--p graf-after--h3">Cordova and <a href="https://ionicframework.com/docs/native"  class="markup--anchor markup--p-anchor" rel="noopener nofollow noopener"    target="_blank">Ionic Native</a> plugins can be used in Capacitor environment. However, there are certain Cordova plugins which are known to be <a href="https://capacitor.ionicframework.com/docs/cordova/known-incompatible-plugins/"  class="markup--anchor markup--p-anchor" rel="noopener nofollow noopener"    target="_blank">incompatible with Capacitor.</a> For Local Notification functionality, we’ll use the <a href="https://github.com/katzer/cordova-plugin-local-notifications"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">cordova-plugin-local-notifications</a>.</p><h3 name="2084" class="graf graf--h3 graf-after--p">Structure of the&nbsp;post</h3><p name="3e7c" 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="01f7" class="graf graf--li graf-after--p">Create a basic Ionic 5 Capacitor app</li><li name="216a" class="graf graf--li graf-after--li">Install Local Notification plugin and make imports</li><li name="ed2b" class="graf graf--li graf-after--li is-selected">Implement your first Local Notification, use data from notification</li><li name="1472" class="graf graf--li graf-after--li">Build your app on iOS and Android and test</li><li name="d8de" class="graf graf--li graf-after--li">Implement various types of Local Notifications</li></ol><p name="ff1c" class="graf graf--p graf-after--li">Let’s start with creating a simple Ionic 5 app</p><h3 name="2a95" class="graf graf--h3 graf-after--p">Step 1&#8202;—&#8202;Create a basic Ionic 5&nbsp;app</h3><p name="7cf9" class="graf graf--p graf-after--h3">To create a basic Ionic 5 Capacitor app, follow these steps</p><ul class="postList"><li name="9e47" class="graf graf--li graf-after--p">Make sure you have node installed in the system (I used V10.15.3 at the time of this blog post, but latest stable version is 12.x)</li><li name="622c" class="graf graf--li graf-after--li">Install <strong class="markup--strong markup--li-strong">ionic cli </strong>using <strong class="markup--strong markup--li-strong">npm</strong> (my Ionic CLI version is 5.3.0 and Ionic Framework is V5.0.5)</li><li name="9de3" class="graf graf--li graf-after--li">Create an Ionic app using <code class="markup--code markup--li-code">ionic start</code></li></ul><p name="edf3" class="graf graf--p graf-after--li">You can create a <code class="markup--code markup--p-code">blank</code> starter for the sake of this tutorial. On running <code class="markup--code markup--p-code">ionic start ionic-5-local-notifications blank —-capacitor</code>&nbsp;, node modules will be installed. Once the installation is done, run your app on browser using</p><pre name="e3ab" class="graf graf--pre graf-after--p">$ ionic serve</pre><p name="5c38" class="graf graf--p graf-after--pre">The app will launch on browser. You can go to <strong class="markup--strong markup--p-strong">Inspect → Device Mode</strong> to see the code in a mobile layout.</p><p name="41d3" class="graf graf--p graf-after--p">The <code class="markup--code markup--p-code">--capacitor</code> flag attaches Capacitor to your Ionic app automatically. If you forget to do it while creating the app, you can do it later by running</p><pre name="a1cb" class="graf graf--pre graf-after--p">$ ionic integrations enable capacitor</pre><p name="795a" class="graf graf--p graf-after--pre">You can create a basic layout for triggering Local Notifications. All the real action will happen when we build the app for device (iOS).</p><blockquote name="773c" class="graf graf--blockquote graf-after--p"><strong class="markup--strong markup--blockquote-strong">The layout here is taken from </strong><a href="https://store.enappd.com/product/ionic-full-app/"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--blockquote-strong">Ionic 5 Full App</strong></a><strong class="markup--strong markup--blockquote-strong"> from Enappd <em class="markup--em markup--blockquote-em">🙏</em></strong></blockquote><figure tabindex="0" contenteditable="false" name="e49f" class="graf graf--figure graf-after--blockquote is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 277px; max-height: 600px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 216.6%;"></div><img class="graf-image" data-image-id="1*E75ByHlGcKDn5ZUjM4z5Dw.png" data-width="277" data-height="600" src="https://cdn-images-1.medium.com/max/800/1*E75ByHlGcKDn5ZUjM4z5Dw.png"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="39d2" class="graf graf--p graf-after--figure">Next we’ll add the Local Notifications plugin to our app.</p><h3 name="d950" class="graf graf--h3 graf-after--p">Step 2&#8202;—&#8202;Install Local Notification plugin and make&nbsp;imports</h3><p name="5795" class="graf graf--p graf-after--h3">To implement Local Notifications you need to add <code class="markup--code markup--p-code">cordova-plugin-local-notifications</code> plugin to the app. Add the plugin using</p><pre name="ced3" class="graf graf--pre graf-after--p">$ ionic cordova plugin add cordova-plugin-local-notification <br>$ npm install @ionic-native/local-notifications</pre><p name="dbb0" class="graf graf--p graf-after--pre">This will install the plugin in your app. Next, import the plugin in <code class="markup--code markup--p-code">app.module.ts</code> and in the pages you want to use it.</p><pre name="a324" class="graf graf--pre graf-after--p">import { LocalNotifications} from '@ionic-native/local-notifications/ngx'</pre><p name="7dad" class="graf graf--p graf-after--pre">Also, include <code class="markup--code markup--p-code">LocalNotifications</code> in <code class="markup--code markup--p-code">@ngModule</code> <strong class="markup--strong markup--p-strong">providers</strong> list.</p><pre name="fdfc" class="graf graf--pre graf-after--p">@NgModule({<br>....,<br>providers: [<br>...,<br>LocalNotifications,<br>...],<br>})</pre><p name="a0d0" class="graf graf--p graf-after--pre">Now you are ready to implement Local notifications in your Ionic 5 app.</p><h3 name="86ab" class="graf graf--h3 graf-after--p">Step 3&#8202;—&#8202;Implement your first Local Notification</h3><p name="d507" class="graf graf--p graf-after--h3">Local Notification implementation is very easy once you import the plugin correctly. Head to your <code class="markup--code markup--p-code">home.page.ts</code> created with the app. Create a function to <code class="markup--code markup--p-code">schedule</code> your first local notification like this</p><figure tabindex="0" contenteditable="false" name="5d70" 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/0859dc099072318815f7891fc65a43bb.js %}</div></div></figure><p name="9490" class="graf graf--p graf-after--figure">Super easy, right&nbsp;? This will create a local notification and it will appear in your device’s status bar as an icon. You can check the full notification in your device’s notification tray.</p><figure tabindex="0" contenteditable="false" name="b5a0" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 352px; max-height: 640px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 181.8%;"></div><img class="graf-image" data-image-id="1*G5QHHU19lZ6qXYrhi8AklQ.gif" data-width="352" data-height="640" alt="Local notification in Ionic 5 app&#8202;—&#8202;Android implementation" src="https://cdn-images-1.medium.com/max/800/1*G5QHHU19lZ6qXYrhi8AklQ.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Local notification in Ionic 5 app&#8202;—&#8202;Android implementation</figcaption></figure><p name="13d6" class="graf graf--p graf-after--figure">Let’s dive deeper into the details of the notification object, and learn what all options are available</p><ul class="postList"><li name="64aa" class="graf graf--li graf-after--p"><strong class="markup--strong markup--li-strong">id</strong>&#8202;—&#8202;ID of the notifications</li><li name="ee72" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">title</strong>&#8202;—&#8202;Title of the notification, shown in larger font. If no <code class="markup--code markup--li-code">title</code> is provided, app’s name is shown as <code class="markup--code markup--li-code">title</code></li><li name="eff2" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">text</strong>&#8202;—&#8202;Message of the notification. Shown in smaller font. It can be of multiple lines as well. Can be an array of messages as well. We’ll see that in later section</li><li name="9cf2" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">sound</strong>&#8202;—&#8202;location of sound file to be played with notification</li><li name="7da0" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">data</strong>&#8202;—&#8202;additional data you can send along with notification in JSON format</li><li name="35aa" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">icon</strong>&#8202;—&#8202;location or URL of icon shown with the notification</li><li name="b6a7" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">silent</strong>&#8202;—&#8202;(boolean) whether notification should be silent or not</li><li name="2d8e" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">trigger</strong>&#8202;—&#8202;custom trigger time of notification, can be given in various formats. We’ll see this in later section</li><li name="efd1" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">attachments</strong>&#8202;—&#8202;Attached images to be sent with notification</li><li name="b867" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">progressBar</strong>&#8202;—&#8202;progress-bar options for Local notifications</li><li name="802b" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">group</strong>&#8202;—&#8202;define the group name to group similar notifications together</li><li name="c797" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">summary</strong>&#8202;—&#8202;summary of grouped notifications</li><li name="09e1" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">smallIcon</strong>&#8202;—&#8202;Small icon shown for group notifications or custom notifications</li><li name="6511" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">sticky</strong>&#8202;—&#8202;whether the notification should be sticky or dismissible</li><li name="eac3" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">autoClear</strong>&#8202;—&#8202;If yes, make the notification automatically dismissed when the user touches it (Android only)</li><li name="e099" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">lockscreen</strong>&#8202;—&#8202;If set to <code class="markup--code markup--li-code">true</code> the notification will be shown in its entirety on all lock-screens. If set to <code class="markup--code markup--li-code">false</code> it will not be revealed on a secure lock-screen. (Android only)</li><li name="f46c" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">channel</strong>&#8202;—&#8202;Specifies the channel the notification should be delivered on (Android only)</li><li name="c832" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">foreground</strong>&#8202;—&#8202;If the notification should show up on app’s foreground</li><li name="83ce" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">timeoutAfter</strong>&#8202;—&#8202;Specifies a duration in milliseconds after which this notification should be canceled, if it is not already canceled (Android only)</li><li name="5450" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">launch</strong>&#8202;—&#8202;Specifies whether a click on the notification causes the app to open in foreground</li><li name="d6bb" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">priority</strong>&#8202;—&#8202;Integers between -2 and 2, whereas -2 is minimum and 2 is maximum priority</li><li name="cdb0" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">led</strong>&#8202;—&#8202;to set LED options of the device. You can set <code class="markup--code markup--li-code">color</code>&nbsp;, <code class="markup--code markup--li-code">on</code> and <code class="markup--code markup--li-code">off</code> properties</li><li name="ed6b" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">vibrate&#8202;—&#8202;</strong>(boolean)&#8202;—&#8202;Whether notification should vibrate the device</li><li name="01f9" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">color</strong>&#8202;—&#8202;RGB value for the background color of the smallIcon (Android only)</li><li name="2ab3" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">badge</strong>&#8202;—&#8202;The number currently set as the badge of the app icon in Springboard (iOS) or at the right-hand side of the local notification (Android). Default: 0 (which means don’t show a number)</li></ul><p name="e4fb" class="graf graf--p graf-after--li">… and few more options. That’s a lot&nbsp;!!!</p><p name="3db4" class="graf graf--p graf-after--p">This is a really powerful and detailed plugin. You can make very good use of the plugin to supplement push notifications, and make your app interactive.</p><h3 name="1267" class="graf graf--h3 graf-after--p">Step 4&#8202;—&#8202;Build your app on Android and&nbsp;test</h3><p name="4c7f" 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="0252" class="graf graf--p graf-after--p">Run the following command to create Android platform</p><pre name="7d32" class="graf graf--pre graf-after--p">$ ionic cordova platform add android</pre><p name="3764" 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).</p><pre name="c987" class="graf graf--pre graf-after--p">$ ionic cordova run android</pre><p name="dd13" class="graf graf--p graf-after--pre">Once your app is up and running on the device, you can start testing all the functions. The GIF shown above is taken from a real Android device 😎</p><h3 name="3123" class="graf graf--h3 graf-after--p">Step 5&#8202;—&#8202;Implement various types of Local Notifications</h3><p name="e397" class="graf graf--p graf-after--h3">The GIF in previous section might not have impressed you a lot. So let’s have a look at the variety of notifications and actions you can perform with this plugin</p><h4 name="5834" class="graf graf--h4 graf-after--p">Local notification in foreground</h4><p name="c262" class="graf graf--p graf-after--h4">Just add <code class="markup--code markup--p-code">foreground:true</code> in notification trigger call, and your notification will show up in the foreground, just like Whatsapp&nbsp;!</p><figure tabindex="0" contenteditable="false" name="1322" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 352px; max-height: 640px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 181.8%;"></div><img class="graf-image" data-image-id="1*GrZEhZcNsZ-vpFeDAq7WEg.gif" data-width="352" data-height="640" alt="Foreground Local Notification in Ionic 5 app&#8202;—&#8202;Android" src="https://cdn-images-1.medium.com/max/800/1*GrZEhZcNsZ-vpFeDAq7WEg.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Foreground Local Notification in Ionic 5 app&#8202;—&#8202;Android</figcaption></figure><figure tabindex="0" contenteditable="false" name="f4ec" class="graf graf--figure graf-after--figure"><div class="aspectRatioPlaceholder is-locked" style="max-width: 277px; max-height: 600px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 216.6%;"></div><img class="graf-image" data-image-id="1*uYmIQKs-ME2Y4O7Y1ZAK8A.png" data-width="277" data-height="600" alt="Foreground Local Notification in Ionic 5 app&#8202;—&#8202;iOS" src="https://cdn-images-1.medium.com/max/800/1*uYmIQKs-ME2Y4O7Y1ZAK8A.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Foreground Local Notification in Ionic 5 app&#8202;—&#8202;iOS</figcaption></figure><h4 name="429d" class="graf graf--h4 graf-after--figure">Get Data from Notification Click</h4><p name="2fb3" class="graf graf--p graf-after--h4">As we saw earlier, the <code class="markup--code markup--p-code">data</code> field of notification contains certain data in JSON format. We can extract this data using notification <code class="markup--code markup--p-code">events</code>&nbsp;. For our purpose, we will use <code class="markup--code markup--p-code">click</code> event.</p><p name="22b8" class="graf graf--p graf-after--p">I will subscribe to the <code class="markup--code markup--p-code">click</code> event before scheduling the notification. Then on clicking the notification, the <code class="markup--code markup--p-code">event</code> will be triggered and we will get data in console. I will also show the data in an alert, just for demo. After the alert, we will unsubscribe from the listener. The complete code for this will be</p><figure tabindex="0" contenteditable="false" name="ba48" 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/806e43e0dbbddaac5c6733c40d37f65e.js %}</div></div></figure><p name="1627" class="graf graf--p graf-after--figure">The sequence will look like this</p><figure tabindex="0" contenteditable="false" name="556e" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 352px; max-height: 640px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 181.8%;"></div><img class="graf-image" data-image-id="1*o-u8MunpkgGo4In-W2bg4Q.gif" data-width="352" data-height="640" src="https://cdn-images-1.medium.com/max/800/1*o-u8MunpkgGo4In-W2bg4Q.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Local notification with event triggered on&nbsp;click</figcaption></figure><h4 name="9f30" class="graf graf--h4 graf-after--figure">Multiple Notification at&nbsp;once</h4><p name="a9a1" class="graf graf--p graf-after--h4">Just send multiple local notifications in an array inside the <code class="markup--code markup--p-code">schedule</code></p><figure tabindex="0" contenteditable="false" name="0f56" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 352px; max-height: 640px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 181.8%;"></div><img class="graf-image" data-image-id="1*3YZyyGBhfO8XiWMi19fpnQ.gif" data-width="352" data-height="640" alt="Multiple Local notification at once&#8202;—&#8202;Ionic 5 Capacitor Android app" src="https://cdn-images-1.medium.com/max/800/1*3YZyyGBhfO8XiWMi19fpnQ.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Multiple Local notification at once&#8202;—&#8202;Ionic 5 Capacitor Android&nbsp;app</figcaption></figure><h4 name="54b0" class="graf graf--h4 graf-after--figure">Delayed Local Notifications</h4><p name="e3bf" class="graf graf--p graf-after--h4">You can also delay a notification or send it at a particular time. This way, you can even schedule notifications daily, weekly etc.</p><p name="9aff" class="graf graf--p graf-after--p">E.g. For demo purpose, we’ll trigger a notification after 5000 ms of button click, but it will be taken as a date object. Just add the following option in notification options</p><pre name="68f4" class="graf graf--pre graf-after--p">trigger: { at: new Date(new Date().getTime() + 5000) },</pre><figure tabindex="0" contenteditable="false" name="639a" class="graf graf--figure graf-after--pre"><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*VqnwVIpdP0H1EwLm_iGRjw.gif" data-width="350" data-height="622" alt="Notification shows up after 5 second&#8202;—&#8202;Ionic 5 Capacitor Android app" src="https://cdn-images-1.medium.com/max/800/1*VqnwVIpdP0H1EwLm_iGRjw.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Notification shows up after 5 second&#8202;—&#8202;Ionic 5 Capacitor Android&nbsp;app</figcaption></figure><figure tabindex="0" contenteditable="false" name="09cb" class="graf graf--figure graf-after--figure"><div class="aspectRatioPlaceholder is-locked" style="max-width: 394px; max-height: 558px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 141.6%;"></div><img class="graf-image" data-image-id="1*gxAQSSTwgaDEfAAN3WAmFA.gif" data-width="394" data-height="558" alt="Notification shows up after 5 second&#8202;—&#8202;Ionic 5 Capacitor iOS app" src="https://cdn-images-1.medium.com/max/800/1*gxAQSSTwgaDEfAAN3WAmFA.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Notification shows up after 5 second&#8202;—&#8202;Ionic 5 Capacitor iOS&nbsp;app</figcaption></figure><h4 name="69c5" class="graf graf--h4 graf-after--figure">Local Notification with Progress&nbsp;Bar</h4><p name="ed2e" class="graf graf--p graf-after--h4">You can also display a local notification with a progress bar. This is useful in cases like when you are performing a long background task.</p><p name="a282" class="graf graf--p graf-after--p">Just add following to notification options object (will show a 20% progress)</p><pre name="1dd5" class="graf graf--pre graf-after--p">progressBar: { value: 20 }</pre><figure tabindex="0" contenteditable="false" name="6f8e" class="graf graf--figure graf-after--pre"><div class="aspectRatioPlaceholder is-locked" style="max-width: 352px; max-height: 640px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 181.8%;"></div><img class="graf-image" data-image-id="1*LLxVErTzbfprbJ_GCwDR9A.gif" data-width="352" data-height="640" alt="Local notification with progress bar&#8202;—&#8202;Ionic 5 Capacitor Android app" src="https://cdn-images-1.medium.com/max/800/1*LLxVErTzbfprbJ_GCwDR9A.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Local notification with progress bar&#8202;—&#8202;Ionic 5 Capacitor Android&nbsp;app</figcaption></figure><p name="b892" class="graf graf--p graf-after--figure">iOS progress bar notification are not that impressive though</p><figure tabindex="0" contenteditable="false" name="d1fc" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 277px; max-height: 600px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 216.6%;"></div><img class="graf-image" data-image-id="1*rAVnyjXNt-dV6fT-KUC7sw.png" data-width="277" data-height="600" alt="Local notification with progress bar&#8202;—&#8202;Ionic 5 Capacitor iOS app" src="https://cdn-images-1.medium.com/max/800/1*rAVnyjXNt-dV6fT-KUC7sw.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Local notification with progress bar&#8202;—&#8202;iOS</figcaption></figure><h4 name="9040" class="graf graf--h4 graf-after--figure">Local Notification with multi-line message</h4><p name="398a" class="graf graf--p graf-after--h4">You can make the notification message multi-line by adding new line characters. E.g.</p><pre name="7c8c" class="graf graf--pre graf-after--p">text: '4:15 - 5:15 PM\nBig Conference Room'</pre><figure tabindex="0" contenteditable="false" name="8e1f" class="graf graf--figure graf-after--pre"><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*Q4MrgHUZzYNl9Jjzrp8xXA.jpeg" data-width="350" data-height="622" alt="Local Notification with Multi-line message&#8202;—&#8202;Ionic 5 Capacitor Android app" src="https://cdn-images-1.medium.com/max/800/1*Q4MrgHUZzYNl9Jjzrp8xXA.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Local Notification with Multi-line message&nbsp;—Android</figcaption></figure><figure tabindex="0" contenteditable="false" name="c3e6" class="graf graf--figure graf-after--figure"><div class="aspectRatioPlaceholder is-locked" style="max-width: 277px; max-height: 600px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 216.6%;"></div><img class="graf-image" data-image-id="1*jtIWdSCt_2KIHgOTjiE2IA.png" data-width="277" data-height="600" alt="Local Notification with Multi-line message&#8202;—&#8202;Ionic 5 Capacitor iOS app" src="https://cdn-images-1.medium.com/max/800/1*jtIWdSCt_2KIHgOTjiE2IA.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Local Notification with Multi-line message&nbsp;—iOS</figcaption></figure><h4 name="d38a" class="graf graf--h4 graf-after--figure">Local Notification with Image and Action&nbsp;buttons</h4><p name="36c5" class="graf graf--p graf-after--h4">To add a large image, you can add this to the notification options (yes, kitten photo 😛</p><pre name="131d" class="graf graf--pre graf-after--p">attachments: ['http://placekitten.com/g/300/200']</pre><p name="a6ae" class="graf graf--p graf-after--pre">For action buttons, you can add this to the options</p><pre name="a023" class="graf graf--pre graf-after--p">actions: [<br>{ id: 'yes', title: 'Yes' },<br>{ id: 'no', title: 'No' }<br>]</pre><p name="39ff" class="graf graf--p graf-after--pre">An action generally has the following structure —</p><pre name="42e4" class="graf graf--pre graf-after--p">id?: string;<br>title?: string;<br>foreground?: boolean;<br>launch?: boolean;<br>ui?: string;<br>needsAuth?: boolean;<br>icon?: string;<br>choices?: string[];<br>editable?: boolean;<br>submitTitle?: string;<br>type?: ILocalNotificationActionType;</pre><p name="3022" class="graf graf--p graf-after--pre">This will create a notification with YES and NO buttons</p><figure tabindex="0" contenteditable="false" name="ff02" 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*5iymLC7NAwPQGvOzGIatGw.jpeg" data-width="350" data-height="622" alt="Local Notification with Action buttons and Image&#8202;—&#8202;Ionic 5 Capacitor Android app" src="https://cdn-images-1.medium.com/max/800/1*5iymLC7NAwPQGvOzGIatGw.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Local Notification with Action buttons and Image&#8202;—&#8202;Android</figcaption></figure><p name="c395" class="graf graf--p graf-after--figure">I was not able to get the photo in iOS, probably because of <code class="markup--code markup--p-code">http</code>, though the action buttons do appear and work</p><figure tabindex="0" contenteditable="false" name="8458" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 277px; max-height: 600px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 216.6%;"></div><img class="graf-image" data-image-id="1*Df_mdCfZlIxgquy-2LD_Lw.png" data-width="277" data-height="600" alt="Local Notification with Action buttons and Image&#8202;—&#8202;Ionic 5 Capacitor iOS app" src="https://cdn-images-1.medium.com/max/800/1*Df_mdCfZlIxgquy-2LD_Lw.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Local Notification with Action buttons&#8202;—&#8202;iOS</figcaption></figure><h4 name="904a" class="graf graf--h4 graf-after--figure">Local Notifications with&nbsp;Input</h4><p name="8b46" class="graf graf--p graf-after--h4">You can also generate local notification accepting input text in notification tray itself. This comes in handy in chat applications. This is all you need to add to the notification options</p><pre name="8167" class="graf graf--pre graf-after--p">actions: [{<br>id: 'reply',<br>type: ILocalNotificationActionType.INPUT,<br>title: 'Reply'<br>}]</pre><p name="c995" class="graf graf--p graf-after--pre">To use <code class="markup--code markup--p-code">ILocalNotificationActionType</code>&nbsp;, you will have to import it first in the page using</p><pre name="0fe2" class="graf graf--pre graf-after--p">import { ILocalNotificationActionType } from '@ionic-native/local-notifications/ngx';</pre><p name="3405" class="graf graf--p graf-after--pre">The result will look like this</p><figure tabindex="0" contenteditable="false" name="8b58" 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*h_9yNSiCMTtczPByr7-zmQ.gif" data-width="350" data-height="622" alt="Local notification with Input text- Ionic 5 Capacitor Android app" src="https://cdn-images-1.medium.com/max/800/1*h_9yNSiCMTtczPByr7-zmQ.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Local notification with Input text—&nbsp;Android</figcaption></figure><figure tabindex="0" contenteditable="false" name="9bc9" class="graf graf--figure graf-after--figure"><div class="aspectRatioPlaceholder is-locked" style="max-width: 277px; max-height: 600px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 216.6%;"></div><img class="graf-image" data-image-id="1*Nco8OgEptrpqr3vQvPefvQ.png" data-width="277" data-height="600" src="https://cdn-images-1.medium.com/max/800/1*Nco8OgEptrpqr3vQvPefvQ.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Local notification with Input text&nbsp;—iOS</figcaption></figure><h4 name="2aa2" class="graf graf--h4 graf-after--figure">Local Notifications with&nbsp;Grouping</h4><p name="b3fc" class="graf graf--p graf-after--h4">At times, you receive many notifications from the same app. E.g. your email app, or chat app. You would like to group these together so as to not take a lot of space in notification tray. You can do this easily with local notifications using the following option</p><pre name="881c" class="graf graf--pre graf-after--p">this.localNotifications.schedule([<br>{ id: 0, title: 'Design team meeting' },<br>{ id: 1, summary: 'me@gmail.com', group: 'email', groupSummary: true },<br>{ id: 2, title: 'Please take all my money', group: 'email' },<br>{ id: 3, title: 'A question regarding this plugin', group: 'email'},<br>{ id: 4, title: 'Wellcome back home', group: 'email' }<br>]);</pre><p name="abbc" class="graf graf--p graf-after--pre">The <code class="markup--code markup--p-code">group:'email'</code> creates a group with similar notifications which have <code class="markup--code markup--p-code">group:email</code>&nbsp;. Here’s how it looks</p><figure tabindex="0" contenteditable="false" name="bba5" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 350px; max-height: 758px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 216.6%;"></div><img class="graf-image" data-image-id="1*DpbcOWxCo7ks_PVhTARw7Q.jpeg" data-width="350" data-height="758" alt="Local notification with grouped notifications&#8202;—&#8202;Ionic 5 Capacitor Android app" src="https://cdn-images-1.medium.com/max/800/1*DpbcOWxCo7ks_PVhTARw7Q.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Local notification with grouped notifications —Android</figcaption></figure><p name="263c" class="graf graf--p graf-after--figure">You see the four emails grouped together, with one as a header. Other notification is shown as separate notification. Same for iOS</p><figure tabindex="0" contenteditable="false" name="e01e" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 277px; max-height: 600px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 216.6%;"></div><img class="graf-image" data-image-id="1*EyNBHVWMYsAkc8qY7hyxGQ.png" data-width="277" data-height="600" alt="Local notification with grouped notifications&#8202;—&#8202;Ionic 5 Capacitor iOS app" src="https://cdn-images-1.medium.com/max/800/1*EyNBHVWMYsAkc8qY7hyxGQ.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Local notification with grouped notifications —iOS</figcaption></figure><p name="c631" class="graf graf--p graf-after--figure">The group notification do come in annoyingly though in iOS 🙈</p><figure tabindex="0" contenteditable="false" name="03fe" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 394px; max-height: 558px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 141.6%;"></div><img class="graf-image" data-image-id="1*QerSt1tx0RacAOTKtyhMiw.gif" data-width="394" data-height="558" src="https://cdn-images-1.medium.com/max/800/1*QerSt1tx0RacAOTKtyhMiw.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Grouped notification in iOS come one after&nbsp;another</figcaption></figure><h3 name="9e6e" class="graf graf--h3 graf-after--figure">Conclusion</h3><p name="e2b9" class="graf graf--p graf-after--h3">In this post, we learnt how to use Local Notification in Ionic 5 Capacitor apps to generate a lot of different types of notifications. These include action buttons, input text, images, multiple notifications, grouping etc. With local notifications, you can save a lot on server push notifications. Plus it gives you the ability to schedule regular notifications as well.</p><p name="506c" class="graf graf--p graf-after--p">We tested the apps on Android device and iOS simulator to validate the working. I think this is an awesome plugin, and you should definitely use it in your apps if possible.</p><blockquote name="a2c2" class="graf graf--blockquote graf-after--p"><strong class="markup--strong markup--blockquote-strong">Complete code of this blog post can be found at this github repo&#8202;—&#8202;</strong><a href="https://github.com/enappd/ionic-5-capacitor-local-notification"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--blockquote-strong">ionic-5-local-notifications</strong></a></blockquote><h3 name="5fab" class="graf graf--h3 graf-after--blockquote">Next Steps</h3><p name="7a20" class="graf graf--p graf-after--h3">Now that you have learned the implementation of Local Notifications in Ionic 5, you can also try following blogs. These are written for Ionic 4, but will work nicely for Ionic 5 as well.</p><ul class="postList"><li name="aff8" class="graf graf--li graf-after--p">Ionic 4 Payment Gateways&#8202;—&#8202;<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="noopener"    target="_blank">Stripe</a> | <a href="https://enappd.com/blog/ionic-4-paypal-payment-integration-for-apps-and-pwa/16"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">PayPal</a> | <a href="https://enappd.com/blog/how-to-integrate-apple-pay-in-ionic-4-apps/21"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Apple Pay</a> | <a href="https://enappd.com/blog/how-to-integrate-razorpay-in-ionic-4-apps-and-pwa/20"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">RazorPay</a></li><li name="8c75" class="graf graf--li graf-after--li">Ionic 4 Charts with&#8202;—&#8202;<a href="https://enappd.com/blog/ionic-4-charts-using-google-charts/66"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Google Charts </a>| <a href="https://enappd.com/blog/adding-charts-in-ionic-4-apps-and-pwa-part-3/60"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">HighCharts</a> | <a href="https://enappd.com/blog/adding-charts-in-ionic-4-apps-and-pwa-part-2/54"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">d3.js</a> | <a href="https://enappd.com/blog/charts-in-ionic-4-apps-and-pwa-part-1/52"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Chart.js</a></li><li name="7763" class="graf graf--li graf-after--li">Ionic 4 Social Logins&#8202;—&#8202;<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</a> | <a href="https://enappd.com/blog/google-login-in-ionic-4-apps-using-firebase/39"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Google</a> | <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</a></li><li name="2724" class="graf graf--li graf-after--li">Ionic 4 Authentications&#8202;—&#8202;<a href="https://enappd.com/blog/email-authentication-with-firebase-in-ionic-4/38"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Via Email</a> | <a href="https://enappd.com/blog/firebase-anonymous-login-in-ionic-4/37"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Anonymous</a></li><li name="5038" class="graf graf--li graf-after--li">Ionic 4 Features&#8202;—&#8202;<a href="https://enappd.com/blog/using-geolocation-geocoding-and-reverse-geocoding-in-ionic-4/45"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Geolocation</a> | <a href="https://enappd.com/blog/qr-code-scanning-and-optical-character-recognition-ocr-in-ionic-4/9"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">QR Code reader </a>| <a href="https://enappd.com/blog/best-fitness-plugins-for-ionic-4-how-to-use-pedometer/15"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Pedometer</a></li><li name="2a38" class="graf graf--li graf-after--li">Media in Ionic 4&#8202;—&#8202;<a href="https://enappd.com/blog/spotify-like-music-in-ionic-4-apps/48"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Audio</a> | <a href="https://enappd.com/blog/adding-video-player-in-ionic-4-app/64"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Video</a> | <a href="https://enappd.com/blog/image-picker-in-ionic-4-app/67"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Image Picker</a> | <a href="https://enappd.com/blog/how-to-add-image-cropper-in-ionic-4-app/68"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Image Cropper</a></li><li name="5759" class="graf graf--li graf-after--li">Ionic 4 Essentials&#8202;—&#8202;<a href="https://enappd.com/blog/ionic-4-save-and-retrieve-data-locally-on-device/59"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Native Storage</a> | <a href="https://enappd.com/blog/how-to-translate-in-ionic-4-globalization-internationalization-and-localization/11"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Translations</a> | <a href="https://enappd.com/blog/rtl-right-to-left-use-in-ionic-4/50"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">RTL</a></li><li name="9bcf" class="graf graf--li graf-after--li">Ionic 4 messaging&#8202;—&#8202;<a href="https://enappd.com/blog/implement-ionic-4-firebase-push/34"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Firebase Push</a> | <a href="https://enappd.com/blog/automatically-read-sms-in-ionic-4-apps/42"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Reading SMS</a></li><li name="1831" class="graf graf--li graf-after--li">Ionic 4 with Firebase&#8202;—&#8202;<a href="https://enappd.com/blog/how-to-integrate-firebase-in-ionic-4-apps/23"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Basics</a> | <a href="https://enappd.com/blog/firebase-with-ionic-4-hosting-auth-and-db-connection/58"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Hosting and DB</a> | <a href="https://enappd.com/blog/firebase-cloud-functions-in-ionic-4-complete-guide/32"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Cloud functions</a></li></ul><p name="513a" class="graf graf--p graf-after--li">If you need a base to start your next Ionic 5 app, you can make your next awesome app using <a href="https://store.enappd.com/product/ionic-full-app/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Ionic 5 Full App</a></p><figure tabindex="0" contenteditable="false" name="16d6" 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.1%;"></div><img class="graf-image" data-image-id="0*1ArpKyhiDHZnevwB.jpeg" data-width="700" data-height="442" src="https://cdn-images-1.medium.com/max/800/0*1ArpKyhiDHZnevwB.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Ionic 5 Full App starter from&nbsp;Enappd</figcaption></figure><p name="b7b1" class="graf graf--p graf--empty graf-after--figure graf--trailing"><br></p></div></div></section></div></article></main>