Implement Local Notifications in Ionic 4 Apps
Tags: ionic, notifications
Published: 2020-03-26 00:12:12

<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="103c" 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="7cea" class="graf graf--p graf-after--figure">In this post you are going to learn how to implement local notifications in Ionic 4 apps. We will see a variety of notification types that can be generated using Local Notifications. We will use a simple Cordova plugin for this purpose, and test the functionality on Android 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;—&#8202;</strong><a href="https://github.com/enappd/ionic-4-local-notifications"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--blockquote-strong">ionic-4-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 is-selected">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/720/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 4 apps. First, let’s see what Ionic 4 is all about.</p><h3 name="984b" class="graf graf--h3 graf-after--p">What is Ionic&nbsp;4?</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><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 4 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">Implement your first Local Notification</li><li name="1472" class="graf graf--li graf-after--li">Build your app on 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 4 app</p><h3 name="2a95" class="graf graf--h3 graf-after--p">Step 1&#8202;—&#8202;Create a basic Ionic 4&nbsp;app</h3><blockquote name="ee25" class="graf graf--blockquote graf-after--h3"><em class="markup--em markup--blockquote-em">I have covered this topic in detail in </em><a href="https://enappd.com/blog/how-to-create-an-ionic-4-app-for-beginners/13/?source=post_page---------------------------"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><em class="markup--em markup--blockquote-em">this blog</em></a><em class="markup--em markup--blockquote-em">.</em></blockquote><p name="7cf9" class="graf graf--p graf-after--blockquote">In short, the steps you need to take here are</p><ul class="postList"><li name="9e47" class="graf graf--li graf-after--p">Make sure you have node installed in the system (V10.15.3 at the time of this blog post)</li><li name="622c" class="graf graf--li graf-after--li">Install <strong class="markup--strong markup--li-strong">ionic cli </strong>using npm (my Ionic version is 4.1.0 currently)</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">sidemenu</code> starter for the sake of this tutorial. On running <code class="markup--code markup--p-code">ionic start ionic-4-local-notifications sidemenu</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. You can create a basic layout for triggering Local Notifications. All the real action will happen when we build the app for Android.</p><figure tabindex="0" contenteditable="false" name="61b3" 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*7NonAsUDAwMR19EmS60feA.jpeg" data-width="350" data-height="622" src="https://cdn-images-1.medium.com/max/720/1*7NonAsUDAwMR19EmS60feA.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Basic layout for generating Local Notifications</figcaption></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-notificationnpm <br>$ 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 you should 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, don’t forget to 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">That’s it&nbsp;! You are ready to implement Local notifications in your Ionic 4 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. Go ahead and 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 is-defaultValue"><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" src="https://cdn-images-1.medium.com/max/720/1*G5QHHU19lZ6qXYrhi8AklQ.gif"><div class="crosshair u-ignoreBlock"></div></div></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> —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" src="https://cdn-images-1.medium.com/max/720/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</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/720/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" src="https://cdn-images-1.medium.com/max/720/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&nbsp;once</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" src="https://cdn-images-1.medium.com/max/720/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&nbsp;second</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" src="https://cdn-images-1.medium.com/max/720/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&nbsp;bar</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" src="https://cdn-images-1.medium.com/max/720/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</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" src="https://cdn-images-1.medium.com/max/720/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&nbsp;Image</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" src="https://cdn-images-1.medium.com/max/720/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&nbsp;text</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" src="https://cdn-images-1.medium.com/max/720/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</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.</p><h3 name="9e6e" class="graf graf--h3 graf-after--p">Conclusion</h3><p name="e2b9" class="graf graf--p graf-after--h3">In this post, we learnt how to use Local Notification in Ionic 4 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><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-4-local-notifications"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--blockquote-strong">ionic-4-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 4, you can also try</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 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"    target="_blank">Ionic 4 Full App</a></p><figure tabindex="0" contenteditable="false" name="16d6" class="graf graf--figure graf-after--p is-defaultValue"><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/720/0*1ArpKyhiDHZnevwB.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="9175" class="graf graf--p graf--empty graf-after--figure graf--trailing"><br></p></div></div></section></div></article></main>