ionic4+Firebaseでpush通知

今回から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アプリで受信します。