Ionic+CordovaでFirebase Cloud Messaging(FCM)の実装

# はじめに
Ionic4+CordovaでFirebase Cloud Messagingを試してみました。
プラグインがいくつかありますが、ここでは、`cordova-plugin-fcm-with-dependecy-updated`を使いました。

# 環境
- Ionic CLI : 5.2.8
- Ionic Framework : @ionic/angular 4.9.1
- Cordova CLI : 9.0.0 
- Cordova Platforms : android 8.0.0, ios 5.0.1
- cordova-plugin-fcm-with-dependecy-updated: 3.2.0

# 設定手順
### Ionic プラットフォームとプラグインの追加
``` 
$ ionic start myApp blank
$ cd myApp
$ ionic cordova platform add android
$ ionic cordova platform add ios

$ ionic cordova plugin add cordova-plugin-fcm-with-dependecy-updated
$ npm install @ionic-native/fcm
```

### Firebase設定ファイルのコピー
```
$ cp <ダウンロードした場所>/GoogleService-Info.plist .
$ cp <ダウンロードした場所>/google-services.json .
```

### config.xmlの編集
プロジェクトフォルダにある`config.xml`を編集します。

``` config.xml
<platform name="android">
    <resource-file src="google-services.json" target="app/google-services.json" /> # この行を追加
    ...
</platform>
<platform name="ios">
    <resource-file src="GoogleService-Info.plist" /> # この行を追加
    ...
</platform>
```

### config.xmlの編集 (idの修正)
先ほどと同じconfig.xmlのidをfirebaseコンソールで指定したアプリのidに変更します。
この例では、`com.example.firebasetest`。

``` config.xml
<widget id="com.example.firebasetest" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
```

### app.module.tsの編集
FireebaseAnalyticsの2行を追加。以下は、追加した部分近くのみ取り出しています。

``` src/app/app.module.ts
import { FCM } from '@ionic-native/fcm/ngx'; // 追加

@NgModule({
  providers: [
    StatusBar,
    SplashScreen,
    FCM,  // 追加
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
```

### app.component.tsの編集
```src/app/app.component.ts
import { FCM } from '@ionic-native/fcm/ngx'; // 追加
@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})
export class AppComponent {
  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private fcm: FCM, // 追加
    private statusBar: StatusBar
  ) {
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => {
      // 以下追加
      this.fcm.getToken().then(token => {
        alert(token);
      });
      this.fcm.onNotification().subscribe(data => {
        if(data.wasTapped){
          // バックグランド時の受信
          alert( JSON.stringify(data) );
        }else{
          // フォアグランド時の受信
          alert( JSON.stringify(data) );
        };
      });
   }
}

```

# Androidアプリの起動
以下のコマンドでアプリ起動することで、FirebaseからPUSH通知が送れます。

```
$ ionic cordova run android
```

# PUSH通知の送信
`onNotification()`を起動するためには、PUSH通知メッセージに以下の`click_action:`を含める必要があります。

```
"click_action":"FCM_PLUGIN_ACTIVITY",
```

Firebase Admin SDKを使ったPythonの実装例は以下です。

``` python
import firebase_admin
from firebase_admin import credentials
from firebase_admin import messaging

cred = credentials.Certificate("path/to/serviceAccountKey.json")
firebase_admin.initialize_app(cred)

# This registration token comes from the client FCM SDKs.
registration_token = 'YOUR_REGISTRATION_TOKEN'

# See documentation on defining a message payload.
notification = messaging.Notification(
    title = 'test server',
    body = 'test server message',
)

androidNotification = firebase_admin.messaging.AndroidNotification(
    click_action='FCM_PLUGIN_ACTIVITY',
) // click_actionを追加

android = messaging.AndroidConfig(
    notification=androidNotification,
)

message = messaging.Message(
    notification=notification,
    android=android, // Android用の設定を追加
    token=registration_token,
)

# Send a message to the device corresponding to the provided
# registration token.
response = messaging.send(message)
# Response is a message ID string.
print('Successfully sent message:', response)
```



# 参考文献
- [FCMプラグイン(Ionicページ)](https://ionicframework.com/docs/native/fcm)
- [FCMプラグイン(GitHubページ)](https://github.com/andrehtissot/cordova-plugin-fcm-with-dependecy-updated)
- [Firebase Messagingリファレンスマニュアル](https://firebase.google.com/docs/reference/admin/python/firebase_admin.messaging)