はじめに
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)