ここではCordovaを使用して、iOS, Androidアプリを開発した場合に、どのようにしてPush通知を受け取るのかをご説明します。

プラグイン

CordovaでPush通知を受け取るためのプラグインには、phonegap-plugin-pushを使います。

AppPotへのログイン時に必要なデバイス情報の取得のために、cordova-plugin-deviceを使います。

プラグインの追加

下記コマンドでプラグインを追加します。

cordova plugin add phonegap-plugin-push
cordova plugin add cordova-plugin-device

config.xml の設定

Android GCM の設定

resource-fileタグにGCMの設定を記述した、google-services.jsonを設定します。

<platform name="android">
  <resource-file src="google-services.json" target="app/google-services.json" />
</platform>

iOS APNs の設定

iOSのAPNsはデフォルトで設定されるので、設定は不要です。

プラグイン設定の追加

<plugin name="phonegap-plugin-push" spec="^1.9.4">
  <variable name="SENDER_ID" value="123456789" />
</plugin>

デバイス登録

PushNotification.init()にAndroid、iOSの設定値を渡してデバイスを登録します。
デバイスの登録の完了は、registrationイベントでハンドリングできます。
デバイス登録はdevicereadyイベントのコールバックで実行します。

document.addEventListener("deviceready", () => {
  const push = PushNotification.init({
    android: {
      senderID: PushSenderId
    },
    ios: {
      alert: true,
      badge: true,
      sound: true,
      clearBadge: true
    }
  });

  push.on('registration', (data)=>{
    console.log('registration', data);
  });
});

ログイン

Push機能を持つアプリの場合、ログイン時にデバイス情報が必要になります。
registrationイベントのコールバックでデバイス情報を取得して、AppPot.Deviceオブジェクトを作成します。

var device = {};

document.addEventListener("deviceready", () => {

  const push = PushNotification.init({
    ....
  });

  push.on('registration', (data)=>{
    device = new AppPot.Device({
      udid: window.device.uuid,
      token: data.registrationId,
      name: window.device.model,
      osType: window.device.platform
    });
  });
});

function login() {
  AppPot.LocalAuthenticator.login("xxxx", "xxxx", true, device)
    .then(()=>{
      console.log("Logined");
    }).catch((e)=>{
      alert("Login Error");
    });
}

通知の受信

通知の受信はnotificationイベントでハンドリングします。
通知のエラーはerrorイベントでハンドリングが可能です。

push.on('notification', (data)=>{
  console.log('notification', data);
});

push.on('error', (e)=>{
  console.log('error', e)
});

通知の送信

AppPotを使ってPush通知を送信するには、AppPot.sendPushNotificationメソッドを使います。

AppPot.sendPushNotification("Message", {"all":true}, "Title");

Monacaを使ったサンプル

HTML5ハイブリッドアプリ開発プラットフォーム「Monaca」を使った、Push通知のサンプルアプリのソースをこちらで公開しています。

apppot-sample-push