移动

使用onessignal在Ionic应用程序中推送通知

    查尔斯Muzonzini
    分享

    本文于2017年5月3日更新，适用于Angular 4和Ionic 3。

    介绍推送通知，它们是什么，它们是如何工作的

    推送通知是从服务器发送给应用程序用户的消息。它们通知用户新内容，即使用户没有使用您的应用程序。它们可以提高应用的用户粘性和留存率。WhatsApp的“哨子”就是一个例子，它会在收到新消息时通知你。在本教程中，我们将深入研究如何使用onessignal集成推送通知。

    推送通知的工作原理

    推送通知从应用服务器发送到移动操作系统的推送通知平台之一。苹果iOS的推送通知服务和Android的谷歌云消息服务。这些推送通知服务将消息转发到适当的设备。

    您可能想知道，您的服务器和GCM如何知道将通知发送到哪个设备?您的应用程序将包括向服务器注册其唯一设备令牌的代码。

    在服务器上跟踪这些设备令牌是很乏味的。但是有一些很好的服务可以简化这个过程。onessignal就是这样一种服务。

    步骤1:安装Ionic

    首先，您需要在您的机器上安装Ionic。使用节点包管理器安装它npm；

    如果您没有安装**npm**，请按照参考资料部分中的说明安装它。接下来，根据ionic的目标版本运行以下命令之一，启动一个新的ionic项目;1 * * * *离子

    $ ionic start PushDemo sidemenu ' '

    离子2/3

    上面的命令在当前目录中创建一个新项目。项目文件夹名为' PushDemo ' *，它将使用*sidemenu*模板。

    $ cd PushDemo && ionic serve -lab ' '

    上面的代码导航到你的项目文件夹，并在浏览器窗口中打开你的应用程序进行测试。

    ionic应用程序的浏览器预览

    步骤3:在谷歌云消息传递(GCM)上注册

    访问Firebase控制台并登录您的谷歌帐户:

    https://firebase.google.com/

    Firebase Console首页

    创建一个新项目，给它一个名字，然后进入你的国家。

    创建新的Firebase项目

    点击左上角的齿轮图标并选择项目设置->云的消息传递

    API密钥

    注意图像中突出显示的两个值。的服务器密钥，也被称为谷歌服务器API密钥和发件人ID，也被称为谷歌工程编号．

    步骤4:创建一个OneSignal帐户

    浏览https://www.onesignal.com并创建一个帐户。

    OneSignal.com

    确认您的电子邮件地址并登录

    OneSignal仪表板

    点击添加新应用随你怎么叫。我建议你们给它取和离子工程一样的名字。

    选择平台

    接下来，选择要配置onessignal推送通知的平台。在本教程中，我将为Android配置推送通知。

    输入您的谷歌服务器API密钥而且谷歌工程编号．这些是你从Firebase控制台得到的细节步骤3．

    接下来，为你的应用程序选择目标SDK。在我们的例子中，我们正在制作一个Ionic应用程序，所以你选择，PhoneGap, Cordova, Ionic, Intel XDK

    onessignal应用ID

    注意你的onessignal应用ID．当你将onessignal集成到你的应用程序代码时，你将需要这个。

    第五步:将onessignal集成到你的离子项目中

    回到命令行窗口，从您的项目目录运行;

    这将把onessignal插件添加到ionic项目中。这个插件为ionic应用程序提供了一个API来访问推送通知。否则，它们将无法用于混合应用程序。接下来，导航到你的主“”“app.js”“”文件*[project-directory]/www/js/app.js* ![](https://uploads.sitepoint.com/wp-content/uploads/2017/01/1484738035onesignal-code.png)必威西盟体育网页登录将以下代码添加到你的“”$ionicPlatform.ready()“”函数中

    //一个信号推送通知设置
    //打开调试
    / / window.plugins.OneSignal。setLogLevel({logLevel: 4, visualLevel: 4});
    var notificationOpenedCallback = function(jsonData) {
    console.log(' didReceiveRemoteNotificationCallBack: ' + JSON.stringify(jsonData));
    }；

    window.plugins.OneSignal.init(“ ”,
    {googleProjectNumber:“ "},
    notificationOpenedCallback);

    //如果用户在你的应用程序中有通知，显示一个警告框。
    window.plugins.OneSignal.enableInAppAlertNotification(真正的);

    确保你输入了你的**应用ID**和**谷歌项目号**。保存文件。导航到你的“app.ponent .ts”文件*[project-directory]/src/app/ app.ponent .ts* ![](https://uploads.sitepoint.com/wp-content/uploads/2017/03/1490609438PushDemo-ion2.png)将以下代必威西盟体育网页登录码添加到你的“this.platform.ready()”函数中

    //打开调试
    / /窗口.OneSignal“插件”。setLogLevel({logLevel: 4, visualLevel: 4});

    var notificationOpenedCallback = function(jsonData) {
    console.log(' notificationOpenedCallback: ' + JSON.stringify(jsonData));
    }；

    窗口(“插件”)。OneSignal
    .startInit(“ ”、“ ”)
    .handleNotificationOpened (notificationOpenedCallback)
    .endInit ();     

    确保你输入了你的**应用ID**和**谷歌项目号**。保存文件。就是这样!这就是将onessignal代码集成到Ionic 1或2/3应用程序中所要做的全部工作。接下来，通过USB线将android测试设备连接到计算机。然后使用以下命令编译并安装PushDemo应用程序:

    $ ionic build android && adb install -r /平台/ android /构建/输出/ apk android-debug.apk”

    检查订阅用户

    接下来，在您的设备上运行应用程序，以便它注册到onessignal服务器。然后单击检查订阅用户．

    6 .测试

    点击pushdemo应用

    点击新的推送通知

    创建一个测试通知，然后单击预览．接下来,单击发送．

    您将立即在您的设备上收到推送通知。

    从OneSignal发送推送通知

    信号额外功能

    onessignal还有很多其他很棒的功能，你应该进一步探索;

    • 通知中的表情符号
    • 安排的通知
    • 通知模板
    • 实时分析
    • 用户段
    • 自动信息

    OneSignal分析

    OneSignal分析

    参考文献

    • 安装npm -
      https://www.必威西盟体育网页登录sitepoint.com/beginners-guide-node-package-manager/

    • 代码存储库- https://github.com/chmod-777/pushDemo

    • Ionic框架文档- https://ionicframework.com/docs/

    • OneSignal文档- https://documentation.onesignal.com/

    Baidu