美文网首页Ios@IONIChybrid APP(ionic)ionic3+
ionic3 OneSignal 推送服务搭建

ionic3 OneSignal 推送服务搭建

作者: No刹那光辉 | 来源:发表于2017-12-18 17:30 被阅读217次

    OneSignal是一个很好的推送软件(非大陆使用,ios正常,android无法接收),跟极光推送差不多,不过android版使用的是google提供的服务进行系统通知,所以不会像极光存在可能接收不到推送的情况。而且最重要的是不限次数,免费。只是很可惜,这玩意大陆用不了,google服务被墙了,只限于没被墙的地区。由于手头上有个项目是香港地区用的,所以使用到了OneSignal(大陆Android手机无法正常使用)。
    -.-

    ionic onesignal 搭建说明网址
    https://ionicframework.com/docs/native/onesignal/
    https://documentation.onesignal.com/docs/ionic-sdk-setup

    1.Windows 下android搭建

    先翻墙,否则安装成功了编译时也无法下载依赖文件

    1.1 现在官网注册一个帐号,注册的帐号将会用来进行推送信息

    官网:https://onesignal.com/
    创建帐号成功后点击进行创建应用

    图片.png
    1.2 onesignal官网中配置android平台

    点击刚才创建的应用进行配置


    图片.png

    此处需要一个key和项目号码

    图片.png

    点击箭头进入超链接跳转
    在文中点击箭头处的超链接进行注册创建

    图片.png

    按照此链接说明创建google应用即可
    https://documentation.onesignal.com/docs/generate-a-google-server-api-key

    最终会得到一个key和number


    图片.png

    填入onesignal应用中android配置即可

    1.3 添加到ionic项目

    项目根目录执行

    $ ionic cordova plugin add onesignal-cordova-plugin
    $ npm install --save @ionic-native/onesignal
    

    调用绑定

    import { OneSignal } from '@ionic-native/onesignal';
    
    constructor(private oneSignal: OneSignal) { }
    
    ...
    this.oneSignal.startInit('b2f7f966-d8cc-11e4-bed1-df8f05be55ba', '703322744261');
    
    this.oneSignal.inFocusDisplaying(this.oneSignal.OSInFocusDisplayOption.InAppAlert);
    
    this.oneSignal.handleNotificationReceived().subscribe(() => {
     // do something when notification is received
    });
    
    this.oneSignal.handleNotificationOpened().subscribe(() => {
      // do something when a notification is opened
    });
    
    this.oneSignal.endInit();
    
    

    此处代码startInit函数中的参数来自于


    图片.png
    图片.png

    至此android搭建完成,从新编辑运行即可

    2. mac 下ios搭建

    2.1 生成推送证书

    只需要安装以下网址配置即可
    https://documentation.onesignal.com/docs/generate-an-ios-push-certificate

    最终把.p12文件上传


    图片.png
    图片.png
    2.2 添加插件到项目
    1. 请先确保ios版本在4.3.0以上
    2. 确保cordova版本在6.4 以上
    3. 确保cocoapods是1.1.1版本,如有多个版本请删除其它(pod --version 查看)
    4. 确保有权限(详情:http://www.jianshu.com/p/f60d28adb468

    如未安装cocoapods,请先下载

    sudo gem install cocoapods :1.1.1
    pod repo update
    

    安装插件到项目,此处不能能用sudo进行添加,否则会报错(You cannot run CocoaPods as root),所以要先确保有权限

    $ ionic cordova plugin add onesignal-cordova-plugin
    $ npm install --save @ionic-native/onesignal
    

    项目代码与android配置中的ts代码一样

    2.3 编译成功后打开YourAppName.xcworkspac文件

    在项目根目录/platform/ios/YourAppName.xcworkspace
    由于使用了cocoapods 进行构建,所以不能再使用以前的 YourAppName.xcodeproj,否则会无法正常运行

    2.4 启用推送(必要)
    图片.png
    2.5 可选配置(推荐)

    链接:https://documentation.onesignal.com/docs/ionic-sdk-setup
    如下图所示进行配置即可:

    图片.png

    至此,ios版配置也完成

    3. 测试

    3.1 程序运行到手机后,在onesignal对应的应用中查看是否有注册成功
    图片.png

    由上图可见,大陆android手机并不能接收该推送,其中Subscrlbed为Yes的才能正常接收推送信息,ios正常。而这部正常的android测试机由香港提供。

    3.2 推送

    点击新建信息发送给所有人或者指定人群即可


    图片.png 图片.png

    可接受人总数


    图片.png

    无论程序是否关闭,程序依然能通过手机系统进行接收信息

    相关文章

      网友评论

      • 1060bbb5813e:楼主文章写的真好,现在没有项目需要翻墙的,没有机会走一遍,先收藏了:grin:
        No刹那光辉:@日久不生情 :grin:

      本文标题:ionic3 OneSignal 推送服务搭建

      本文链接:https://www.haomeiwen.com/subject/axjmwxtx.html