【TypeScript】ionic2 で Push通知 の使用例【Android】

こんにちは。
Web開発部の後藤です。

前回に次いで今回は Ionic2 での Push通知の使用例を書きたいと思います。
GCM (Google Cloud Messaging) を利用します。

これです。

import { Push, provideCloud, CloudSettings } from '@ionic/cloud-angular';

const SENDER_ID = "{GCMのプロジェクトの番号}";

const cloudSettings: CloudSettings = {
  'core': {
    'app_id': '{アプリの ID}'
  },
  'push': {
    'sender_id': SENDER_ID
  }
};

@Component({省略})
class MyApp {
    constructor(private platform: Platform, private push: Push) {
        this.platform.ready().then(() => {
            var myPush = new Push.init(
                android: {
                    sender_id: SENDER_ID
                }
            );

            push.on('registration', (id) => {
                console.log(id);	// => {registration id} が出力される
            });

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

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

ionicBootstrap(MyApp, [provideCloud(cloudSettings)]);

ただしこれだけでは動かない

必要なものを導入します。

1. プラグインをインストール

$ ionic plugin add phonegap-plugin-push --variable  SENDER_ID="{プロジェクトの番号}"

2. モジュールをインストール

$ npm install --save @ionic/cloud-angular

動作確認

curl -X POST -H "Authorization: key={認証キー}" -H "Content-Type: application/json" -d '{
    "registration_ids": ["{push通知対象のレジストレーションID}"],
    "data": {
        "title" : "やばい",
        "message": "具体的にはお腹の具合がやばい"
    }
}' "https://android.googleapis.com/gcm/send"

補足説明

ソースコード中に出てきた、以下について「？？」な方へ簡単ではありますが
補足説明を書きます。

• アプリの ID
• GCM のプロジェクトの番号
• registration id
• 認証キー

ってなんだ？と思った方への簡単な補足説明を書きます。

アプリのID

アプリのIDとは、Ionicプロジェクトのルートディレクトリに設置してある
「ionic.config.json」内に記述してある app_id に定義されているIDです。
ionicコマンドを用いてプロジェクト作成した時の名前がそのまま反映されていると思います。
されていなかったら自分で設定しましょう。

GCM のプロジェクトの番号

ここへアクセスしたら、プロジェクトを作りましょう。
プロジェクトを作ると「プロジェクトID」、「プロジェクト番号」が発行されます。
Push通知で使用するのはそのプロジェクト番号に当たります。
既にに作ってあるという方は「IAMと管理 => 設定」というところから確認できます。

registration id

これはスマートフォン側で発行されるものです。
発行されたらサーバーに送っておきましょう。
サーバー側がPush通知をしたいときに、
そのIDを持つスマホ宛にPushするようにGCMへリクエストをします。

認証キー

Push通知のリクエストをGCMへ行う際の認証キーです。
GoogleAPIs の 「API Manager => 認証情報」にて確認できます。

以上です。