Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >Ionic3 本地消息推送

Ionic3 本地消息推送

作者头像
spilledyear
发布于 2018-08-21 06:43:36
发布于 2018-08-21 06:43:36
1K00
代码可运行
举报
文章被收录于专栏:小白鼠小白鼠
运行总次数:0
代码可运行

项目上有一个消息推送的功能,一开始想使用极光推送,在安卓上测试比较顺利,但是IOS上需要什么证书,没有开发者账号,感觉好麻烦。后面就想在每次启动app的时候,本地推送一次消息,碰巧官网上发现了这个插件,de.appplant.cordova.plugin.local-notification。

image.png

安装插件

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
ionic cordova plugin add de.appplant.cordova.plugin.local-notification
npm install --save @ionic-native/local-notifications

安装之后,在app.module.ts中引入provider

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import { LocalNotifications } from '@ionic-native/local-notifications';

image.png

使用说明

image.png

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
  testStatus() {
    this.localNotifications.schedule({
      id: 1,
      title: '筑美通知',
      text: '这是显示通知栏的内容',
      icon: 'http://example.com/icon.png',
      at: new Date(new Date().getTime() + 3000),
    });

    this.localNotifications.on('click', (notification) => {
      alert(JSON.stringify(notification));
    });
  }

//这里选择在应用启动的时候调用发送一条消息,也就是 调用 this.testStatus()方法。 
//如上所示,每条消息可以看成是一个对象,text是内容,title是标题,at表示在通知栏上显示的时间。
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
this.localNotifications.on('click', (notification) => {
  alert(JSON.stringify(notification));
});
//这部分代码表示在通知栏上点击该通知时对应的回调函数,可以此函数中写逻辑功能。

测试结果如下图所示:

点击消息后的效果

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017.11.06 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Ionic3 拍照上传
本文主要介绍使用cordova实现拍照上传,走通 “拍照 》预览 》上传 》 下载 ”这个流程。为了方便查看测试结果,需要了解Ionic应用调试的基本方法,有关于Ionic项目Android 调试的详细教程,请参考以下文章:Ionic3 Android调试
spilledyear
2018/08/21
1.1K0
Ionic3 拍照上传
【技巧】ionic3视频上传
有人问到视频上传这个问题,那我还是写一下吧,其实基本参考《ionic3多文件上传》这文章也行,不过对于单文件上传就不用那么复杂了,步骤如下:
IT晴天
2018/08/20
7740
Ionic3学习笔记(十二)拍照上传图片以及从相册选择图片上传
Ionic Native - Camera GitHub - cordova-plugin-camera Ionic Native - Image Picker GitHub - ImagePicker
Theo Tsao
2018/09/07
1.3K0
cordova实现消息推送(本地通知)
本地通知的基本目的是使应用程序能够通知用户,它为他们提供了一些信息例如,当应用程序没有在前台运行时,通知用户一个消息或即将到来的约会。本地通知大多是基于时间的,如果触发就会在通知中心显示并呈现给用户。
仙士可
2019/12/19
2.8K0
cordova实现消息推送(本地通知)
SNS项目笔记<二>--极光推送
ionic2之后的版本的极光推送在网络上的资料少之又少,经过一番折腾过后,博主选择了官方的API文档。然后根据其所指引的demo进行搭建项目。
stormKid
2018/09/12
1.3K0
SNS项目笔记<二>--极光推送
【技巧】ionic3视频播放
一般视频的展示方式有两种:缩略图和直接播放,分别对应下面两种效果(可参考直播应用和今日头条视频):
IT晴天
2018/08/20
2K0
ionic 中 cordova-plugin-inappbrowser组件的使用
在上一篇文章中(使用Ionic3创建原生app系统入门)介绍了如何使用ionic构建一个Android app 项目,并生成apk安装包。
易兒善
2018/08/21
2.3K0
ionic 中 cordova-plugin-inappbrowser组件的使用
iOS 10 消息推送(UserNotifications)秘籍总结
单独整理消息通知的内容,但是因为工(就)作(是)的(很)事(懒)没有更新文章,违背了自己的学习的初衷。因为互联网一定要有危机意识,说不定眼一睁,我们就欧了 。
java爱好者
2019/06/19
2.8K0
Ionic3学习笔记(六)存储之使用 SQLite
1. 安装 命令行输入 ionic cordova plugin add cordova-sqlite-storage npm install --save @ionic-native/sqlite 在 ./src/app/app.module.ts 中添加 import {SQLite} from "@ionic-native/sqlite"; 在 provides 中添加 SQLite, 2. CURD操作 user.ts export class User { username: str
Theo Tsao
2018/09/07
1.5K1
【技巧】ionic后FileTransfer时代的文件传输
FileTransfer是常用的Codrodva插件之一,在过去的几篇文章中都能看到它的身影:
IT晴天
2018/08/20
1.9K0
ios入门之消息推送
前言 在去年的苹果大会上,苹果带来的iOS 10 系统中将之前繁杂的推送通知统一成UserNotifications.framework 来集中管理和使用通知功能,还增加一些实用的功能——撤回单条通知、更新已展示通知、中途修改通知内容、在通知中显示多媒体资源、自定义UI等功能。 那么在ios10之前,ios的消息推送是怎么分类的呢? ios 10之前 在ios之前,iOS推送分为Local Notifications(本地推送) 和 Remote Notifications(远程推送)。 本地推送 不需
xiangzhihong
2018/02/06
2K0
ios入门之消息推送
【开发指南】(四)Ionic3快速上手并了解这些
Ionic这几个网站是需要经常看的,应该了解过才执行后面步骤,其中强烈要求至少先撸一遍官网的组件和API文档。
IT晴天
2018/08/20
3.3K0
【开发指南】(四)Ionic3快速上手并了解这些
Android开发笔记(一百零四)消息推送SDK
推送:从服务器把消息实时发到客户端app上,这就是推送,推送可用于发送系统通知、发送推荐信息、发送聊天消息等等。 别名:用于给移动设备取个好记的名字,比如电脑有计算机名,可以把别名理解为开发者给移送设备起的外号。不过,多个移动设备可以起一样的别名,这几个设备就会同时收到发给该别名的消息。 标记:用于给移动设备打标签,可以理解为分类,比如超市里的泰国大米既可以打上“粮食制品”的标签,也可以打上“进口商品”的标签。服务器可以统一给某个种类的移动设备发送消息;如果移动设备打上本设备手机号码的标签,那么服务器就能该号码的手机单独发消息。 自定义消息:推送的消息内容一般由sdk直接展示在系统的通知栏,不过有时候我们希望由自己控制展示通知的时机,比如说要预先处理某项事务,或者说以对话框形式展现消息等等,在这些时候,自定义消息就派上用场了,app可以先接收服务器发来的自定义消息,然后自主选择接下来的处理逻辑。
aqi00
2019/01/18
1.6K0
ionic2实现扫描二维码功能
注意使用该插件不能使用 1. 安装插件 // 安装平台插件 ionic cordova plugin add cordova-plugin-qrscanner // 安装ionic2插件 npm install --save @ionic-native/qr-scanner ---- 2.使用插件 1.创建扫描二维码的页面 ionic generate page qrdcan 2.页面跳转到扫码页面 跳转方法 // 跳转扫码页面 goQrdcan(){ this.navCtrl.p
用户1437675
2018/08/20
1.4K0
Ionic 2 应用剖析0 开始之前1 创建一个新的Ionic 2 应用2 目录结构3. Class 定义Root Components 模版App Module总结
0 开始之前 通过本教程之前,您应该至少了解一些基本的Ionic 2概念。您还必须已经安装了Ionic 2 在您的机器上。 1 创建一个新的Ionic 2 应用 我们将使用有Ionic团队创建的tutorial模板,可见于官方教程,来创建我们的应用程序。要做到这一点,您需要运行以下命令: ionic start ionic2-tutorial tutorial --v2 现在您的应用程序将自己开始建立。为运行后续的命令,你应当将项目目录作为当前工作目录: cd ionic2-tutorial 简单瞟一眼应用
孙亖
2018/06/06
4.5K0
CSDN 浏览器推送消息点开后是个js
点击进入后是这么一个内容的js,看起来就是实现推送的代码,留着,以后可能会用到的~
前Thoughtworks-杨焱
2021/12/07
4990
CSDN 浏览器推送消息点开后是个js
【指令篇】键盘附着指令调整软键盘
现在开始实现这个指令,新建指令之前添加Keyboard插件,一般我们的项目默认已经装上了的,我们只需安装相应的ionic-native子模块:
IT晴天
2018/08/20
7350
聊聊HTML5中的Web Notification桌面通知
这种桌面提示是HTML5新增的 Web Push Notifications 技术。
Daotin
2019/07/28
2.4K0
推送-JPush(极光推送)的使用
推送服务可以说是所有 App 的标配,不论是哪种类型的 App,推送都从很大程度上决定了 App 的 打开率、使用率、存活率 。因此,熟知并掌握推送原理及方法,对每一个开发者来说都是必备技能,对每一个依赖 App 的公司来说都至关重要。本文主要讨论项目中使用极光推送来实现推送业务。
進无尽
2018/09/12
6.7K1
推送-JPush(极光推送)的使用
Ionic3 自动化发布
本文主要介绍使用Jenkins实现app应用的自动打包发布。每次执行jenkins任务的时候,大概流程如下:打包app应用》将app应用作为邮件附件发送给件给客户。 不管你想体验Jenkins自动化部署带来的便捷,还是学习Jenkins 自动部署 app 这门技巧,这篇文章都适合你。如果恰好你所开发的app是在内部使用的,不需要每次都通过qq还是什么方式发送给客户,Jenkins帮你一键搞定。
spilledyear
2018/08/21
5880
Ionic3 自动化发布
相关推荐
Ionic3 拍照上传
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档