Using Local Notifications In Your NativeScript Mobile App

<p>When developing mobile apps, at some point in time you may find yourself needing to show a background notification to your users.  There are two types of notifications, one being the push notification which is sent from a remote server and the other being local notifications that are triggered from within the application.</p> <p>We’re going to focus on local notifications here.</p> <p>So when might you need to use a local notification?  There are many scenarios.  Let’s say you’re creating an app that communicates with iBeacons.  When you’re within proximity maybe you want to trigger a notification to the user.  There are many other scenarios that I won’t get into.</p> <p>We’re going to see a basic example on how to use local notifications in a <a href="http://bit.ly/1sQryLk" target="_blank">NativeScript</a> Android and iOS mobile application.</p> <p>Let’s start by creating a new NativeScript project.  From your Command Prompt (Windows) or Terminal (Mac and Linux), execute the following commands:</p> <div id="crayon-574609efc2e3c075686666" class="crayon-syntax crayon-theme-github crayon-font-monaco crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover"> <div class="crayon-toolbar" data-settings=" show"><span class="crayon-title">Create New Telerik NativeScript Project</span> <div class="crayon-tools"> <div class="crayon-button crayon-popup-button" title="Open Code In New Window"></div> <p><span class="crayon-language">Shell</span></p> </div> </div> <div class="crayon-plain-wrap"></div> <div class="crayon-main"> <table class="crayon-table"> <tbody> <tr class="crayon-row"> <td class="crayon-nums" data-settings="show"> <div class="crayon-nums-content"> <div class="crayon-num" data-line="crayon-574609efc2e3c075686666-1">1</div> <div class="crayon-num crayon-striped-num" data-line="crayon-574609efc2e3c075686666-2">2</div> <div class="crayon-num" data-line="crayon-574609efc2e3c075686666-3">3</div> <div class="crayon-num crayon-striped-num" data-line="crayon-574609efc2e3c075686666-4">4</div> </div> </td> <td class="crayon-code"> <div class="crayon-pre"> <div id="crayon-574609efc2e3c075686666-1" class="crayon-line"><span class="crayon-e">tns</span> <span class="crayon-e">create</span> <span class="crayon-e">NotificationProject</span></div> <div id="crayon-574609efc2e3c075686666-2" class="crayon-line crayon-striped-line"><span class="crayon-r">cd</span> <span class="crayon-e">NotificationProject</span></div> <div id="crayon-574609efc2e3c075686666-3" class="crayon-line"><span class="crayon-e">tns</span> <span class="crayon-e">platform</span> <span class="crayon-e">add</span> <span class="crayon-e">ios</span></div> <div id="crayon-574609efc2e3c075686666-4" class="crayon-line crayon-striped-line"><span class="crayon-e">tns</span> <span class="crayon-e">platform</span> <span class="crayon-e">add</span> <span class="crayon-v">android</span></div> </div> </td> </tr> </tbody> </table> </div> </div> <p>It is important to note that if you’re not using a Mac, you cannot add and build for the iOS platform.</p> <p>To make use of local notifications we’re going to use a plugin.  If we really wanted to we could include the native code for notifications directly within our JavaScript, but for convenience we want to use a plugin.</p> <p>We’re going to use the <a href="http://bit.ly/1qK4gET" target="_blank">nativescript-local-notifications</a> plugin by Eddy Verbruggen.  To install it, execute the following from the Terminal or Command Prompt:</p> <div id="crayon-574609efc2e4f922625588" class="crayon-syntax crayon-theme-github crayon-font-monaco crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover"> <div class="crayon-toolbar" data-settings=" show"><span class="crayon-title">Add Local Notifications Plugin for NativeScript</span> <div class="crayon-tools"> <div class="crayon-button crayon-popup-button" title="Open Code In New Window"></div> <p><span class="crayon-language">Shell</span></p> </div> </div> <div class="crayon-plain-wrap"></div> <div class="crayon-main"> <table class="crayon-table"> <tbody> <tr class="crayon-row"> <td class="crayon-nums" data-settings="show"> <div class="crayon-nums-content"> <div class="crayon-num" data-line="crayon-574609efc2e4f922625588-1">1</div> </div> </td> <td class="crayon-code"> <div class="crayon-pre"> <div id="crayon-574609efc2e4f922625588-1" class="crayon-line"><span class="crayon-e">tns</span> <span class="crayon-e">plugin</span> <span class="crayon-e">add</span> <span class="crayon-v">nativescript</span><span class="crayon-o">–</span><span class="crayon-v">local</span><span class="crayon-o">–</span><span class="crayon-v">notifications</span></div> </div> </td> </tr> </tbody> </table> </div> </div> <p>We can now start developing the application.  Before going forward, some code was taken directly from Eddy Verbruggen’s <a href="http://bit.ly/1qK4gET" target="_blank">README</a> file.  I’ve given it my own flair.</p> <p>Let’s start by working with our view model which will contain our data.  Open the project’s <strong>app/main-view-model.js</strong> and include the following code:</p> <div id="crayon-574609efc2e56769533641" class="crayon-syntax crayon-theme-github crayon-font-monaco crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover"> <div class="crayon-toolbar" data-settings=" show"><span class="crayon-title">app/main-view-model.js</span> <div class="crayon-tools"> <div class="crayon-button crayon-popup-button" title="Open Code In New Window"></div> <p><span class="crayon-language">JavaScript</span></p> </div> </div> <div class="crayon-plain-wrap"></div> <div class="crayon-main"> <table class="crayon-table"> <tbody> <tr class="crayon-row"> <td class="crayon-nums" data-settings="show"> <div class="crayon-nums-content"> <div class="crayon-num" data-line="crayon-574609efc2e56769533641-1">1</div> <div class="crayon-num crayon-striped-num" data-line="crayon-574609efc2e56769533641-2">2</div> <div class="crayon-num" data-line="crayon-574609efc2e56769533641-3">3</div> <div class="crayon-num crayon-striped-num" data-line="crayon-574609efc2e56769533641-4">4</div> <div class="crayon-num" data-line="crayon-574609efc2e56769533641-5">5</div> <div class="crayon-num crayon-striped-num" data-line="crayon-574609efc2e56769533641-6">6</div> <div class="crayon-num" data-line="crayon-574609efc2e56769533641-7">7</div> <div class="crayon-num crayon-striped-num" data-line="crayon-574609efc2e56769533641-8">8</div> <div class="crayon-num" data-line="crayon-574609efc2e56769533641-9">9</div> <div class="crayon-num crayon-striped-num" data-line="crayon-574609efc2e56769533641-10">10</div> <div class="crayon-num" data-line="crayon-574609efc2e56769533641-11">11</div> <div class="crayon-num crayon-striped-num" data-line="crayon-574609efc2e56769533641-12">12</div> <div class="crayon-num" data-line="crayon-574609efc2e56769533641-13">13</div> <div class="crayon-num crayon-striped-num" data-line="crayon-574609efc2e56769533641-14">14</div> <div class="crayon-num" data-line="crayon-574609efc2e56769533641-15">15</div> <div class="crayon-num crayon-striped-num" data-line="crayon-574609efc2e56769533641-16">16</div> <div class="crayon-num" data-line="crayon-574609efc2e56769533641-17">17</div> <div class="crayon-num crayon-striped-num" data-line="crayon-574609efc2e56769533641-18">18</div> <div class="crayon-num" data-line="crayon-574609efc2e56769533641-19">19</div> <div class="crayon-num crayon-striped-num" data-line="crayon-574609efc2e56769533641-20">20</div> <div class="crayon-num" data-line="crayon-574609efc2e56769533641-21">21</div> <div class="crayon-num crayon-striped-num" data-line="crayon-574609efc2e56769533641-22">22</div> <div class="crayon-num" data-line="crayon-574609efc2e56769533641-23">23</div> <div class="crayon-num crayon-striped-num" data-line="crayon-574609efc2e56769533641-24">24</div> <div class="crayon-num" data-line="crayon-574609efc2e56769533641-25">25</div> <div class="crayon-num crayon-striped-num" data-line="crayon-574609efc2e56769533641-26">26</div> <div class="crayon-num" data-line="crayon-574609efc2e56769533641-27">27</div> <div class="crayon-num crayon-striped-num" data-line="crayon-574609efc2e56769533641-28">28</div> <div class="crayon-num" data-line="crayon-574609efc2e56769533641-29">29</div> <div class="crayon-num crayon-striped-num" data-line="crayon-574609efc2e56769533641-30">30</div> <div class="crayon-num" data-line="crayon-574609efc2e56769533641-31">31</div> <div class="crayon-num crayon-striped-num" data-line="crayon-574609efc2e56769533641-32">32</div> <div class="crayon-num" data-line="crayon-574609efc2e56769533641-33">33</div> <div class="crayon-num crayon-striped-num" data-line="crayon-574609efc2e56769533641-34">34</div> <div class="crayon-num" data-line="crayon-574609efc2e56769533641-35">35</div> <div class="crayon-num crayon-striped-num" data-line="crayon-574609efc2e56769533641-36">36</div> <div class="crayon-num" data-line="crayon-574609efc2e56769533641-37">37</div> <div class="crayon-num crayon-striped-num" data-line="crayon-574609efc2e56769533641-38">38</div> <div class="crayon-num" data-line="crayon-574609efc2e56769533641-39">39</div> <div class="crayon-num crayon-striped-num" data-line="crayon-574609efc2e56769533641-40">40</div> <div class="crayon-num" data-line="crayon-574609efc2e56769533641-41">41</div> <div class="crayon-num crayon-striped-num" data-line="crayon-574609efc2e56769533641-42">42</div> <div class="crayon-num" data-line="crayon-574609efc2e56769533641-43">43</div> <div class="crayon-num crayon-striped-num" data-line="crayon-574609efc2e56769533641-44">44</div> <div class="crayon-num" data-line="crayon-574609efc2e56769533641-45">45</div> <div class="crayon-num crayon-striped-num" data-line="crayon-574609efc2e56769533641-46">46</div> </div> </td> <td class="crayon-code"> <div class="crayon-pre"> <div id="crayon-574609efc2e56769533641-1" class="crayon-line"><span class="crayon-t">var</span> <span class="crayon-v">Observable</span> <span class="crayon-o">=</span> <span class="crayon-e">require</span><span class="crayon-sy">(</span><span class="crayon-s">“data/observable”</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-v">Observable</span><span class="crayon-sy">;</span></div> <div id="crayon-574609efc2e56769533641-2" class="crayon-line crayon-striped-line"><span class="crayon-t">var</span> <span class="crayon-v">LocalNotifications</span> <span class="crayon-o">=</span> <span class="crayon-e">require</span><span class="crayon-sy">(</span><span class="crayon-s">“nativescript-local-notifications”</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div> <div id="crayon-574609efc2e56769533641-3" class="crayon-line"><span class="crayon-t">var</span> <span class="crayon-v">dialogs</span> <span class="crayon-o">=</span> <span class="crayon-e">require</span><span class="crayon-sy">(</span><span class="crayon-s">“ui/dialogs”</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div> <div id="crayon-574609efc2e56769533641-4" class="crayon-line crayon-striped-line"></div> <div id="crayon-574609efc2e56769533641-5" class="crayon-line"><span class="crayon-t">function</span> <span class="crayon-e">doAddOnMessageReceivedCallback</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span> <span class="crayon-sy">{</span></div> <div id="crayon-574609efc2e56769533641-6" class="crayon-line crayon-striped-line"><span class="crayon-h">    </span><span class="crayon-v">LocalNotifications</span><span class="crayon-sy">.</span><span class="crayon-e">addOnMessageReceivedCallback</span><span class="crayon-sy">(</span></div> <div id="crayon-574609efc2e56769533641-7" class="crayon-line"><span class="crayon-h">        </span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-v">notificationData</span><span class="crayon-sy">)</span> <span class="crayon-sy">{</span></div> <div id="crayon-574609efc2e56769533641-8" class="crayon-line crayon-striped-line"><span class="crayon-h">            </span><span class="crayon-v">dialogs</span><span class="crayon-sy">.</span><span class="crayon-e">alert</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div> <div id="crayon-574609efc2e56769533641-9" class="crayon-line"><span class="crayon-h">                </span><span class="crayon-v">title</span><span class="crayon-o">:</span> <span class="crayon-s">“Notification received”</span><span class="crayon-sy">,</span></div> <div id="crayon-574609efc2e56769533641-10" class="crayon-line crayon-striped-line"><span class="crayon-h">                </span><span class="crayon-v">message</span><span class="crayon-o">:</span> <span class="crayon-s">“ID: “</span> <span class="crayon-o">+</span> <span class="crayon-v">notificationData</span><span class="crayon-sy">.</span><span class="crayon-v">id</span> <span class="crayon-o">+</span></div> <div id="crayon-574609efc2e56769533641-11" class="crayon-line"><span class="crayon-h">                </span><span class="crayon-s">“\nTitle: “</span> <span class="crayon-o">+</span> <span class="crayon-v">notificationData</span><span class="crayon-sy">.</span><span class="crayon-v">title</span> <span class="crayon-o">+</span></div> <div id="crayon-574609efc2e56769533641-12" class="crayon-line crayon-striped-line"><span class="crayon-h">                </span><span class="crayon-s">“\nBody: “</span> <span class="crayon-o">+</span> <span class="crayon-v">notificationData</span><span class="crayon-sy">.</span><span class="crayon-v">body</span><span class="crayon-sy">,</span></div> <div id="crayon-574609efc2e56769533641-13" class="crayon-line"><span class="crayon-h">                </span><span class="crayon-v">okButtonText</span><span class="crayon-o">:</span> <span class="crayon-s">“Excellent!”</span></div> <div id="crayon-574609efc2e56769533641-14" class="crayon-line crayon-striped-line"><span class="crayon-h">            </span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div> <div id="crayon-574609efc2e56769533641-15" class="crayon-line"><span class="crayon-h">        </span><span class="crayon-sy">}</span></div> <div id="crayon-574609efc2e56769533641-16" class="crayon-line crayon-striped-line"><span class="crayon-h">    </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div> <div id="crayon-574609efc2e56769533641-17" class="crayon-line"><span class="crayon-sy">}</span></div> <div id="crayon-574609efc2e56769533641-18" class="crayon-line crayon-striped-line"></div> <div id="crayon-574609efc2e56769533641-19" class="crayon-line"><span class="crayon-t">function</span> <span class="crayon-e">createViewModel</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span> <span class="crayon-sy">{</span></div> <div id="crayon-574609efc2e56769533641-20" class="crayon-line crayon-striped-line"><span class="crayon-h">    </span><span class="crayon-t">var</span> <span class="crayon-v">viewModel</span> <span class="crayon-o">=</span> <span class="crayon-r">new</span> <span class="crayon-e">Observable</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div> <div id="crayon-574609efc2e56769533641-21" class="crayon-line"></div> <div id="crayon-574609efc2e56769533641-22" class="crayon-line crayon-striped-line"><span class="crayon-h">    </span><span class="crayon-v">viewModel</span><span class="crayon-sy">.</span><span class="crayon-v">id</span> <span class="crayon-o">=</span> <span class="crayon-cn">0</span><span class="crayon-sy">;</span></div> <div id="crayon-574609efc2e56769533641-23" class="crayon-line"><span class="crayon-h">    </span><span class="crayon-v">viewModel</span><span class="crayon-sy">.</span><span class="crayon-e">title</span> <span class="crayon-o">=</span> <span class="crayon-s">“Test Title”</span><span class="crayon-sy">;</span></div> <div id="crayon-574609efc2e56769533641-24" class="crayon-line crayon-striped-line"><span class="crayon-h">    </span><span class="crayon-v">viewModel</span><span class="crayon-sy">.</span><span class="crayon-e">body</span> <span class="crayon-o">=</span> <span class="crayon-s">“Test Body”</span><span class="crayon-sy">;</span></div> <div id="crayon-574609efc2e56769533641-25" class="crayon-line"><span class="crayon-h">    </span><span class="crayon-v">viewModel</span><span class="crayon-sy">.</span><span class="crayon-e">ticker</span> <span class="crayon-o">=</span> <span class="crayon-s">“Test Ticker”</span><span class="crayon-sy">;</span></div> <div id="crayon-574609efc2e56769533641-26" class="crayon-line crayon-striped-line"></div> <div id="crayon-574609efc2e56769533641-27" class="crayon-line"><span class="crayon-h">    </span><span class="crayon-e">doAddOnMessageReceivedCallback</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div> <div id="crayon-574609efc2e56769533641-28" class="crayon-line crayon-striped-line"></div> <div id="crayon-574609efc2e56769533641-29" class="crayon-line"><span class="crayon-h">    </span><span class="crayon-v">viewModel</span><span class="crayon-sy">.</span><span class="crayon-v">schedule</span> <span class="crayon-o">=</span> <span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span> <span class="crayon-sy">{</span></div> <div id="crayon-574609efc2e56769533641-30" class="crayon-line crayon-striped-line"><span class="crayon-h">        </span><span class="crayon-v">LocalNotifications</span><span class="crayon-sy">.</span><span class="crayon-e">schedule</span><span class="crayon-sy">(</span><span class="crayon-sy">[</span><span class="crayon-sy">{</span></div> <div id="crayon-574609efc2e56769533641-31" class="crayon-line"><span class="crayon-h">            </span><span class="crayon-v">id</span><span class="crayon-o">:</span> <span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-v">id</span><span class="crayon-sy">,</span></div> <div id="crayon-574609efc2e56769533641-32" class="crayon-line crayon-striped-line"><span class="crayon-h">            </span><span class="crayon-v">title</span><span class="crayon-o">:</span> <span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-v">title</span><span class="crayon-sy">,</span></div> <div id="crayon-574609efc2e56769533641-33" class="crayon-line"><span class="crayon-h">            </span><span class="crayon-v">body</span><span class="crayon-o">:</span> <span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-v">body</span><span class="crayon-sy">,</span></div> <div id="crayon-574609efc2e56769533641-34" class="crayon-line crayon-striped-line"><span class="crayon-h">            </span><span class="crayon-v">ticker</span><span class="crayon-o">:</span> <span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-v">ticker</span><span class="crayon-sy">,</span></div> <div id="crayon-574609efc2e56769533641-35" class="crayon-line"><span class="crayon-h">            </span><span class="crayon-v">at</span><span class="crayon-o">:</span> <span class="crayon-r">new</span> <span class="crayon-r">Date</span><span class="crayon-sy">(</span><span class="crayon-r">new</span> <span class="crayon-r">Date</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">getTime</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span> <span class="crayon-o">+</span> <span class="crayon-sy">(</span><span class="crayon-cn">10</span> <span class="crayon-o">*</span> <span class="crayon-cn">1000</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span></div> <div id="crayon-574609efc2e56769533641-36" class="crayon-line crayon-striped-line"><span class="crayon-h">        </span><span class="crayon-sy">}</span><span class="crayon-sy">]</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-st">then</span><span class="crayon-sy">(</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span> <span class="crayon-o">=</span><span class="crayon-o">></span> <span class="crayon-sy">{</span></div> <div id="crayon-574609efc2e56769533641-37" class="crayon-line"><span class="crayon-h">            </span><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-s">“Notification scheduled”</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div> <div id="crayon-574609efc2e56769533641-38" class="crayon-line crayon-striped-line"><span class="crayon-h">        </span><span class="crayon-sy">}</span><span class="crayon-sy">,</span> <span class="crayon-sy">(</span><span class="crayon-v">error</span><span class="crayon-sy">)</span> <span class="crayon-o">=</span><span class="crayon-o">></span> <span class="crayon-sy">{</span></div> <div id="crayon-574609efc2e56769533641-39" class="crayon-line"><span class="crayon-h">            </span><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-s">“ERROR”</span><span class="crayon-sy">,</span> <span class="crayon-v">error</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div> <div id="crayon-574609efc2e56769533641-40" class="crayon-line crayon-striped-line"><span class="crayon-h">        </span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div> <div id="crayon-574609efc2e56769533641-41" class="crayon-line"><span class="crayon-h">    </span><span class="crayon-sy">}</span></div> <div id="crayon-574609efc2e56769533641-42" class="crayon-line crayon-striped-line"></div> <div id="crayon-574609efc2e56769533641-43" class="crayon-line"><span class="crayon-h">    </span><span class="crayon-st">return</span> <span class="crayon-v">viewModel</span><span class="crayon-sy">;</span></div> <div id="crayon-574609efc2e56769533641-44" class="crayon-line crayon-striped-line"><span class="crayon-sy">}</span></div> <div id="crayon-574609efc2e56769533641-45" class="crayon-line"></div> <div id="crayon-574609efc2e56769533641-46" class="crayon-line crayon-striped-line"><span class="crayon-v">exports</span><span class="crayon-sy">.</span><span class="crayon-v">createViewModel</span> <span class="crayon-o">=</span> <span class="crayon-v">createViewModel</span><span class="crayon-sy">;</span></div> </div> </td> </tr> </tbody> </table> </div> </div> <p>A lot is going on here so we should probably break it down.</p> <p>The first part of this file is the <code>doAddOnMessageReceivedCallback</code> function.  This is the function that will be called it the notification is clicked.  It can be the router to future functionality within your application based on the particular notification.  For example maybe you have a chat application and you want to be directed to the particular chat room.</p> <p>The bulk of our local notification code will be in the <code>createViewModel</code> function.  We’ll be returning an <code>Observable</code> that has various variables that will be bound to a UI form.  It also contains a <code>schedule</code>function for scheduling the notification itself.</p> <p>Now we can take a look at the application model which acts as our page controller.  Open the project’s <strong>app/main-page.js</strong> file and include the following code:</p> <div id="crayon-574609efc2e5e198933204" class="crayon-syntax crayon-theme-github crayon-font-monaco crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover"> <div class="crayon-toolbar" data-settings=" show"><span class="crayon-title">app/main-page.js</span> <div class="crayon-tools"> <div class="crayon-button crayon-popup-button" title="Open Code In New Window"></div> <p><span class="crayon-language">JavaScript</span></p> </div> </div> <div class="crayon-plain-wrap"></div> <div class="crayon-main"> <table class="crayon-table"> <tbody> <tr class="crayon-row"> <td class="crayon-nums" data-settings="show"> <div class="crayon-nums-content"> <div class="crayon-num" data-line="crayon-574609efc2e5e198933204-1">1</div> <div class="crayon-num crayon-striped-num" data-line="crayon-574609efc2e5e198933204-2">2</div> <div class="crayon-num" data-line="crayon-574609efc2e5e198933204-3">3</div> <div class="crayon-num crayon-striped-num" data-line="crayon-574609efc2e5e198933204-4">4</div> <div class="crayon-num" data-line="crayon-574609efc2e5e198933204-5">5</div> <div class="crayon-num crayon-striped-num" data-line="crayon-574609efc2e5e198933204-6">6</div> <div class="crayon-num" data-line="crayon-574609efc2e5e198933204-7">7</div> <div class="crayon-num crayon-striped-num" data-line="crayon-574609efc2e5e198933204-8">8</div> <div class="crayon-num" data-line="crayon-574609efc2e5e198933204-9">9</div> <div class="crayon-num crayon-striped-num" data-line="crayon-574609efc2e5e198933204-10">10</div> <div class="crayon-num" data-line="crayon-574609efc2e5e198933204-11">11</div> <div class="crayon-num crayon-striped-num" data-line="crayon-574609efc2e5e198933204-12">12</div> <div class="crayon-num" data-line="crayon-574609efc2e5e198933204-13">13</div> </div> </td> <td class="crayon-code"> <div class="crayon-pre"> <div id="crayon-574609efc2e5e198933204-1" class="crayon-line"><span class="crayon-t">var</span> <span class="crayon-v">createViewModel</span> <span class="crayon-o">=</span> <span class="crayon-e">require</span><span class="crayon-sy">(</span><span class="crayon-s">“./main-view-model”</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-v">createViewModel</span><span class="crayon-sy">;</span></div> <div id="crayon-574609efc2e5e198933204-2" class="crayon-line crayon-striped-line"><span class="crayon-t">var</span> <span class="crayon-v">LocalNotifications</span> <span class="crayon-o">=</span> <span class="crayon-e">require</span><span class="crayon-sy">(</span><span class="crayon-s">“nativescript-local-notifications”</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div> <div id="crayon-574609efc2e5e198933204-3" class="crayon-line"></div> <div id="crayon-574609efc2e5e198933204-4" class="crayon-line crayon-striped-line"><span class="crayon-t">function</span> <span class="crayon-e">onNavigatingTo</span><span class="crayon-sy">(</span><span class="crayon-v">args</span><span class="crayon-sy">)</span> <span class="crayon-sy">{</span></div> <div id="crayon-574609efc2e5e198933204-5" class="crayon-line"><span class="crayon-h">    </span><span class="crayon-t">var</span> <span class="crayon-v">page</span> <span class="crayon-o">=</span> <span class="crayon-v">args</span><span class="crayon-sy">.</span><span class="crayon-t">object</span><span class="crayon-sy">;</span></div> <div id="crayon-574609efc2e5e198933204-6" class="crayon-line crayon-striped-line"><span class="crayon-h">    </span><span class="crayon-v">LocalNotifications</span><span class="crayon-sy">.</span><span class="crayon-e">requestPermission</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-st">then</span><span class="crayon-sy">(</span><span class="crayon-sy">(</span><span class="crayon-v">granted</span><span class="crayon-sy">)</span> <span class="crayon-o">=</span><span class="crayon-o">></span> <span class="crayon-sy">{</span></div> <div id="crayon-574609efc2e5e198933204-7" class="crayon-line"><span class="crayon-h">        </span><span class="crayon-st">if</span><span class="crayon-sy">(</span><span class="crayon-v">granted</span><span class="crayon-sy">)</span> <span class="crayon-sy">{</span></div> <div id="crayon-574609efc2e5e198933204-8" class="crayon-line crayon-striped-line"><span class="crayon-h">            </span><span class="crayon-v">page</span><span class="crayon-sy">.</span><span class="crayon-v">bindingContext</span> <span class="crayon-o">=</span> <span class="crayon-e">createViewModel</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div> <div id="crayon-574609efc2e5e198933204-9" class="crayon-line"><span class="crayon-h">        </span><span class="crayon-sy">}</span></div> <div id="crayon-574609efc2e5e198933204-10" class="crayon-line crayon-striped-line"><span class="crayon-h">    </span><span class="crayon-sy">}</span><span class="crayon-sy">)</span></div> <div id="crayon-574609efc2e5e198933204-11" class="crayon-line"><span class="crayon-sy">}</span></div> <div id="crayon-574609efc2e5e198933204-12" class="crayon-line crayon-striped-line"></div> <div id="crayon-574609efc2e5e198933204-13" class="crayon-line"><span class="crayon-v">exports</span><span class="crayon-sy">.</span><span class="crayon-v">onNavigatingTo</span> <span class="crayon-o">=</span> <span class="crayon-v">onNavigatingTo</span><span class="crayon-sy">;</span></div> </div> </td> </tr> </tbody> </table> </div> </div> <p>For iOS you must first ask for permission to use notifications.  Before loading the view model that we created previously, we attempt to grant permission.  If permission is granted we can proceed as normal.  This all happens when the page loads, or in this case the page was navigated to.</p> <p>Finally we can look at the UI file.  Let’s modify our user interface by making the project’s <strong>app/main-page.xml</strong> file look like the following:</p> <div id="crayon-574609efc2e64067960871" class="crayon-syntax crayon-theme-github crayon-font-monaco crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover"> <div class="crayon-toolbar" data-settings=" show"><span class="crayon-title">app/main-page.xml</span> <div class="crayon-tools"> <div class="crayon-button crayon-popup-button" title="Open Code In New Window"></div> <p><span class="crayon-language">JavaScript</span></p> </div> </div> <div class="crayon-plain-wrap"></div> <div class="crayon-main"> <table class="crayon-table"> <tbody> <tr class="crayon-row"> <td class="crayon-nums" data-settings="show"> <div class="crayon-nums-content"> <div class="crayon-num" data-line="crayon-574609efc2e64067960871-1">1</div> <div class="crayon-num crayon-striped-num" data-line="crayon-574609efc2e64067960871-2">2</div> <div class="crayon-num" data-line="crayon-574609efc2e64067960871-3">3</div> <div class="crayon-num crayon-striped-num" data-line="crayon-574609efc2e64067960871-4">4</div> <div class="crayon-num" data-line="crayon-574609efc2e64067960871-5">5</div> <div class="crayon-num crayon-striped-num" data-line="crayon-574609efc2e64067960871-6">6</div> <div class="crayon-num" data-line="crayon-574609efc2e64067960871-7">7</div> <div class="crayon-num crayon-striped-num" data-line="crayon-574609efc2e64067960871-8">8</div> <div class="crayon-num" data-line="crayon-574609efc2e64067960871-9">9</div> <div class="crayon-num crayon-striped-num" data-line="crayon-574609efc2e64067960871-10">10</div> <div class="crayon-num" data-line="crayon-574609efc2e64067960871-11">11</div> </div> </td> <td class="crayon-code"> <div class="crayon-pre"> <div id="crayon-574609efc2e64067960871-1" class="crayon-line"><span class="crayon-o"><</span><span class="crayon-e">Page</span> <span class="crayon-e">xmlns</span><span class="crayon-o">=</span><span class="crayon-s">“http://bit.ly/1sQrXxj;</span> <span class="crayon-e">navigatingTo</span><span class="crayon-o">=</span><span class="crayon-s">“onNavigatingTo”</span><span class="crayon-o">></span></div> <div id="crayon-574609efc2e64067960871-2" class="crayon-line crayon-striped-line"><span class="crayon-h">    </span><span class="crayon-o"><</span><span class="crayon-v">StackLayout</span><span class="crayon-o">></span></div> <div id="crayon-574609efc2e64067960871-3" class="crayon-line"><span class="crayon-h">        </span><span class="crayon-o"><</span><span class="crayon-e">TextField</span> <span class="crayon-e">id</span><span class="crayon-o">=</span><span class="crayon-s">“id”</span> <span class="crayon-e">hint</span><span class="crayon-o">=</span><span class="crayon-s">“Numeric ID”</span> <span class="crayon-e">text</span><span class="crayon-o">=</span><span class="crayon-s">“”</span> <span class="crayon-o">/</span><span class="crayon-o">></span></div> <div id="crayon-574609efc2e64067960871-4" class="crayon-line crayon-striped-line"><span class="crayon-h">        </span><span class="crayon-o"><</span><span class="crayon-e">TextField</span> <span class="crayon-e">id</span><span class="crayon-o">=</span><span class="crayon-s">“title”</span> <span class="crayon-e">hint</span><span class="crayon-o">=</span><span class="crayon-s">“title”</span> <span class="crayon-e">text</span><span class="crayon-o">=</span><span class="crayon-s">“”</span> <span class="crayon-o">/</span><span class="crayon-o">></span></div> <div id="crayon-574609efc2e64067960871-5" class="crayon-line"><span class="crayon-h">        </span><span class="crayon-o"><</span><span class="crayon-e">TextView</span> <span class="crayon-e">id</span><span class="crayon-o">=</span><span class="crayon-s">“body”</span> <span class="crayon-e">hint</span><span class="crayon-o">=</span><span class="crayon-s">“body”</span> <span class="crayon-e">text</span><span class="crayon-o">=</span><span class="crayon-s">“”</span> <span class="crayon-o">/</span><span class="crayon-o">></span></div> <div id="crayon-574609efc2e64067960871-6" class="crayon-line crayon-striped-line"><span class="crayon-h">        </span><span class="crayon-o"><</span><span class="crayon-e">TextView</span> <span class="crayon-e">id</span><span class="crayon-o">=</span><span class="crayon-s">“ticker”</span> <span class="crayon-e">hint</span><span class="crayon-o">=</span><span class="crayon-s">“ticker”</span> <span class="crayon-e">text</span><span class="crayon-o">=</span><span class="crayon-s">“”</span> <span class="crayon-o">/</span><span class="crayon-o">></span></div> <div id="crayon-574609efc2e64067960871-7" class="crayon-line"><span class="crayon-h">        </span><span class="crayon-o"><</span><span class="crayon-e">StackLayout</span> <span class="crayon-e">orientation</span><span class="crayon-o">=</span><span class="crayon-s">“horizontal”</span><span class="crayon-o">></span></div> <div id="crayon-574609efc2e64067960871-8" class="crayon-line crayon-striped-line"><span class="crayon-h">            </span><span class="crayon-o"><</span><span class="crayon-r">Button</span> <span class="crayon-e">text</span><span class="crayon-o">=</span><span class="crayon-s">“Schedule”</span> <span class="crayon-e">tap</span><span class="crayon-o">=</span><span class="crayon-s">“”</span> <span class="crayon-c">/></span></div> <div id="crayon-574609efc2e64067960871-9" class="crayon-line"><span class="crayon-c">        </S</span><span class="crayon-v">tackLayout</span><span class="crayon-o">></span></div> <div id="crayon-574609efc2e64067960871-10" class="crayon-line crayon-striped-line"><span class="crayon-h">    </span><span class="crayon-o"><</span><span class="crayon-o">/</span><span class="crayon-v">StackLayout</span><span class="crayon-o">></span></div> <div id="crayon-574609efc2e64067960871-11" class="crayon-line"><span class="crayon-o"><</span><span class="crayon-o">/</span><span class="crayon-v">Page</span><span class="crayon-o">></span></div> </div> </td> </tr> </tbody> </table> </div> </div> <p>We have a basic form above.  There are four text fields, two of which are for multiple lines of text.  The <code>text</code>properties use the variables that we bound in the view model file.  The <code>button</code> also uses the function that we created in the view model.</p> <p>At this point we should be good to go!</p> <p>If you schedule a notification, you can close the application and it will still show at the scheduled time.  In iOS, the notification will show regardless if the application is in the foreground or background.</p> <h2>Conclusion</h2> <p>You just saw how to make use of local notifications, not to be confused with push notifications.  These notifications have zero dependence on a remote service and can be seen while the application is in the background.</p> <p>A video version of this article can be seen below.</p> <p><iframe width="678" height="381" src="https://www.youtube.com/embed/5XQvzBQkq2g?feature=oembed" frameborder="0" allowfullscreen=""></iframe></p> <p> </p> <div id="huge-it-share-buttons-top" class="huge-it-share-buttons nobackground"> <h3>Share This:</h3> <ul class="huge-it-share-buttons-list"> <li class=" nobackground"><a href="http://bit.ly/1XReO0c" id="backforunical724" name="backforunical724" onclick="javascript:void window.open('http://bit.ly/1XReO0c','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -0px -120px" target="_blank"></a></li> <li class=" nobackground"><a href="https://twitter.com/share?status=http://yoursmart.mobi/feed&text=Using%20Local%20Notifications%20In%20Your%20NativeScript%20Mobile%20App" id="backforunical724" name="backforunical724" onclick="javascript:void window.open('https://twitter.com/share?status=http://yoursmart.mobi/feed&text=Using Local Notifications In Your NativeScript Mobile App','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -30px -120px" target="_blank"></a></li> <li class=" nobackground"><a href="http://bit.ly/1qK4fkd%20Local%20Notifications%20In%20Your%20NativeScript%20Mobile%20App" id="backforunical724" name="backforunical724" onclick="javascript:void window.open('http://bit.ly/1qK4fkd Local Notifications In Your NativeScript Mobile App','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -60px -120px" target="_blank"></a></li> <li class=" nobackground"><a href="http://bit.ly/1XReO0d" id="backforunical724" name="backforunical724" onclick="javascript:void window.open('http://bit.ly/1XReO0d','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -90px -120px" target="_blank"></a></li> <li class=" nobackground"><a href="http://bit.ly/1sQrvzd%20Local%20Notifications%20In%20Your%20NativeScript%20Mobile%20App&mini=true&url=http://bit.ly/1XReO0g" id="backforunical724" name="backforunical724" onclick="javascript:void window.open('http://bit.ly/1sQrvzd Local Notifications In Your NativeScript Mobile App&mini=true&url=http://bit.ly/1XReO0g','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -120px -120px" target="_blank"></a></li> <li class=" nobackground"><a href="http://bit.ly/1qK4snL%20Local%20Notifications%20In%20Your%20NativeScript%20Mobile%20App" id="backforunical724" name="backforunical724" onclick="javascript:void window.open('http://bit.ly/1qK4snL Local Notifications In Your NativeScript Mobile App','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -150px -120px" target="_blank"></a></li> <li class=" nobackground"><a href="http://di.gg/1sQrSK4%20Local%20Notifications%20In%20Your%20NativeScript%20Mobile%20App" id="backforunical724" name="backforunical724" onclick="javascript:void window.open('http://di.gg/1sQrSK4 Local Notifications In Your NativeScript Mobile App','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -180px -120px" target="_blank"></a></li> <li class=" nobackground"><a href="http://stumble.it/1qK4njO%20Local%20Notifications%20In%20Your%20NativeScript%20Mobile%20App" id="backforunical724" name="backforunical724" onclick="javascript:void window.open('http://stumble.it/1qK4njO Local Notifications In Your NativeScript Mobile App','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -210px -120px" target="_blank"></a></li> <li class=" nobackground"><a href="http://bit.ly/1XReO0l" id="backforunical724" name="backforunical724" onclick="javascript:void window.open('http://bit.ly/1XReO0l','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -240px -120px" target="_blank"></a></li> <li class="none nobackground"><a href="http://bit.ly/1sQrHOO%20Local%20Notifications%20In%20Your%20NativeScript%20Mobile%20App" id="backforunical724" name="backforunical724" onclick="javascript:void window.open('http://bit.ly/1sQrHOO Local Notifications In Your NativeScript Mobile App','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -270px -120px" target="_blank"></a></li> <li class="none nobackground"><a href="http://bit.ly/1qK4ewQ%20Local%20Notifications%20In%20Your%20NativeScript%20Mobile%20App" id="backforunical724" name="backforunical724" onclick="javascript:void window.open('http://bit.ly/1qK4ewQ Local Notifications In Your NativeScript Mobile App','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -300px -120px" target="_blank"></a></li> <li class="none nobackground"><a href="http://bit.ly/1VNpzTU" id="backforunical724" name="backforunical724" onclick="javascript:void window.open('http://bit.ly/1VNpzTU','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -330px -120px" target="_blank"></a></li> <li class="none nobackground"><a href="http://bit.ly/1sQryLh%20Local%20Notifications%20In%20Your%20NativeScript%20Mobile%20App" id="backforunical724" name="backforunical724" onclick="javascript:void window.open('http://bit.ly/1sQryLh Local Notifications In Your NativeScript Mobile App','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -360px -120px" target="_blank"></a></li> <li class="none nobackground"><a href="http://bit.ly/1VNpzTX" id="backforunical724" name="backforunical724" onclick="javascript:void window.open('http://bit.ly/1VNpzTX','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -390px -120px" target="_blank"></a></li> <li class="none nobackground"><a href="http://bit.ly/1qK4prT%20Local%20Notifications%20In%20Your%20NativeScript%20Mobile%20App" id="backforunical724" name="backforunical724" onclick="javascript:void window.open('http://bit.ly/1qK4prT Local Notifications In Your NativeScript Mobile App','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -420px -120px" target="_blank"></a></li> <li class="none nobackground"><a href="http://bit.ly/1sQrqvq%20Local%20Notifications%20In%20Your%20NativeScript%20Mobile%20App&pic=&ralateUid=&" id="backforunical724" name="backforunical724" onclick="javascript:void window.open('http://bit.ly/1sQrqvq Local Notifications In Your NativeScript Mobile App&pic=&ralateUid=&','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -450px -120px" target="_blank"></a></li> <li class="none nobackground"><a href="http://bit.ly/1qK4j3F%20Local%20Notifications%20In%20Your%20NativeScript%20Mobile%20App" id="backforunical724" name="backforunical724" onclick="javascript:void window.open('http://bit.ly/1qK4j3F Local Notifications In Your NativeScript Mobile App','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -480px -120px" target="_blank"></a></li> <li class="none nobackground"><a href="http://bit.ly/1sQroUl%20Local%20Notifications%20In%20Your%20NativeScript%20Mobile%20App" id="backforunical724" name="backforunical724" onclick="javascript:void window.open('http://bit.ly/1sQroUl Local Notifications In Your NativeScript Mobile App','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -510px -120px" target="_blank"></a></li> </ul> <div class="clear"></div> </div> View more at: <a href="http://bit.ly/1XReQFr">http://bit.ly/1XReQFr</a>

Using Local Notifications In Your NativeScript Mobile App

When developing mobile apps, at some point in time you may find yourself needing to show a background notification to your users.  There are...

Read more »