：集成JPUSH

Posted 2020-07-13 Introspection & Change

如果不想自己搭建push server，则可以借助于第三方的api来实现push的功能，本文主要介绍ionic如何集成jpush。

具体步骤如下：

• 创建ionic应用：ionic_jpush。
• 申请jpush账号：创建应用，上传开发者证书，并且记录jpush_api_appkey。
• 安装jpush plugin

first way： cordova plugin add jpush-phonegap-plugin --variable API_KEY=your_jpush_appkey

second way：cordova plugin add https://github.com/jpush/jpush-phonegap-plugin.git --variable API_KEY=your_jpush_appkey  

third way：
git clone https://github.com/jpush/jpush-phonegap-plugin.git
cordova plugin add $JPUSH_PLUGIN_DIR  --variable API_KEY=your_jpush_appkey

• 修改配置

找到路径：ionic_jpush\plugins\cn.jpush.phonegap.JPushPlugin\src\ios\PushConfig.plist，修改jpush_api_key，并且填写如下部分：

<key>APS_FOR_PRODUCTION</key>
<string>0</string>

• 在services中添加push工厂：

.factory(‘Push‘, function() {
    var push;
    return {
      setBadge: function(badge) {
        if (push) {
          console.log(‘jpush: set badge‘, badge);
          plugins.jPushPlugin.setBadge(badge);
        }
      },
      setAlias: function(alias) {
        if (push) {
          console.log(‘jpush: set alias‘, alias);
          plugins.jPushPlugin.setAlias(alias);
        }
      },
      check: function() {
        if (window.jpush && push) {
          plugins.jPushPlugin.receiveNotificationIniOSCallback(window.jpush);
          window.jpush = null;
        }
      },
      init: function(notificationCallback) {
        console.log(‘jpush: start init-----------------------‘);
        push = window.plugins && window.plugins.jPushPlugin;
        if (push) {
          console.log(‘jpush: init‘);
          plugins.jPushPlugin.init();
          plugins.jPushPlugin.setDebugMode(true);
          plugins.jPushPlugin.openNotificationInandroidCallback = notificationCallback;
          plugins.jPushPlugin.receiveNotificationIniOSCallback = notificationCallback;
        }
      }
    };
  })

•  在app.js的run中初始化jpush并添加监听事件：其中请修改别名“12345678”成为你想要的name。

.run(function($ionicPlatform,Push) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);

    }
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
    }

    //jpush callback method
      var notificationCallback = function(data) {
          console.log(‘received data :‘ + data);
          var notification = angular.fromJson(data);
          //app 是否处于正在运行状态
          var isActive = notification.notification;

          // here add your code
          //ios
          if (ionic.Platform.isIOS()) {
            window.alert(notification);
          } else {
          //非 ios(android)
          }
      };

      //初始化
      Push.init(notificationCallback);
      //设置别名
      Push.setAlias("12345678");

      console.log(‘start to define addEventListener‘);
      var onOpenNotification= function(event) {
        console.log("JPushPlugin:onOpenNotification is triggered");
      };
      var onBackgroundNotification = function(event){
            console.log("JPushPlugin:onBackgroundNotification is triggered");
      };
      var onReceiveNotification = function(event){
        console.log("JPushPlugin:onReceiveNotification is triggered");
      };
      console.log(‘end to define addEventListener‘);
      console.log(‘start to add addEventListener‘);
      document.addEventListener("jpush.openNotification", onOpenNotification, false);
      document.addEventListener("jpush.receiveNotification", onReceiveNotification, false);
      document.addEventListener("jpush.backgroundNotification", onBackgroundNotification, false);
      console.log(‘end to add addEventListener‘);
  });
})

•  编译ios项目：

ionic build iOS

• 使用xcode打开工程：进行证书配置，确保使用的开发者证书有apns的权限。
• 在jpush官网中进行push模拟。

常见问题：

1. ios编译失败等一系列问题：最好请有经验的ios开发人员帮忙排查。
2. 无法连接到jpush服务器：请检查api_key是否正确。
3. 无法接收push信息：请检查jpush官网的push证书配置是否正确。

参考资料：

1. jpush plugin
2. ionic自定义jpush