NativeScript Notification - txgz999/Mobile GitHub Wiki

Local Notification

Install the nativescript-local-notifications plugin from https://github.com/EddyVerbruggen/nativescript-local-notifications to support local notification

tns plugin add nativescript-local-notifications

items.component.html

<StackLayout>
    <Button (tap)="schedule()" text="Schedule"></Button>
</StackLayout>

items.component.ts

import { LocalNotifications } from "nativescript-local-notifications";
    schedule(): void {
        LocalNotifications.schedule(
            [{
                title: 'Greeting',
                body: 'Hello World'
            }])
            .catch(error => console.log("Send local notification error: " + error));
    }

There are many options we can set in LocalNotifications.schedule call

  • id
  • title: which is the content title in Android
  • body: which is the content text in Android
  • subtitle: which is the sub text in Android
  • channel：in Native Android app, this is required to set for newer devices. But it is optional here, because this plugin creates a channel named Channel with high importance. If this option is not set, the notifications belong to that default channel
  • silhouette icon: which is the small icon in Android for newer device. Default name: res://ic_stat_notify_silhouette
  • icon: which is the small icon in Android for older device. Default name: res://ic_stat_notify
  • color: which is the color of the small icon
  • bigTextStyle: which is the big text style in Android. When set to true, allow content text to be displayed in multiple lines
  • image: which is the big picture in Android. This option implies to use the big picture style
  • thumbnail: which is basically the large icon in Android. It can be a resource url or a http url. Then it appears in both the collapsed view and the expanded view if exists. It can also be can set to just true to make the large icon to be the thumbnail of the big picture, i.e. in the collapsed view, the large icon displays the image in the image option, and disappears in the expanded view
  • sound
  • at: if this value is not set, the notification appears immediately once received. We can use this option to send notification at time specified in this option
  • actions
  • ongoing: user can dismiss a notification by swiping it left or right in the notification drawer unless this option is set to true. Ongoing notification can be dismissed only by the app

The following options makes no difference on my Android emulator

  • ticker
  • badge
  • forceShowWhenInForeground
  • priority

Although the demo app of this plugin contains sample icon and silhouette icon of the default name, the ng template does not include these icons. We can download them from
https://github.com/EddyVerbruggen/nativescript-local-notifications/tree/master/demo/app/App_Resources/Android/src/main/res/drawable-mdpi.

A notification may appear in several places

  • as a popup, called head-up message. That box shows the title and body. The body shows up in one line even there if bigTextStyle is set to true. While that popup is displayed on screen, the static bar displays the silhouette icon and the app name. If user clicks it before it disappears, it disappears and the main activity of the app would appear. This notification does not go to the notification drawer
  • if user does not click it and it disappears by itself, then the status bar would display the silhouette icon of the notification
  • when user clicks that silhouette icon, the icon turn to the color specified for the notification. the notification drawer would appear. This notification appears as an entry there, which may contain the following contents from top to bottom. Once the item is clicked, it disappears from the notification drawer, and user is taken to the main activity of the app
    1. The top part contains icon with color if specified, then app name, then subtitle of provided, then time passed since receiving this notification (e.g. now, 2m)
    2. The second part displays the title
    3. The third part contains body, which can take multiple lines if the bigTextStyle option is set to true (default is false)
    4. The fourth part contains image, it only appear when bigTextStyle is not set to true
    5. The fifth part contains a list of actions
  • in the content menu when user long presses the app icon

Based on the behavior of this function, it seems to me that

  • the default channel, named Channel, is created with high importance
  • the auto-cancel option, which determines if the notification is automatically dismissed when user clicks it in the notification drawer, is set to true, and user cannot change it
  • this function uses standard template, big text template, or big picture template, based on values user passed. There is no way to use decorated layouts or custom layouts
  • Native Android notification feature only supports icon and image from local resources, but this plugin can get icon and image from Internet
  • Native Android notification feature sends notification immediately, but this plugin supports delay of sending
⚠️ **GitHub.com Fallback** ⚠️