- 版本:4.2.1
- GitHub: https://github.com/eddyverbruggen/nativescript-local-notifications
- NPM: https://npmjs.net.cn/package/nativescript-local-notifications
- 下载
- 昨日: 3
- 上周: 21
- 上个月: 252
NativeScript 本地通知插件
本地通知插件允许您的应用在应用未运行时显示通知。就像远程推送通知一样,但设置起来要简单得多。
⚠️ 插件版本 4.0.0 应与 NativeScript 6+ 一起使用。如果您有较老的
tns --version
,请使用较老的插件版本。
安装
从命令提示符转到您的应用根文件夹并执行
tns plugin add nativescript-local-notifications
设置(自插件版本 3.0.0 起使用)
添加此代码,以便对于 iOS 10+ 我们可以进行一些连接(设置 iOS UNUserNotificationCenter.delegate
,更确切地说)。如果您的应用在启动时已加载插件,则不需要此代码。
如果 iOS 10+ 上的通知没有被您的应用接收或 addOnMessageReceivedCallback
未被调用,您将知道需要此代码...尽管如此,安全总是好的!
require ("nativescript-local-notifications");
现在您可以将插件作为对象导入到您的 .ts
文件中,如下所示
// either
import { LocalNotifications } from "nativescript-local-notifications";
// or (if that doesn't work for you)
import * as LocalNotifications from "nativescript-local-notifications";
// then use it as:
LocalNotifications.hasPermission()
示例应用
NativeScript-Core (XML)
这个示例具有最多的选项,因此是值得检查的一个
git clone https://github.com/EddyVerbruggen/nativescript-local-notifications
cd nativescript-local-notifications/src
npm run demo.ios # or demo.android
NativeScript-Angular
此插件是我在 Angular 中构建的 插件展示应用 的一部分。
此存储库中还有一个简单的 Angular 示例
git clone https://github.com/EddyVerbruggen/nativescript-local-notifications
cd nativescript-local-notifications/src
npm run demo-ng.ios # or demo-ng.android
NativeScript-Vue
我们还有一个 Vue 示例
git clone https://github.com/EddyVerbruggen/nativescript-local-notifications
cd nativescript-local-notifications/src
npm run demo-vue.ios # or demo-vue.android
插件 API
schedule
在 iOS 上,您需要请求权限才能安排通知。您可以让 schedule
函数为您自动执行此操作(如果用户授予了权限,则将安排通知),或者如果您愿意,可以手动调用 requestPermission
。
您可以向此函数传递多个选项,所有选项都是可选的
选项 | 描述 |
---|---|
id |
一个数字,您可以轻松地区分您的通知。如果没有设置,将生成。 |
title |
显示在状态栏中的标题。默认未设置。 |
subtitle |
在 iOS 上显示在标题下方,在 Android 上显示在应用名称旁边。默认未设置。仅适用于 Android 和 iOS >= 10。 |
body |
标题下的文本。如果没有提供,iOS 上将使用标题或副标题(按此顺序或优先级)替换它,因为 iOS 不会显示没有主体的通知。在 Android 上默认未设置,在 iOS 上为 ' ' ,否则通知将不会显示。 |
color |
为通知图标和标题提供自定义颜色,当通知中心展开时将应用此颜色。(仅限 Android) |
bigTextStyle |
允许在通知中心显示多行正文文本。与 image 互斥。默认为 false 。(仅限 Android) |
groupedMessages |
最多包含5条消息的数组,这些消息将使用Android的inboxStyle显示。注意:如果消息超过五条,数组将从顶部截断。默认未设置 |
groupSummary |
inboxStyle通知摘要。默认为空 |
ticker |
在Android上,您可以在状态栏显示与body 不同的文本,而不是body 。默认未设置,因此使用body 。 |
at |
一个JavaScript Date对象,表示通知应显示的时间。默认未设置(通知将立即显示)。 |
badge |
在iOS(以及一些Android设备)上,您在应用图标顶部看到一个数字。在大多数Android设备上,您会在通知中心看到这个数字。默认未设置(0)。 |
sound |
通知声音。对于自定义通知声音(仅iOS),将文件复制到App_Resources/iOS 。设置为“default”(或根本不设置)以使用默认操作系统声音。设置为null 以禁用声音。 |
interval |
如果您想要一个重复的通知,请将此设置为second 、minute 、hour 、day 、week 、month 或year 之一。 |
icon |
在Android上,您可以在系统托盘设置自定义图标。传递res://filename (不带扩展名),它位于App_Resouces/Android/drawable 文件夹中。如果没有传递,我们将寻找名为ic_stat_notify.png 的文件。默认情况下,使用应用图标。仅适用于Android < Lollipop(21)。(请参阅下方的silhouetteIcon )。 |
silhouetteIcon |
与icon 相同,但适用于Android >= Lollipop(21)。应仅包含alpha通道的图像。默认为res://ic_stat_notify_silhouette ,如果不存在,则使用应用图标。 |
image |
作为可展开通知图像使用的图像的URL(http.. )。在Android上,这与bigTextStyle 互斥。 |
thumbnail |
自定义缩略图/图标,用于在Android通知中心(右侧)显示(仅限Android)。可以是以下之一:true (如果您想使用image 作为缩略图)、资源URL(位于App_Resouces/Android/drawable 文件夹中,例如:res://filename ),或来自网络任何地方的http URL。(仅限Android)。默认未设置。 |
ongoing |
默认为(false )。设置此为ongoing 通知。持续通知不能被用户取消,因此您的应用必须负责取消它们。(仅限Android) |
channel |
默认为(Channel )。设置Android API >= 26的频道名称,当用户长按通知时显示。(仅限Android) |
forceShowWhenInForeground |
默认为false 。设置为true 以始终显示通知。请注意,在iOS < 10上此将被忽略(通知不会显示),在较新的Android上目前也被忽略(通知始终显示,根据平台默认设置)。 |
priority |
默认为0 。如果设置,将覆盖forceShowWhenInForeground 。可以设置为2 以进行Android“heads-up”通知。请参阅#114以获取详细信息。 |
actions |
添加一个NotificationAction 对象数组(见下文),以向通知添加按钮或文本输入。 |
notificationLed |
在Android上启用通知LED灯(如果设备支持),可以是以下之一:true (如果您想使用默认颜色),或通知LED灯的自定义颜色(如果设备支持)。(仅限Android)。默认未设置。 |
NotificationAction
选项 | 描述 |
---|---|
id |
一个id,以便您可以轻松地区分您的操作。 |
type |
可以是button 或input 。 |
title |
当type 为button 时的标签。 |
launch |
当操作完成时启动应用。 |
submitLabel |
类型为 input 的提交按钮标签。 |
占位符 |
类型为 input 的占位符文本。 |
LocalNotifications.schedule([{
id: 1, // generated id if not set
title: 'The title',
body: 'Recurs every minute until cancelled',
ticker: 'The ticker',
color: new Color("red"),
badge: 1,
groupedMessages:["The first", "Second", "Keep going", "one more..", "OK Stop"], //android only
groupSummary:"Summary of the grouped messages above", //android only
ongoing: 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 Android
at: new Date(new Date().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);
}
)
通知图标(Android)
这些选项默认为 res://ic_stat_notify
和 res://ic_stat_notify_silhouette
,如果没有则使用应用图标。
silhouetteIcon
应该是一个仅包含 alpha 通道的图像,并在 Android >= Lollipop (21) 中使用。
这些是官方图标大小指南,这里有一个关于如何在 Android 上轻松创建这些图标的指南。
密度限定符 | 像素 | dpi |
---|---|---|
ldpi | 18 × 18 | 120 |
mdpi | 24 × 24 | 160 |
hdpi | 36 × 36 | 240 |
xhdpi | 48 × 48 | 320 |
xxhdpi | 72 × 72 | 480 |
xxxhdpi | 96 × 96 | 大约 640 |
来源: 密度限定符文档
addOnMessageReceivedCallback
在通知中心点击通知会启动您的应用。但如果您安排了两个通知,您想知道用户点击的是哪一个呢?
使用此功能,当通知用于启动您的应用时,将调用回调。请注意,在 iOS 上,即使您的应用在前台运行且收到通知,它也会被触发。
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
如果您想了解所有已安排的通知的 ID,请这样做
请注意,所有函数都有错误处理程序(参见 schedule
),但我们不会重复这些内容以保持可读性。
LocalNotifications.getScheduledIds().then(
function(ids) {
console.log("ID's: " + ids);
}
)
cancel
如果您想取消之前安排的通知(并且知道其 ID),您可以取消它
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
如果您只想取消之前安排的所有通知,请这样做
LocalNotifications.cancelAll();
requestPermission
在 Android 上,您不需要权限,但在 iOS 上则需要。Android 将简单地返回 true。
如果之前运行了 requestPermission
或 schedule
函数,则用户已经被告知授予权限。如果用户授予了权限,此函数返回 true
,但如果用户拒绝了权限,此函数将返回 false
,因为 iOS 只能请求权限一次。在这种情况下,用户需要前往 iOS 设置应用并手动启用应用的权限。
LocalNotifications.requestPermission().then(
function(granted) {
console.log("Permission granted? " + granted);
}
)
hasPermission
在 Android 上,您不需要权限,但在 iOS 上则需要。Android 将简单地返回 true。
如果之前运行了 requestPermission
或 schedule
函数,您可能想检查用户是否已授予权限
LocalNotifications.hasPermission().then(
function(granted) {
console.log("Permission granted? " + granted);
}
)