欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

ionic2集成极光推送

程序员文章站 2022-05-30 21:33:47
...

ionic2集成极光推送;

ionic2api:https://ionicframework.com/docs/

极光推送官网:https://www.jiguang.cn

android-怎么注册极光以及新建项目:https://docs.jiguang.cn/jpush/client/Android/android_3m/

ios-怎么注册极光以及新建项目:https://docs.jiguang.cn/jpush/client/iOS/ios_guide_new/

ioic项目搭建就不介绍了;

在现有的项目上集成jpush;

pack.json里添加:

{
...
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@jiguang-ionic/jpush": "^1.0.2",
    "jpush-phonegap-plugin": "~3.3.4"
  },
  "cordova": {
    "plugins": {
      ..
      "jpush-phonegap-plugin": {
        "APP_KEY": "极光appkey"
      }
     ..
    },
    "platforms": [
      "android",
      "ios"
    ]
  }
}

参照官方文档:https://github.com/jpush/jpush-phonegap-plugin

因为我们用了ionic所以我们需要@jiguang-ionic/jpush包;

app.module.ts中增加:

import { JPush } from '@jiguang-ionic/jpush';
...
  providers: [
    ...
    JPush,
    ...
  ]

注册极光

app.component.ts里增加:

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { JPush } from '@jiguang-ionic/jpush';

import { HomePage } from '../pages/home/home';
@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = HomePage;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, jpush: JPush) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();

      jpush.init();//注册极光
      jpush.setDebugMode(true);
    });
  }
}

监听推送home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { JPush } from '@jiguang-ionic/jpush';
import { Device } from '@ionic-native/device';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  public registrationId: string;

  devicePlatform: string;
  sequence: number = 0;

  tagResultHandler = function(result) {
    var sequence: number = result.sequence;
    var tags: Array<string> = result.tags == null ? [] : result.tags;
    alert('Success!' + '\nSequence: ' + sequence + '\nTags: ' + tags.toString());
  };

  aliasResultHandler = function(result) {
    var sequence: number = result.sequence;
    var alias: string = result.alias;
    alert('Success!' + '\nSequence: ' + sequence + '\nAlias: ' + alias);
  };

  errorHandler = function(err) {
    var sequence: number = err.sequence;
    var code = err.code;
    alert('Error!' + '\nSequence: ' + sequence + '\nCode: ' + code);
  };

  constructor(public navCtrl: NavController, public jpush: JPush, device: Device) {

    this.devicePlatform = device.platform;

    document.addEventListener('jpush.openNotification', (event: any) => {
      alert('jpush.openNotification' + JSON.stringify(event));
      this.jpush.setBadge(0);
      this.jpush.setApplicationIconBadgeNumber(0);
    })

    document.addEventListener('jpush.receiveNotification', (event: any) => {
      var content;
      if (this.devicePlatform == 'Android') {
        content = event.alert;
      } else { 
        content = event.aps.alert;
      }
      alert('Receive notification: ' + JSON.stringify(event));

      this.jpush.setBadge(0);
      this.jpush.setApplicationIconBadgeNumber(0);
    }, false);

    document.addEventListener('jpush.openNotification', (event: any) => {
      var content;
      if (this.devicePlatform == 'Android') {
        content = event.alert;
      } else {  // iOS
        if (event.aps == undefined) { // 本地通知
          content = event.content;
        } else {  // APNS
          content = event.aps.alert;
        }
      } 
      alert('open notification: ' + JSON.stringify(event));
    }, false);

    document.addEventListener('jpush.receiveLocalNotification', (event: any) => {
      // iOS(*,9) Only , iOS(10,*) 将在 jpush.openNotification 和 jpush.receiveNotification 中触发。
      var content;
      if (this.devicePlatform == 'Android') {
      } else {
        content = event.content;
      } 
      alert('receive local notification: ' + JSON.stringify(event));
    }, false);
  }

  getRegistrationID() {
    this.jpush.getRegistrationID()
      .then(rId => {
        this.registrationId = rId;
      });
  }

  setTags() {
    this.jpush.setTags({ sequence: this.sequence++, tags: ['Tag1', 'Tag2']})
      .then(this.tagResultHandler)
      .catch(this.errorHandler);
  }

  addTags() {
    this.jpush.addTags({ sequence: this.sequence++, tags: ['Tag3', 'Tag4']})
      .then(this.tagResultHandler)
      .catch(this.errorHandler);
  }

  checkTagBindState() {
    this.jpush.checkTagBindState({ sequence: this.sequence++, tag: 'Tag1' })
      .then(result => {
        var sequence = result.sequence;
        var tag = result.tag;
        var isBind = result.isBind;
        alert('Sequence: ' + sequence + '\nTag: ' + tag + '\nIsBind: ' + isBind);
      }).catch(this.errorHandler);
  }

  deleteTags() {
    this.jpush.deleteTags({ sequence: this.sequence++, tags: ['Tag4']})
      .then(this.tagResultHandler)
      .catch(this.errorHandler);
  }

  getAllTags() {
    this.jpush.getAllTags({ sequence: this.sequence++ })
      .then(this.tagResultHandler)
      .catch(this.errorHandler);
  }

  cleanTags() {
    this.jpush.cleanTags({ sequence: this.sequence++ })
      .then(this.tagResultHandler)
      .catch(this.errorHandler);
  }

  setAlias() {
    this.jpush.setAlias({ sequence: this.sequence++, alias: 'TestAlias' })
      .then(this.aliasResultHandler)
      .catch(this.errorHandler);
  }

  getAlias() {
    this.jpush.getAlias({ sequence: this.sequence++ })
      .then(this.aliasResultHandler)
      .catch(this.errorHandler);
  }

  deleteAlias() {
    this.jpush.deleteAlias({ sequence: this.sequence++ })
      .then(this.aliasResultHandler)
      .catch(this.errorHandler);
  }

  addLocalNotification() {
    if (this.devicePlatform == 'Android') {
      this.jpush.addLocalNotification(0, 'Hello JPush', 'JPush', 1, 5000);
    } else {
      this.jpush.addLocalNotificationForIOS(5, 'Hello JPush', 1, 'localNoti1');
    }
  }
}

具体api请查看官网文档,以上是在ts下的使用方式