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

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

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

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

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

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

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

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

【格安】Webサイト セキュリティ自動診断「クイックスキャナー」

【格安】Webサイト セキュリティ自動診断「クイックスキャナー」

【予約システム開発】EDISONE カスタマイズ開発サービス

【予約システム開発】EDISONE カスタマイズ開発サービス

【100URLの登録が0円】Webサイト監視サービス『Appmill』

【100URLの登録が0円】Webサイト監視サービス『Appmill』

【200ヶ国以上に対応】グローバル eSIM「ビヨンドSIM」

【200ヶ国以上に対応】グローバル eSIM「ビヨンドSIM」

【中国への旅行・出張・駐在なら】中国SIMサービス「チョコSIM」

【中国への旅行・出張・駐在なら】中国SIMサービス「チョコSIM」

【グローバル専用サービス】北米・中国でも、ビヨンドのMSP

【グローバル専用サービス】北米・中国でも、ビヨンドのMSP

【YouTube】ビヨンド公式チャンネル「びよまるチャンネル」

【YouTube】ビヨンド公式チャンネル「びよまるチャンネル」

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

以上です。

この記事がお役に立てば【 いいね 】のご協力をお願いいたします!
0
読み込み中...
0 票, 平均: 0.00 / 10
653
X facebook はてなブックマーク pocket
【2024.6.30 CentOS サポート終了】CentOS サーバー移行ソリューション

【2024.6.30 CentOS サポート終了】CentOS サーバー移行ソリューション

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

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

【大阪 / 横浜】インフラエンジニア・サーバーサイドエンジニア 積極採用中!

【大阪 / 横浜】インフラエンジニア・サーバーサイドエンジニア 積極採用中!

この記事をかいた人

About the author