今回からionic4。
FirebaseのCloud Messagingを使ってpush通知を送信、Androidアプリ側で受信してみる。
1.ionicプロジェクトの作成
まずは、今回のpush通知で使用するionicのプロジェクトを作成します。
ionic start push_notification
テンプレートは「blank」を指定。
? Starter template: > blank | A blank starter project sidemenu | A starting project with a side menu with navigation in the content area tabs | A starting project with a simple tabbed interface
こちらは「n」で。
? Install the free Ionic Appflow SDK and connect your app? (Y/n)
Android向けにプラットフォームを追加します。
ionic platform add android
ちなみにiosの場合は
ionic platform add ios
2.パッケージ名の設定
config.xmlでパッケージ名を修正しておきます。
id=”XXX”の部分を任意のパッケージ名に変更します。
ここではjp.masa_lab.pushとしておきます。
今回はpush通知を受け取ることが目的なので、アプリとしての実装はほとんどありません。
home.page.htmlでタイトルの変更と初期コメントの削除をしておきましょう。
<ion-header>
<ion-toolbar>
<ion-title>
pushu notification
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content
padding>
</ion-content>
プロジェクトが作成できたら、ブラウザとandroidの実機で起動することを確認しておきます。
3.Firebaseプロジェクトの作成
ここから、Firebaseのpush通知を組み込んでいきます。
まず、Firebase上でandroid向けプロジェクトを生成します。
プロジェクト名は「pushuNotification」としました。
パッケージ名は先にconfig.xmlで設定しておいてたパッケージ名です。
プロジェクトの作成が完了すると、「設定ファイルのダウンロード」から「google-services.json」をダウンロードすることができます。
ダウンロードできたら、ファイルをionicプロジェクトのルートフォルダに入れておきます。
4.cordova-plugin-firebaseプラグインの追加
プロジェクトに「cordova-plugin-firebase」を追加します。
$ ionic cordova plugin add cordova-plugin-firebase $ npm install @ionic-native/firebase
※cordova-plugin-firebaseを追加することで、3.のgoogle-services.jsonを各プラットフォームに追加します。
なので、3.と4.の順番は間違えないようにしましょう。
5.app.module.tsの設定
app.module.tsにFirebaseをインポートし、providerに追加します。
importの末尾の「ngx」をつけ忘れて、路頭に迷うことが無いように。
import { Firebase } from '@ionic-native/firebase/ngx';
中略
providers: [
…
Firebase,
…
]
6.home.page.tsの実装
import { Component } from '@angular/core';
import { Firebase } from '@ionic-native/firebase/ngx';
import { Platform } from '@ionic/angular';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
constructor(public platform: Platform, private firebase: Firebase,) {
if (platform.is('cordova')) {
firebase.getToken()
.then(token => this.registerToken(token))
.catch(error => console.error('Error getting token', error));
firebase.hasPermission().then( data => {
if(data.isEnabled != true){
firebase.grantPermission().then( data => { //通知を許可する
console.log(data.body);
});
}
});
firebase.onNotificationOpen().subscribe( data => {
console.log(data.body);
this.showAlert(data.body);
});
}
}
private registerToken(token: string) {
//alert(token); //tokenが取得できれば表示
}
private showAlert(message: string) {
alert(message); //tokenが取得できれば表示
}
}
簡単にですが、ソースコードの内容を説明しておきます。
2行目はFirebaseモジュール、3行目はプラットフォームのインポートです。
いずれも10行目のコンストラクタで使用しています。
11行目のif (platform.is(‘cordova’)) がアプリの起動環境の判定です。
‘cordova’の指定により、androidまたはiosを判定します。
12行目のfirebase.getToken()により、push通知のトークンを取得します。
取得に成功した場合13行目のthis.registerToken(token)を実行します。
(今回はregisterToken()は特に何もしていません。)
16行目のfirebase.hasPermission()でpush通知の受信権限を判定しています。
17行目で取得したpush通知データの利用可否を判定し、利用不可のばあい
18行目で利用権限を与えます。
24行目のonNotificationOpen()でプッシュ通知を開いたときに、通知データを取得しています。
各APIの詳細は公式サイトをご覧ください。
これでクライアント側の実装は完了です。
つぎはFirebaseのCloud Messagingからpush通知を送信し、Androidアプリで受信します。
7.push通知の送信
事前にクライアント(Androidアプリ)側を起動しておきます。
ionic cordova run android
Firebaseにログインし、3.で作成したプロジェクトを選択します。
左メニューの「拡大」から「Cloud Messaging」を選択します。
「Send your first message」をクリックします。
以下のメッセージ作成画面に遷移するので、必要な情報を入力して「確認」ボタン→「公開」ボタンをクリックします。
これでAndroidアプリ側でメッセージを受信できたはずです。
push通知の本文をconsole.logに出力しています。
chromeのinspectで確認できます。