Help us understand the problem. What is going on with this article?

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の実装例は以下です。

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)

参考文献

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away