CordovaでFirebase Cloud Messaging(FCM)を使ってプッシュ通知(Android)

このエントリーをはてなブックマークに追加
Pocket
LINEで送る

cordovaでAndroidのプッシュ通知をします。
GCMを使ってプッシュ通知する方法が、Firebaseを使う仕様に変更されています。FirebaseのFirebase Cloud Messaging(FCM)です。cordova-plugin-fcmというプラグインを利用します。

まずはFirebase Notificationを使ってテスト

まずは、Firebase Notificationを使ってテストします。Firebase Notificationは、FCMの一機能で、WEB上でメッセージなどを登録することで、簡単にpush通知ができるサービスです。アプリ側での受信設定などもせずにテストできます。やることは、FCMにアプリを登録し、AndroidにFirebaseを登録して、Firebase NotificationのWEBフォームからメッセージを送信するだけです。

Firebaseでアプリを登録

Firebaseのコンソールに行きます。

  • 新規プロジェクトを作成します。
  • AndroidアプリにFirebaseを追加をクリックして、追加します。
  • 追加した際にダウンロードされる、google-services.jsonをplatforms/android直下に配置します。

config.xmlの設定

プロジェクト作成時に記載したパッケージ名とconfig.xmlに記載されている、id名が同じか確認します。異なる場合は、config.xmlを正しいパッケージ名に修正します。

実機にAndroidアプリをインストール

Firebase Notificationのテスト

Firebaseのコンソールから、アプリを選択して、左側のサイドバーからNotificationsをクリックすると、Notificationの一覧画面が表示されます。右上の新しいメッセージをクリックして、メッセージを入力し、パッケージ名を選択して、送信します。これで画面に表示されれば成功です。Firebase Notificationは、デフォルトではアプリが表示されている状態だと何もしません。一旦アプリをバックグラウンドにしてから、メッセージを送信します。

FCMを使ってみます

FCMは、端末毎やトピック毎に送信を管理できます。まずは簡単なテストからやってみます。やることは、端末側で端末IDを取得し、その端末IDをコンソールに表示させます。その端末IDをメモって、FCMにPOSTでプッシュ通知させるようにしてみます。これで動けばとりあえずプッシュ通知成功です。

cordova-plugin-fcmプラグインをインストール

cordova.jsを読み込む

www/index.html内で、cordova.jsを読み込むようにします。

端末IDの取得

端末IDの取得等のコードを書くときは、devicereadyイベントが取得後にしないといけません。deviceready前だと何もせずに終わってしまいます。cordova createで作成したプロジェクトはデフォルトで、index.jsというのがあります。ここにdevicereadyイベント発火後に動作する、onDeviceReady関数がありますので、この中に、端末取得コードを書いていきます。FCMPlugin.getToken()で取得できます。使い方の説明は、https://github.com/fechanique/cordova-plugin-fcmに色々書いてあります。

上記を追加してcordova run android を実行すると、画面にトークンが表示されますし、ログにも出力されます。長いのでログからコピーしておきます。

Firebase APIにPOSTアクセスして、メッセージ送信

まず、Firebaseのコンソールに行き、プロジェクトを選択し、設定画面に行くと、クラウドメッセージングというタブがあるので、それをクリックします。すると、Server Keyがありますので、これをコピーします。

POSTアクセスする

ここに仕様が書いてあります。ここには、送信データのパラメータの説明が書いてあります。
chrome拡張のpostmanでやってみます。

[header]

[body]

これで端末にpush通知が来れば成功です。

プッシュ通知にdataを渡してアプリで使う

アプリに受け取りコードを書く

トークン取得時と同じ場所にコードを書きます。

Firebase APIにPOSTアクセス

プッシュ通知にdataを渡すとアプリで使えます。postデータは下記のようにdataを使います。notificationに、click_actionを追加していますが、これがないと、Androidのバックグラウンド時に、通知をタップしたあとの処理が動きませんでした。

これで、Androidの場合、フォアグラウンド時、バックグラウンド時ともに、プッシュ通知が表示され、アプリ側でdataの内容を操作できることが確認できました。

このエントリーをはてなブックマークに追加
Pocket
LINEで送る

Leave a comment

Your email address will not be published.


*