【大阪 / 横浜 / 徳島】インフラ / サーバーサイドエンジニア募集中！

【導入実績 500社以上】AWS 構築・運用保守・監視サービス

【CentOS 後継】AlmaLinux OS サーバー構築・移行サービス

【WordPress 専用】クラウドサーバー『ウェブスピード』

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

2016.09.27

Webシステム開発

目次 [非表示]

1 これです。

こんにちは。
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. モジュールをインストール

1	`$ 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 => 認証情報」にて確認できます。

以上です。

この記事がお役に立てば【いいね】のご協力をお願いいたします！

読み込み中...

【2026.6.30 Amazon Linux 2 サポート終了】Amazon Linux サーバー移行ソリューション

この記事をかいた人

About the author

後藤裕策

ゲーム関連会社2016年7-8月決算まとめ GETとPOSTの違いについて