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

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アプリをインストール

$ cordova run android

Firebase Notificationのテスト

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

FCMを使ってみます

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

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

$ cordova plugin add cordova-plugin-fcm

cordova.jsを読み込む

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

<script type="text/javascript" src="cordova.js"></script>

端末IDの取得

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

onDeviceReady() {
  /* global FCMPlugin */
  FCMPlugin.getToken(
    (token) => {
      console.log(token);
      alert(token);
    },
    (err) => {
      console.log(`error retrieving token: ${err}`);
    }
  );
}

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

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

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

POSTアクセスする

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

URL: https://fcm.googleapis.com/fcm/send
method: POST

[header]

Content-Type: application/json
Authorization: key=(コピーしたServer Key)

[body]

{
  "to": "（コピーしたToken）",
  "priority": "high",
  "notification": {
    "title": "Test",
    "body": "テストです",
    "icon": "icon",
    "color": "#99cc22"
  }
}

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

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

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

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

onDeviceReady() {
  /* global FCMPlugin */
  FCMPlugin.onNotification(
    (data) => {
      if (data.wasTapped) {
        // Notification was received on device tray and tapped by the user.
        alert(JSON.stringify(data));
      } else {
        // Notification was received in foreground. Maybe the user needs to be notified.
        alert(JSON.stringify(data));
      }
    },
    (msg) => {
      console.log(`onNotification callback successfully registered: ${msg}`);
    },
    (err) => {
      console.log(`Error registering onNotification callback: ${err}`);
    }
  );
}

Firebase APIにPOSTアクセス

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

{
  "to": "（コピーしたToken）",
  "priority": "high",
  "notification": {
    "title": "Test",
    "body": "テストです",
    "icon": "icon",
    "color": "#99cc22",
    "click_action":"FCM_PLUGIN_ACTIVITY"
  },
  "data": {
    "title": "受け取りテスト",
    "score": 30
  }
}

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

追記（2019/03/15）

久しぶりにやったらエラーがでました。

最初のエラー

プラグインをインストールして、cordova run androidを実行したらエラーがでました。

Invalid data, chunk must be a string or buffer, not object

下記のとおりにplugins/cordova-plugin-fcm/scripts/fcm_config_files_process.jsを修正したら解決しました。

github.com

google-services.jsonの配置場所に関するエラー

前は、platofrms/android直下だったと思いますが、それだとエラーがでました。

cordova-plugin-fcm: You have installed platform android but file 'google-services.json' was not found in your Cordova project root folder.

こういうのも出ます。

Execution failed for task ':app:processDebugGoogleServices'.
> File google-services.json is missing. The Google Services Plugin cannot function without it. 
   Searched Location: 
  /home/edo/pj/study/cordova-test1/platforms/android/app/src/debug/google-services.json
  /home/edo/pj/study/cordova-test1/platforms/android/app/google-services.json

下記の2箇所に配置したら解決しました。