Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

📫 NativeScript plugin to easily schedule local notifications

License

NotificationsYou must be signed in to change notification settings

NativeScript/nativescript-local-notifications

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

NPM versionDownloadsTwitter Follow

The Local Notifications plugin allows your app to show notifications when the app is not running.Just like remote push notifications, but a few orders of magnitude easier to set up.

⚠️ Plugin version 4.0.0 should be used with NativeScript 6+. If you have an oldertns --version, please use an older plugin version.

Installation

From the command prompt go to your app's root folder and execute:

tns plugin add nativescript-local-notifications

Setup (since plugin version 3.0.0)

Add this so for iOS 10+ we can do some wiring (set the iOSUNUserNotificationCenter.delegate, to be precise).Not needed if your app loads the plugin on startup anyway.

You'll know you need this if on iOS 10+ notifications are not received by your app oraddOnMessageReceivedCallback is not invoked... better safe than sorry, though!

require("nativescript-local-notifications");

Now you can import the plugin as an object into your.ts file as follows:

// eitherimport{LocalNotifications}from"nativescript-local-notifications";// or (if that doesn't work for you)import*asLocalNotificationsfrom"nativescript-local-notifications";// then use it as:LocalNotifications.hasPermission()

Demo apps

NativeScript-Core (XML)

This demo is the one with the most options, so it's a cool one to check out:

git clone https://github.com/EddyVerbruggen/nativescript-local-notificationscd nativescript-local-notifications/srcnpm run demo.ios# or demo.android

NativeScript-Angular

This plugin is part of theplugin showcase app I built using Angular.

There's also a simple Angulardemo in this repo:

git clone https://github.com/EddyVerbruggen/nativescript-local-notificationscd nativescript-local-notifications/srcnpm run demo-ng.ios# or demo-ng.android

NativeScript-Vue

We also have aVue demo:

git clone https://github.com/EddyVerbruggen/nativescript-local-notificationscd nativescript-local-notifications/srcnpm run demo-vue.ios# or demo-vue.android

Plugin API

schedule

On iOS you need to ask permission to schedule a notification.You can have theschedule funtion do that for you automatically (the notification will be scheduled in case the user granted permission),or you can manually invokerequestPermission if that's your thing.

You can pass several options to this function, everything is optional:

optiondescription
idA number so you can easily distinguish your notifications. Will be generated if not set.
titleThe title which is shown in the statusbar. Default not set.
subtitleShown below the title on iOS, and next to the App name on Android. Default not set. All android and iOS >= 10 only.
bodyThe text below the title. If not provided, the subtitle or title (in this order or priority) will be swapped for it on iOS, as iOS won't display notifications without a body. Default not set on Android,' ' on iOS, as otherwise the notification won't show up at all.
colorCustom color for the notification icon and title that will be applied when the notification center is expanded. (Android Only)
bigTextStyleAllow more than 1 line of the body text to show in the notification centre. Mutually exclusive withimage. Defaultfalse. (Android Only)
groupedMessagesAn array of atmost 5 messages that would be displayed using android's notificationinboxStyle. Note: The array would be trimed from the top if the messages exceed five. Default not set
groupSummaryAninboxStyle notification summary. Default empty
tickerOn Android you can show a different text in the statusbar, instead of thebody. Default not set, sobody is used.
atA JavaScript Date object indicating when the notification should be shown. Default not set (the notification will be shown immediately).
badgeOn iOS (and some Android devices) you see a number on top of the app icon. On most Android devices you'll see this number in the notification center. Default not set (0).
soundNotification sound. For custom notification sound (iOS only), copy the file toApp_Resources/iOS. Set this to "default" (or do not set at all) in order to use default OS sound. Set this tonull to suppress sound.
intervalSet to one ofsecond,minute,hour,day,week,month,year if you want a recurring notification.
iconOn Android you can set a custom icon in the system tray. Pass inres://filename (without the extension) which lives inApp_Resouces/Android/drawable folders. If not passed, we'll look there for a file namedic_stat_notify.png. By default the app icon is used. Android < Lollipop (21) only (seesilhouetteIcon below).
silhouetteIconSame asicon, but for Android >= Lollipop (21). Should be an alpha-only image. Defaults tores://ic_stat_notify_silhouette, or the app icon if not present.
imageURL (http..) of the image to use as an expandable notification image. On Android this is mutually exclusive withbigTextStyle.
thumbnailCustom thumbnail/icon to show in the notification center (to the right) on Android, this can be either:true (if you want to use theimage as the thumbnail), a resource URL (that lives in theApp_Resouces/Android/drawable folders, e.g.:res://filename), or a http URL from anywhere on the web. (Android Only). Default not set.
ongoingDefault is (false). Set whether this is anongoing notification. Ongoing notifications cannot be dismissed by the user, so your application must take care of canceling them. (Android Only)
channelDefault is (Channel). Set the channel name for Android API >= 26, which is shown when the user longpresses a notification. (Android Only)
forceShowWhenInForegroundDefault isfalse. Set totrue to always show the notification. Note that on iOS < 10 this is ignored (the notification is not shown), and on newer Androids it's currently ignored as well (the notification always shows, per platform default).
priorityDefault is0. Will overrideforceShowWhenInForeground if set. This can be set to2 for Android "heads-up" notifications. See#114 for details.
actionsAdd an array ofNotificationAction objects (see below) to add buttons or text input to a notification.
notificationLedEnable the notification LED light on Android (if supported by the device), this can be either:true (if you want to use the default color), or a custom color for the notification LED light (if supported by the device). (Android Only). Default not set.

NotificationAction

optiondescription
idAn id so you can easily distinguish your actions.
typeEitherbutton orinput.
titleThe label fortype =button.
launchLaunch the app when the action completes.
submitLabelThe submit button label fortype =input.
placeholderThe placeholder text fortype =input.
LocalNotifications.schedule([{id:1,// generated id if not settitle:'The title',body:'Recurs every minute until cancelled',ticker:'The ticker',color:newColor("red"),badge:1,groupedMessages:["The first","Second","Keep going","one more..","OK Stop"],//android onlygroupSummary:"Summary of the grouped messages above",//android onlyongoing:true,// makes the notification ongoing (Android only)icon:'res://heart',image:"https://cdn-images-1.medium.com/max/1200/1*c3cQvYJrVezv_Az0CoDcbA.jpeg",thumbnail:true,interval:'minute',channel:'My Channel',// default: 'Channel'sound:"customsound-ios.wav",// falls back to the default sound on Androidat:newDate(newDate().getTime()+(10*1000))// 10 seconds from now}]).then(function(scheduledIds){console.log("Notification id(s) scheduled: "+JSON.stringify(scheduledIds));},function(error){console.log("scheduling error: "+error);})

Notification icons (Android)

These options default tores://ic_stat_notify andres://ic_stat_notify_silhouette respectively, or the app icon if not present.

silhouetteIcon should be an alpha-only image and will be used in Android >= Lollipop (21).

These are the official icon size guidelines,andhere's a great guide on how to easily create these icons on Android.

Density qualifierpxdpi
ldpi18 × 18120
mdpi24 × 24160
hdpi36 × 36240
xhdpi48 × 48320
xxhdpi72 × 72480
xxxhdpi96 × 96640 approx.

Source:Density Qualifier Docs

addOnMessageReceivedCallback

Tapping a notification in the notification center will launch your app.But what if you scheduled two notifications and you want to know which one the user tapped?

Use this function to have a callback invoked when a notification was used to launch your app.Note that on iOS it will even be triggered when your app is in the foreground and a notification is received.

LocalNotifications.addOnMessageReceivedCallback(function(notification){console.log("ID: "+notification.id);console.log("Title: "+notification.title);console.log("Body: "+notification.body);}).then(function(){console.log("Listener added");})

getScheduledIds

If you want to know the ID's of all notifications which have been scheduled, do this:

Note that all functions have an error handler as well (seeschedule), but to keep things readable we won't repeat ourselves.

LocalNotifications.getScheduledIds().then(function(ids){console.log("ID's: "+ids);})

cancel

If you want to cancel a previously scheduled notification (and you know its ID), you can cancel it:

LocalNotifications.cancel(5/* the ID */).then(function(foundAndCanceled){if(foundAndCanceled){console.log("OK, it's gone!");}else{console.log("No ID 5 was scheduled");}})

cancelAll

If you just want to cancel all previously scheduled notifications, do this:

LocalNotifications.cancelAll();

requestPermission

On Android you don't need permission, but on iOS you do. Android will simply return true.

If therequestPermission orschedule function previously ran the user has already been prompted to grant permission.If the user granted permission this function returnstrue, but if he denied permission this function will returnfalse,since an iOS can only request permission once. In which case the user needs to go to the iOS settings app and manuallyenable permissions for your app.

LocalNotifications.requestPermission().then(function(granted){console.log("Permission granted? "+granted);})

hasPermission

On Android you don't need permission, but on iOS you do. Android will simply return true.

If therequestPermission orschedule functions previously ran you may want to check whether or not the user granted permission:

LocalNotifications.hasPermission().then(function(granted){console.log("Permission granted? "+granted);})

About

📫 NativeScript plugin to easily schedule local notifications

Resources

License

Stars

Watchers

Forks

Sponsor this project

  •  

Packages

No packages published

Languages

  • TypeScript39.0%
  • Java32.0%
  • Objective-C22.4%
  • Vue3.2%
  • HTML1.4%
  • Shell1.0%
  • Other1.0%

[8]ページ先頭

©2009-2025 Movatter.jp